美文网首页
AMD_CMD_RequireJS

AMD_CMD_RequireJS

作者: peaceChierdo | 来源:发表于2017-09-27 22:51 被阅读0次

    为什么要使用模块化?
    随着网站功能逐渐丰富,网页中的js也变得越来越复杂和臃肿,原有通过script标签来导入一个个的js文件这种方式已经不能满足现在互联网开发模式,我们需要团队协作、模块复用、单元测试等等一系列复杂的需求。

    • 解决命名冲突
    • 依赖管理
    • 提高代码可读性
    • 代码解耦提高复用性

    CMD、AMD、CommonJS 规范分别指什么?有哪些应用

    • CommonJS
      模块必须通过 module.exports导出对外的变量或接口,通过require()来导入其他模块的输出到当前模块。
      服务器端的Node.js遵循CommonJS规范。CommonJS是同步加载模块,传统CommonJS模块在浏览器环境中无法正常加载。
        // moduleA.js  
        module.exports = function( value ){  
            return value * 2;  
        }  
    
    
        // moduleB.js  
        var multiplyBy2 = require('./moduleA');  
        var result = multiplyBy2(4);  
    
    • AMD
      require.js加载的模块采用AMD规范。
      适合在浏览器环境异步加载
      并行加载多个模块
    如果一个模块不依赖其他模块,那么可以直接定义在define()函数之中。
          // math.js
          define(function (){
            var add = function (x,y){
              return x+y;
            };
            return {
              add: add
            };
          });
    加载方法如下:
    
          // main.js
          require(['math'], function (math){
            alert(math.add(1,1));
          });
    
    
    如果这个模块还依赖其他模块,将其写在一个数组里
    当require()函数加载下面这个模块的时候,就会先加载myLib.js文件。
    define(['myLib'], function(myLib){
        function foo(){
          myLib.doSomething();
        }
        return {
          foo : foo
        };
      });
    
    
    

    AMD 是 RequireJS 在推广过程中对模块定义的规范化产出。
    推崇依赖前置。

    • CMD规范

    CMD 是 SeaJS 在推广过程中对模块定义的规范化产出。
    推崇依赖就近,只有在用到某个模块的时候再去require

    define(function(require, exports, module) {
        var a = require('./a')
        a.doSomething()
        ...
        var b = require('./b')
        b.doSomething()
        ...
    })
    
    

    参考
    使用 requirejs 完善入门任务15,包括如下功能:

    1. 首屏大图为全屏轮播
    2. 有回到顶部功能
    3. 图片区使用瀑布流布局(图片高度不一),下部有加载更多按钮,点击加载更多会加载更多数据(数据在后端 mock)
      4.(可选). 使用 r.js 打包应用

    页面 轮播加载比较慢...
    代码

    相关文章

      网友评论

          本文标题:AMD_CMD_RequireJS

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