美文网首页
移动前端开发项目-5_requirejs模块化加载js

移动前端开发项目-5_requirejs模块化加载js

作者: 小豌豆书吧 | 来源:发表于2017-10-23 11:53 被阅读57次

    5.requirejs模块化加载js 14:55
    参考文章:http://www.haorooms.com/post/js_require_zz

    一、requirejs的好处:

    ①声明不同js文件之间的依赖;
    ②可以按需、并行、延时载入js库
    ③可以让我们的代码以模块化的方式组织
    ④初看起来并不复杂。
    ⑤代码的管理和性能优化,提高代码的速度和质量

    二、AMD和CMD的区别:

    AMD 规范在这里:https://github.com/amdjs/amdjs-api/wiki/AMD
    CMD 规范在这里:https://github.com/seajs/seajs/issues/242

    AMD 是 RequireJS 在推广过程中对模块定义的规范化产出。
    CMD 是 SeaJS 在推广过程中对模块定义的规范化产出。
    类似的还有 CommonJS Modules/2.0 规范,是 BravoJS 在推广过程中对模块定义的规范化产出。

    还有不少⋯⋯

    这些规范的目的都是为了 JavaScript 的模块化开发,特别是在浏览器端的。目前这些规范的实现都能达成浏览器端模块化开发的目的。
    ③区别:

    a - 对于依赖的模块,AMD 是提前执行,CMD 是延迟执行。不过 RequireJS 从 2.0 开始,也改成可以延迟执行(根据写法不同,处理方式不同)。CMD 推崇 as lazy as possible.

    b - CMD 推崇依赖就近,AMD 推崇依赖前置。看代码:

    // CMD
    define(function(require, exports, module) {
      var a = require('./a')
      a.doSomething()
      // 此处略去 100 行
      var b = require('./b') // 依赖可以就近书写
      b.doSomething()
      // ... 
    })
    
    // AMD 默认推荐的是
    define(['./a', './b'], function(a, b) { // 依赖必须一开始就写好
      a.doSomething()
      // 此处略去 100 行
      b.doSomething()
    ...
    }) 
    

    虽然 AMD 也支持 CMD 的写法,同时还支持将 require 作为依赖项传递,但 RequireJS 的作者默认是最喜欢上面的写法,也是官方文档里默认的模块定义写法。

    三、requirejs的配置和使用

    1. requirejs的用法
      2.RequireJs的使用和快速理解

    四、 requirejs代码压缩

    demo1:代码压缩演示
    cd demo1

    demo1>node tools/r.js -o tools/build.js

    压缩完成: www-built 文件夹创建

    requirejs介绍.png requirejs代码压缩2.png

    相关文章

      网友评论

          本文标题:移动前端开发项目-5_requirejs模块化加载js

          本文链接:https://www.haomeiwen.com/subject/ouoouxtx.html