requirejs 小结

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表示对外开发的对象名称

转载于:https://www.cnblogs.com/Brose/p/requirejs_amd.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值