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

posted @ 2017-04-17 14:20  BuleDog  阅读(919)  评论(0编辑  收藏  举报