1,“生搬硬套”-----js依赖的写法,依赖关系如这里的嵌套关系:
1 /** 2 * 模块化加载,注意各个js文件的依赖关系(嵌套) 3 */ 4 5 require(["jquery"], function ($) { 6 console.log($) 7 require(["bootStrap"], function () { 8 }); 9 require(["common"], function () { 10 require(["echarts"],function(){ 11 require(["zb_charts_func","common_src"],function(){ 12 init_page_charts(echarts); 13 init_common_charts(echarts); 14 require(["changeCharts"],function(ut){ 15 }); 16 }); 17 }); 18 require(["tagcanvas"], function () { 19 require(["app", "index"], function () { 20 $(function () { 21 App.getName(); 22 Index.initPage(); 23 }); 24 }); 25 }); 26 }); 27 });
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表示对外开发的对象名称