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(){})#.

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

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

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

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

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

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

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!