requirejs的使用和快速理解

样例来自https://www.jianshu.com/p/b8a6824c8e07

requirejs有以下功能

  • 声明不同js文件之间的依赖
  • 可以按需、并行、延时载入js库
  • 可以让我们的代码以模块化的方式组织
  • 初看起来并不复杂。

创建以下目录

 

 

在HTML中，添加<script>标签：<script data-main="js/script/main" src="js/lib/require.js" type="text/javascript"></script>

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <title>Require Demo 1</title>
 5 </head>
 6 <body>
 7     <div>
 8         <h1>Require Demo 1 -- usage of Require()</h1>
 9         <button id="contentBtn">Click me</button>
10     <p id="messagebox"></p>
11     </div>
12     <script data-main="js/script/main" src="js/lib/require.js" type="text/javascript"></script> 
13 </body>
14 </html>

requirejs对外暴露的变量其实就三个,requirejs,require,define。这其中requirejs 只是require的一个别名，目的是如果页面中有require其它实现了，你还是能通过使用requirejs来使用requireJS API的(本文中没有相关冲突，所以还是使用require)。

我们可以看到在script标签中我们加载了require.js，其中有一个data-main，他是在require.js加载完成后通过回调的方法去加载data-main里的js

这是我们的main.js

 1 //  js/script/main.js
 2     require.config(
 3         {
 4             paths: {//一个模块ID和路径的映射，这样在后续的所有函数中就可以直接通过模块ID来引入依赖，而不用再多次引入依赖多次输入路径带来的麻烦。
 5                 jquery: '../lib/jquery-1.11.1',
 6                 chw_desc:'desc',
 7                 chw_alertdesc:'alertdesc',
 8                 chw_alert:'alert'
 9             },
10             // shim:{
11             //     'alert': {exports: 'f'}
12             // }
13         }
14     );
15     require(['jquery'],function ($) {
16              $(document).on('click','#contentBtn',function(){
17                 $('#messagebox').html('You have access Jquery by using require()');
18                 require(['desc'],function(chw){
19                     alert('desc: '+JSON.stringify(chw));
20                 });
21                 // require(['chw_alertdesc'],function(t){
22                 //      alert('alertdest: '+JSON.stringify(t));
23                 //  });
24                 // require(['alert'],function(chw){
25                 //     chw();
26                 // });
27              });
28     });

 

　　1.首先看最基础的decs.js（没有任何依赖）

　　　　他的require函数接受的第一个参数是所依赖模块的一个数组，即要想执行我的回调函数，你必须加载完desc.js这个文件，如果你有如本例子中设置了模块ID和路径的映射，那你在传入依赖的时候就可以使用模块ID来代替路径（我可以换成require(['chw_desc'],function(chw){})），如果没有配置模块ID你当然也可以通过路径来引进对应的模块。接着是传入回调函数，当引入的依赖加载完毕后，这个回调函数就会被触发。如果你传入的依赖有注入变量（函数）,然后在回调函数中需要用到，你就需要按照顺序在回调函数的参数中添加别名，在本例子中可以通过别名$来使用jQuery的相关API(你也可以换成其他的符号比如‘G’,'F'等等)。

　　　　看看desc.js代码，没有任何依赖，desc.js他定义了一个模块，define(name, deps, callback)第一个参数是定义模块名，第二个参数是传入定义模块所需要的依赖，第三个函数则是定义模块的主函数，主函数和require的回调函数一样，同样是在依赖加载完以后再调用执行。第一参数不是很必要，因为如果哪一天我将这个文件转移到其他目录下，那我就得在这这里再修改一次模块名。

define(function(){
    return{
        desc:'this js will be request only if it is needed',
    };
})

　　2.在看看alertdesc,js(依赖于desc.js)

　　

define(['desc'],function(){
    return{
        desc:'this js will be request only if it is needed',
    };
})

　　同样在require函数里面可以写成 require(['alertdesc'],function(t){})

　3. alert.js. (加载非规范的模块没使用define定义模块)

function f() {
    alert("hahah");
}

　　require.config()接受一个配置对象，这个对象除了有前面说过的paths属性之外，还有一个shim属性，专门用来配置不兼容的模块。具体来说，每个模块要定义（1）exports值（输出的变量名），表明这个模块外部调用时的名称；（2）deps数组，表明该模块的依赖性，他就是将某个依赖中的某个全局变量暴露给requirejs，当作这个模块本身的引用。

　　

  shim:{
                 'alert': {exports: 'f'}
             }

由于我这个模块没有依赖，所以没必要写deps，上面的代码表示的是在'alert'（在相对路径下的alert.js文件中），把f函数暴露出来成为全局可用，那当我们的代码依赖于 alert 模块的时候，就可以拿到这个 f 函数的引用了。注意的是require(['alert'],function(chw){}});不能换成require(['chw_alert'],function(chw){}});因为在你暴露变量的时候你是暴露给模块名为'alert'，所以对于其他的模块并不是全局可用，如果要换成chw_alert，那么shim中应该这样写shim:{'chw_alert':{exports:'f'}}

 

posted @ 2018-01-23 20:12  CCxiao5  阅读(281)  评论(0)  编辑  收藏  举报