require.js使用心得

来源:互联网 发布:数据恢复精灵吧 编辑:程序博客网 时间:2024/06/05 08:58

1.简单介绍一下require.js.

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

2.require其实没有想象的那么复杂,你只需在HTML页面加载<script data-main="js/aa" src="require.js"></script>即可,aa.js是我自己随意取的,在引用的时候不用加.js后缀。需要注意的是你的路径要写对。

其次就是在aa.js文件中格式如下:

require.config({ 
paths: {                               //引入文件
'jquery': '../vendor/jquery-1.11.0',      //jQuery文件
'nicescroll':'../vendor/jquery.nicescroll', //一个滚动条美化插件
'common':'../common'               //公用方法文件
},
shim : {                            //文件之间依赖关系
'common': {                    //common.js依赖jquery,就是只有当jQuery执行了,

deps: ['jquery']            才会去执行common.js
}
}
});


require(['jquery','common','nicescroll'], function($,common) {//这里引入上面的3个文件,带参数的要返回参数
$("#bb").niceScroll({                     //调用滚动条美化插件
cursorcolor:"#E62020",  
cursoropacitymax:1,  
touchbehavior:false,  
cursorwidth:"10px",  
cursorborder:"0",  
cursorborderradius:"5px"  
}); 
//alert(common.add(1,1));  调用common里面的一个方法
//common.bb();         调用common里面另外一个方法
});


接下来看看common.js文件

 define(function (){                    //require默认的一种定义方法,推荐这样写
    var add = function (x,y){            //创建的add方法
  x = parseInt($("#aa").html());
      return x+y;
    };
var bb = function(){               //创建bb方法
  alert($().jquery);
};
    return {                      //return两个方法
      add: add,
  bb:bb
    };
  });

接下来就是在aa.js中调用这两个公用方法就可以了。


总结:require的核心就是这些了,上面的例子足以摆平大部分项目。jQuery库引用,插件引用和common的引用。


1 0
原创粉丝点击