RequireJS modular development

The content introduced in this article is RequireJS modular development. Now I share it with everyone. Friends in need can refer to it

There are many ways to modularize development, such as AMD, CMD,

Use require for modularization, just import a js.

The first step to use require.js is to go to the official website to download the latest version.

After downloading, it is assumed that it is placed under the js subdirectory and it can be loaded.

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

Some people may think that loading this file may also cause the web page to lose response. There are two solutions. One is to load it at the bottom of the web page, and the other is to write it as follows:

　<script src="js/require.js" defer async="true" ></script>

The async attribute indicates that this file needs to be loaded asynchronously to prevent the web page from losing response. IE does not support this attribute and only supports defer, so defer is also written.

After loading require.js, the next step is to load our own code. Assume that our own code file is main.js and is also placed under the js directory. Then, just write it as follows:

　<script src="js/require.js" data-main="js/main"></script>

The data-main attribute is used to specify the main module of the web page program. In the above example, it is main.js under the js directory. This file will be loaded by require.js first. Since the default file extension of require.js is js, main.js can be abbreviated to main.

Modularization:

define(["aa"],function(){//["aa"] is the js you want to rely on. If there are multiple, separate them with commas. If not, don’t write it.

 function fn(){
        //你要写的js代码
    }    return {
        fn:fn;//必须要有返回，用来在main中调用
    }
})

main.js

require.config({
 paths:{//路径起的名字 "jquery":"jquery-1.8.3.min", "cookie":"jquery.cookie"

 }
})require(['jquery','cookie','details'], function ($,cookie,Backbone){
    //数组中的是模块，模块都是一部加载的，function为每个模块的回调函数 cookie.fn();
 });

If there is a downloaded plug-in in the array, modularize the plug-in and add define(function(){})#.

##There are many ways of modular development, such as AMD, CMD,

Use require for modularization, just import a js,

The first way to use require.js The first step is to download the latest version from the official website.

After downloading, if you put it in the js subdirectory, you can load it.

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

Some people may think of loading this file. , may also cause the web page to lose response. There are two solutions. One is to load it at the bottom of the web page, and the other is to write it as follows:

　<script src="js/require.js" defer async="true" ></script>

The async attribute indicates that this file needs to be loaded asynchronously to avoid the loss of the web page. Response. IE does not support this attribute, only defer, so write defer as well.

After loading require.js, the next step is to load our own code file. .js, also placed under the js directory. Then, just write it as follows:

　<script src="js/require.js" data-main="js/main"></script>

The data-main attribute is used to specify the main module of the web page program. In the above example, it is the js directory. Main.js below, this file will be loaded first by require.js. Since the default file suffix of require.js is js, main.js can be abbreviated as main:

define(["aa"],function(){//["aa"] is the js you want to rely on. If there are more than one, separate them with commas. If there are no more than one, don't write it.

 function fn(){
        //你要写的js代码
    }    return {
        fn:fn;//必须要有返回，用来在main中调用
    }
})

main.js

require.config({
 paths:{//路径起的名字 "jquery":"jquery-1.8.3.min", "cookie":"jquery.cookie"

 }
})require(['jquery','cookie','details'], function ($,cookie,Backbone){
    //数组中的是模块，模块都是一部加载的，function为每个模块的回调函数 cookie.fn();
 });

If there is a downloaded plug-in in the array, modularize the plug-in and add define(function(){})

Related recommendations:

JS Modularization-RequireJS

requireJS implements a simple module loader instance sharing

RequireJs source code analysis is launched How script loading works

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