requireJS

模块化开发之requireJS规范

require官网

require中文网

什么情况用require.js?

当一个页面中过多的<script src=""></script>,js文件加载是同步的,加载的时候,浏览器会停止网页渲染,加载文件越多,网页失去响应的时间就会越长,而且如果各个模块(js)之间存在相互引用的依赖关系,引入得顺序不对就会报错,可以考虑用require.js了。

require.js的作用主要解决两个问题:

  • 实现js文件的异步加载,避免网页失去响应;
  • 管理模块之间的依赖性,便于代码的编写和维护。

使用方法

第一步:引入require.js

    <script src ="require.js" data-main ="main"></script>

其中data-main属性的作用是,指定网页程序的主模块,main.js文件(引入时可省略后缀)。main.js就是我们要写的js。名字自己命名的。

第二步:配置require.config,别担心,非常简单。

配置require.config就是写各模块的依赖关系而已。看实例:

    //config.js
    require.config({
    'paths': {
        'jq': '../lib/jquery-1.10.1.min',
        'idx': 'index'
    },
    'shim': {//设置依赖关系,idx就依赖于common
        'idx': ['common'],
        'common': ['jq']
    }
});

  • paths 是配置路径的参数,键值对的形式,上述为例,jq是我取的别名,指向的路径是../lib/jquery-1.10.1.min,设置短路径(方便后期使用):如果是以require所在文件夹为基础路径,后面的js文件不需要后缀,(推荐这样写)。有些太短的就没必要取别名,像上面的index.js,一般放在js文件夹外的js文件才需要配置短路径。

  • shim配置依赖关系,也是键值对的形式存在,其中表示,index.js依赖common.js,common.js依赖于jq

  • 总结:把需要用到的模块,先引入,再声明依赖关系就搞定了,这样传说中的config配置就做好了,接下来就是去用了。

第三步:指定网页程序的主模块,别担心,也很简单

我的主模块是main.js,名字自己命名的。

main.js示例

      //main.js-----
    requirejs(['common','moduleA','moduleB','moduleC'],function(){
        //这里的代码等common,moduleA,moduleB,moduleC模块都加载完成后执行
    });

上述代码解释:requirejs就是规范,['common','moduleA','moduleB','moduleC']使得这些模块就能异步加载,在这里是没有先后之分的。function回调可要可不要.
以上就为requireJS的一个实例。

模块化开发的优点

讲了这么多,requirejs所倡导的模块化开发,好处在哪里呢?

  • 避免命名冲突
    你有没有发现,整个项目当中,再也没有出现一个全局变量?即使两个框架名字冲突了也没关系
  • 更好的依赖处理
    你有没有发现,你再也没有考虑过加载顺序的问题?
  • 按需加载
    更好的代码组织方式,而且你肯定没有发现,所有的JS文件的加载过程,已经变成了异步
  • 面向对象编程
    最后,你还发现,用了requireJS,你的代码想不写成面相对象都难
    模块化规范与框架

1.commonJS:通用的模块规范(同步);
模块化框架:nodejs

2.AMD:异步模块定义规范(预加载);
模块化框架:requirejs

3.CMD:通用模块定义规范(延迟加载)。
模块化框架:seajs

官网:http://seajs.org

五分钟上手教程:http://seajs.org/docs/#quick-start

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值