Modular development of require.js

This time I will bring you the Modularization development of require.js. What are the precautions for the modular development of require.js? The following is a practical case. Let’s take a look. .

1. Require.js and AMD

Require.js: It is a very small JavaScript Module loading framework is one of the best implementers of AMD specifications.

AMD (Asynchronous Module Definition): The Asynchronous Module Definition specification (AMD) stipulates rules for defining modules so that modules and module dependencies can be loaded asynchronously. This is just in line with the browser's asynchronous loading of modules (synchronous loading of modules by the browser will cause problems such as performance, usability, debugging, and cross-domain access).

// AMD规范// 第一个参数，id，是个字符串。它指的是定义中模块的名字，这个参数是可选的。如果没有提供该参数，模块的名字应该默认为模块加载器请求的指定脚本的名字。如果提供了该参数，模块名必须是“顶级”的和绝对的（不允许相对名字）。// 第二个参数，dependencies，是个定义中模块所依赖模块的数组。依赖模块必须根据模块的工厂方法优先级执行，并且执行的结果应该按照依赖数组中的位置顺序以参数的形式传入（定义中模块的）工厂方法中。// 第三个参数，factory，为模块初始化要执行的函数或对象。如果为函数，它应该只被执行一次。如果是对象，此对象应该为模块的输出值。define(id?, dependencies?, factory);

2. Require.js uses

1, Directory structure

In the example, a plug-in for converting Chinese pinyin is used (GitHub address: https://github.com/sxei/pinyinjs/). This plug-in is very easy to use. However, due to the polyphonic characters in Chinese, unconventional pinyin often appears, such as (Jia Baoyu=> "gu bao yu")

  ├─scripts
     │─plus
        ├─pinyin
        │ ├─dist
        │ │  ├─pinyin_dict_firstletter.js
        │ │  ├─pinyin_dict_notone.js
        │ │  ├─pinyin_dict_polyphone.js
        │ │  └─pinyin_dict_withtone.js
        │ └─pinyinUtil.js
        ├─jquery.js
        ├─plusMain.js
        ├─require.js
        └─test.js

2. Introduce r equire.js

<script src="/scripts/plus/require.js"></script>

3. Mounting module

##　[1 ] Local loading

//test.jsdefine(function () {    return {
        add: function (a, b) {
            alert("传参没用上，哈哈");
        }
    }
});//页面代码$(function () {
    require(["/scripts/plus/test.js"], function (h) {
        h.add(1, 2);
    );
})

　[2] Global loading

//plusMain.jsrequire.config({
    paths: {        jquery: "jquery",
    }
});//页面引用<script src="/scripts/plus/require.js" data-main="/scripts/plus/plusMain" defer async="true></script>

When loading in this way, it will default to "

/scripts /plus" is the root directory, and the parameter baseUrl can reset the root directory.

//效果相同require.config({
    baseUrl: "/scripts/plus",
    paths: {        jquery: "jquery"
    }
});

You can also reference remote files, or you can reference local files at the same time. When the remote file fails to load, the local file will be loaded.

require.config({
    paths: {        jquery: ["http://libs.baidu.com/jquery/2.0.3/jquery", "jquery"],
    }
});

Modules loaded through

require generally need to comply with AMD specifications, that is, use define to declare the module, but sometimes non-AMD standard js needs to be loaded. At this time You need to use another function: shim.

　

shimIt is also difficult to understand. Shim is directly translated as "pad". In fact, it also has this meaning. At present, I mainly use it in two places:

One is to configure module dependencies: for example, the pinyin plug-in pinyinUtil.js needs to rely on a dictionary to be converted normally.

 1 require.config({ 2     paths: { 3         jquery: "jquery", 4         pinyin_dict_firstletter: "pinyin/dict/pinyin_dict_firstletter", 5         pinyin_dict_withtone: "pinyin/dict/pinyin_dict_withtone", 6         pinyin: "pinyin/pinyinUtil" 7     }, 8     shim: { 9         pinyin: {10             deps: ["pinyin_dict_firstletter", "pinyin_dict_withtone"],// 依赖模块集合11         }12     }13 });14 15 //可以简写成16 shim: {17     pinyin: ["pinyin_dict_firstletter", "pinyin_dict_withtone"]18 }

You can also rely on css files

require.config({
    paths: {
        select2: "select2/select2.min"
    },
    shim: {
        select2: ["/scripts/plus/select2/select2.min.css"]
    },
});

The other is to load the non-AMD module output and "pad" the non-standard AMD module into a usable module.

// test.js(function () {    var NGY = {
        Hi: function() {
            alert("跨越过去之后");
        }
    }
    window.NGY = NGY;
})();//配置require.config({
    paths: {
        ngy: "test"
    },
    shim: {
        ngy: { exports: "NGY" }
    },
});//使用，不需要声明变量就可以直接使用require(["ngy"], function () {
    NGY.Hi();
});

4. Use require

require(["jquery", "pinyin"], function ($, pinyin) {
    $("span").html("谁最可爱?");    var dl = pinyin.getPinyin('当然是我');
});

I believe you have mastered it after reading the case in this article For more exciting methods, please pay attention to other related articles on the php Chinese website!

Recommended reading:

What class definition components are there in React

navigator.clipboard How to create a native clipboard in the browser

The above is the detailed content of Modular development of require.js. For more information, please follow other related articles on the PHP Chinese website!