RequireJS (1)

1. About requirejs is a framework for Asynchronously loading js modules. 2. how to use it first go TO the official website TO download requirejs. then introduce 1 <script type = "text/javascript" src = ".. /requirejs. js "data-main = ".. /main "> </script> noticed the data-main attribute. A simple understanding is an entry function used to start the script loading process. Tip: to make this file load without losing its response, you can choose to load it at the bottom of the web page, another way is to write the following 1 <script type = "text/javascript" src = ".. /requirejs. js "data-main = ".. /main "async =" true "defer> </script> The async attribute indicates that it needs to be asynchronously loaded to avoid response loss, in addition, defer is designed to be compatible with IE browsers (IE does not support the async attribute), so both are completely written. 3. a simple example assumes js/. the code in js is as follows: 1 var info = "hello world" // you can define a variable in mian. load it with requirejs, as shown in the following 1 require ([".. /. js "], function (a) {2 alert (info); // pop up hello world3}) and then check the browser's developer tools, we can see that the request has been loaded. We can see that require accepts three parameters (two in the example), the first parameter is the id of the identifier (we recommend that you ignore it), and the second parameter is an array of the struct type, is the js module to be loaded. The third parameter is the callback function. After the js module is injected and loaded, this function will be called. The function parameters, the values of the string array in the second parameter are sequentially matched. Tip: different values are allowed in the string array in the second parameter. js "(for example, js/. js) or starts with "/", or is directly a complete url (including the URL protocol, such as "http:", "https :"), therefore, requirejs considers that the user directly loads a js module. Otherwise, when the string is similar to "my/module", it will think that this is a module, in addition, the user-configured baseUrl and paths will be used to load the JavaScript file where the corresponding module is located (which will be introduced later). 4. Now we can change the configuration method. We use require. config to customize the module loading behavior. The parameter is an object 1 require. config ({2 paths: {3 jquery: "jquery-1.10.2.min", 4 a: "a" 5} 6}); 7 8 require (["jquery", "a"], function ($, a) {9 alert ($ (). jquery); // 1.10.210 alert (info); // hello world11}); the path attribute in the parameter object is used to set the path. Because requirejs loads the code relative to the baseurl attribute (not given in the example. Here, baseUrl is an attribute in the require. config parameter (the parameter is an object. If config and data-main are not explicitly specified, the default baseUrl is the directory of the HTML page containing RequireJS. In this case, RequireJS assumes that all the dependent resources are js scripts by default, so you do not need to add ". js "suffix (that is, the above jquery-1.10.2.min does not need to be written into the jquery-1.10.2.min.js will report an Error (Uncaught error: Script Error for: jquery ). 5. Use define to customize the Module 1 // B. js 2 3 define (["jquery"], function ($) {4 return {5 dom: function () {6 $ ("# div1" ).html ("123 "); 7 alert ("shabi") 8}, 9 abc: "8888888" 10}; 11}) 12 13 // main. js14 15 require. config ({16 paths: {17 jquery: "jquery-1.10.2.min", 18 a: "a", 19 B: "B" 20} 21 }); 22 23 require (["jquery", "a", "B"], function ($, a, B) {24 alert ($ (). jquery); // 1.10.2 25 alert (info); // hello world26 B. dom (); // rewrite the html text of the page The shiba27 alert (B. abc); // 888888828 console. log (B. abc); // console output 888888829}); the Page code is: <div id = "div1"> aaa </div>. The preceding code shows how to customize a module that contains a value pair, function syntax (function syntax definition with dependency) can be defined as needed. In addition, we can also return other things we have done before. 6. other configuration attributes baseUrl: used to set the base Directory (for example, you can set the baseUrl :".. /", the Code remains the same) config (see the following example 13 14 // main. js15 16 require. config ({17 baseUrl :".. /", 18 paths: {19 a:" a ", 20}, 21 config: {22" a ": {23 message: "liucunjie" 24} 25} 26}); 27 28 require (["a"], function (a) {29. ms () // output liucunjie30} in the console. in js configuration, specify the module in config (the above example is. js module) and then in. js file code writing 1 define (["module"], function (module) {2 return {3 ms: function () {4 var Mess = module. config (). message; 5 console. log (mess); 6} 7} 8}) introduce the module and use module. config () to obtain it. VII. Loading non-standard (AMD) Modules theoretically, the modules loaded by requirejs must comply with AMD specifications, or are defined using the define () function, many mainstream databases comply with AMD specifications, but many databases do not. In this case, you need to set the shim attribute in the configuration, such as the backbone library. 1 require is not written using AMD specifications. config ({2 shim: {3 'underscore ': {4 exports:' _ '5}, 6 'backone': {7 deps: ['underscore ', 'jquery '], 8 exports: 'background' 9} 10} 11}); where the deps array indicates its dependency, exports (output variable name) the name used for the external call of this module.