美文网首页
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

    1. 为什么要使用模块化? 背景:如今CPU、浏览器性能得到了极大的提升,很多页面逻辑迁移到了客户端(表单验证等)...

  • AMD_CMD_RequireJS

    题目1: 为什么要使用模块化? 模块的由来:嵌入网页的JS代码越来越庞大,越来越像桌面程序,需要一个团队去分工协作...

  • AMD_CMD_RequireJS

    题目1: 为什么要使用模块化? 在JavaScript发展初期就是为了实现简单的页面交互逻辑,寥寥数语即可;如今C...

  • AMD_CMD_RequireJS

    为什么要使用模块化? 解决命名冲突 依赖管理 提高代码可读性 代码解耦,提高复用性 CMD、AMD、CommonJ...

  • AMD_CMD_RequireJS

    1、为什么要使用模块化? a)解决命名冲突b)增强代码的阅读以及维护性c)便于依赖管理d)提高代码的复用率 2、C...

  • AMD_CMD_RequireJS

    题目1: 为什么要使用模块化? 解决命名冲突 便于依赖管理 提高代码的可读性 代码解耦,提高代码复用性 题目2: ...

  • AMD_CMD_RequireJS

    1、为什么要使用模块化? 解决命名冲突,当代码量很大的时候很容易有命名冲突。 实现依赖管理,代码量很大时候,代码之...

  • AMD_CMD_RequireJS

    题目1: 为什么要使用模块化? web应用越来越复杂,代码复杂度增加 代码需要复用和解耦合 性能优化,需要更少的h...

  • AMD_CMD_RequireJS

    1: 为什么要使用模块化? 1.解决命名冲突2.可进行依赖管理3.增强代码的可读性4.代码解耦,提高代码的复用率 ...

  • AMD_CMD_RequireJS

    题目1:为什么要使用模块化? 最主要的目的:解决命名冲突依赖管理其他价值提高代码可读性代码解耦,提高复用性 在Ja...

网友评论

      本文标题:AMD_CMD_RequireJS

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