requireJS的使用说明

时间 2020-07-10

原文原文链接

RequireJS的目标是鼓励代码的模块化，它使用了不一样于传统<script>标签的脚本加载步骤。能够用它来加速、优化代码，但其主要目的仍是为了代码的模块化javascript

requireJS 加载代码的时候，其相对路径为baseUrl,baseUrl一般被设置为data-main指定文件的目录html

em:java

<script src="js/libs/require.js"  defer async="true"  data-main="js/main.js"></script>

data-main:起始的jsjquery

src:依赖的require库js数组

举一个简单的例子：async

Index.html:ide

<!doctype html>
<html lang="en">
 <head>
     <meta charset="UTF-8">
     <script type="text/javascript"   data-main="js/main.js"  src="js/require.js"></script>
 </head>
 <body>
 
 </body>
</html>

mian.js模块化

require.config({
   baseUrl:"js/lib",//设置基本路径
   paths:{
           "user":'user',                      //-----   js/lib/user
           "jquery":"jquery-1.11.3"   //-----js/lib/jquery-1.11.3
   }
 
/*方式二：
   paths:{
           "user":'lib/user',
           "jquery":"lib/jquery-1.11.3"
      }
*/
 });
 require(["jquery","user"],function($,user){//依赖的模块
       $(function(){
           alert("juery加载完毕");
       });

对于每个分开的js: 采用AMD模式来编写模块，模块必须采用特定的define()函数来定义函数

User.js(此时user.js是没有依赖模块的)优化

define([],function(){
           function fun1(){
             alert("it works");
          }
         fun1();
 })

注：如果模块有依赖，第一个参数是一个数组，第二个参数是匿名函数

前面的依赖项将以参数的形式传递给函数，顺序与以前一致

Demo:

define([“../cart”,”../inventory”],function(cart,inventory){
      return {
           color:”blue”,
           addToCart:function(){
                 inventory.decrement(this);
                 cart.add(this);
           }
    }
});

模块也能够不返回对象，任何有效的返回都是能够的。

对于没有采用AMD规范编写。若是要加载它们的话，必须先定义它们的特征。

注：require.config()接受一个配置对象，这个对象除了有前面说过的paths属性以外，还有一个shim属性，专门用来配置不兼容的模块。具体来讲，每一个模块要定义

（1）exports值（输出的变量名），代表这个模块外部调用时的名称；

（2）deps数组，代表该模块的依赖性。

em:

require.config({
      baseUrl:"",
      paths:{
           "angular":"../ipi_view/eaf/common/lib/angualr"
      }
        shim：{
                'angular':{
                    exports:'angular',
                    deps:['angular']
　　　　  },
         ‘jquery-slide’:{
              deps: [‘jquery’]
         }，
　　　 'jquery.scroll': {
　　　　　　deps: ['jquery'],// 该模块的依赖性。
　　　　　　exports: 'jQuery.fn.scroll'//这个模块外部调用时的名称
　　   }
       }
});

require([‘jquery-slide’]，function（jQ）{

 ......../......

});//保证了先加载jquery,在加载其插件

进一步解释一下:

1）require.config的做用(主要用于解决有些第三法方非AMD库文件的问题)，若是你的文件都是AMD，那么你就能够彻底删除require.config这个东西了.

2）require.config的另外一个做用就是解决过分臃肿的文件路径问题（直接说咱们通常在require.config里面能够简化，将长的路径问题一次性解决）.

require.config({
　　　　paths:{
　　　　　　“mycheck“:'../ipi_view/common/mycheck'，//自定义的一个公共指令
　　　　}
}) 
require(['mycheck'],function(){..................})

例如：

在paths中配置的文件能够直接在require(['mycheck'],function(){......})中引用,这样你的项目中全部的js文件中都会引入mycheck，这样意味着你能够直接在页面上使用。

固然也能够

require([''../ipi_view/common/mycheck'，‘’],function(){..................})

参考：http://www.ruanyifeng.com/blog/2012/11/require_js.html