您的位置:首页 > 产品设计 > UI/UE

requirejs 小结

2016-03-24 09:23 302 查看
1,“生搬硬套”-----js依赖的写法,依赖关系如这里的嵌套关系:

  

/**
* 模块化加载,注意各个js文件的依赖关系(嵌套)
*/

require(["jquery"], function ($) {
console.log($)
require(["bootStrap"], function () {
});
require(["common"], function () {
require(["echarts"],function(){
require(["zb_charts_func","common_src"],function(){
init_page_charts(echarts);
init_common_charts(echarts);
require(["changeCharts"],function(ut){
});
});
});
require(["tagcanvas"], function () {
require(["app", "index"], function () {
$(function () {
App.getName();
Index.initPage();
});
});
});
});
});


2,如果在一个项目规划的时候就计划使用requirejs,那么建议你使用AMD规范的写法,然后使用模块的对象回调,如:

/**
*index.js
**/
define(function(){
var name="张三";
var getName=function(){
return name;
}
return{
getName:getName
}
});
/**
*app.js
**/
define(function(){
var initPage=function(){
console.log("page init success!")
}
return{
initPage:initPage
}
});
/**
*主文件main.js
**/
require(["app", "index"], function (app,index) {
app.getName();
index.initPage();

});


这里将app.js和index.js模块输出为对象app和index两个回调参数,可以直接使用,

需要注意的是:一些主流的(如jquery)是直接支持AMD规范的,那么不支持规范的怎么办呢?这里requirejs提供了解决的方案,如下:

require.config({
    shim: {
      'jScroll':{
deps: [ 'jquery'],
        exports: 'jScroll'
      }
    }
  });


这里的deps表示jScroll所依赖的库,exports表示对外开发的对象名称
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: