Project Summary Two: The Requirejs of module management

Project development prophase, to exactly use Requirejs or sea.js to discuss, finally adopted Requirejs, but later encountered a problem-when Google Maps can not load, the entire page card dead status.

The role of Requirejs:

1. Prevents JS loading from blocking page rendering
2. Modular Loading JS

① first create a main.js, through paths configuration will make our module name more refined, paths also has an important function, is to configure multiple paths, if the remote CDN Library is not loaded successfully, you can load the local library:

Requirejs.config ({baseUrl:‘‘, paths: {"jquery": ". /webres/scripts/jquery.1.11.3.min ",                "jQueryUI": ". /webres/jqueryui/jqueryui-1.10.4 ",                "Bootstrap": ". /webres/bootstrap/js/bootstrap.min ",                "Bootstraptable": ". /webres/bootstrap-table/bootstrap-table.min "}, Shim: {drag: {deps: [' jquery ']}, Bootstrap: {deps: [' jquery ']}, bootstraptable: {deps: [' jquery ', ' Bootstrap ' ]                }                        }        });

② is best referenced in a public page:

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

BASEURL: Root Path

data-mainproperty, so that the specified JS after loading reuqire.js, the require.config configuration is added to the page, and then the page can be used directly require to load all the short module name

data-mainThere is also an important function, when the script tag specifies the Data-main attribute, require will default to Data-main specified JS as the root path, such as the above data-main="js/main" settings, after we use require([‘jquery‘]) (not configure jquery paths), Require will automatically load js/jquery.js this file instead of Jquery.js, which is equivalent to configuring the default Baseurl:js

Shim: Specifies the module name and its dependent array, above which our drag plugin relies on the jquery framework. In this way, you can use Requirejs to complete the loading of jquery and its plugins.

The ③define function defines a module

Define (function (Require, exports, module) {    var ajaxfun = require (' Ajaxfun ');       function MainFunc () {                 }    module.exports = MainFunc;});    

　

There is another way to do this:

Define (function (Require, exports, module) {function onload () {}function grouponchange () {}exports.onload = onload; Exports.grouponchange = Grouponchange;});

　　

The specific differences are described below:

Http://www.cnblogs.com/pigtail/archive/2013/01/14/2859555.html

　　

Project Summary Two: The Requirejs of module management