requireJS的使用说明

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

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

em:

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

data-main:起始的js

src:依赖的require库js

举一个简单的例子：

Index.html:

<!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

巴特西

requireJS的使用说明

最新文章

热门文章