模块化

为什么要使用模块化?

  • 解决命名冲突
  • 依赖管理
  • 模块的版本管理。通过别名等配置,配合构建工具,可以比较轻松地实现模块的版本管理。
  • 提高代码可维护性和可读性
  • 前端性能优化
  • 可以很方便实现模块的跨服务器和浏览器共享

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

CommonJs

CommonJS是服务器端模块的规范,Node.js采用了这个规范并首先采用了js模块化的概念。
根据CommonJS规范,一个单独的文件就是一个模块。加载模块使用require方法,该方法读取一个文件并执行,最后返回文件内部的exports对象。

//add.js
exports.add = function(){...};

//calculate.js
var cc = require('add');
exports.add = function(n){
   return cc.add(val,n);
};

然而CommonJS规范并不适用于浏览器端,由于浏览器端的瓶颈在于带宽/网络,
如果客户端同步加载一个个文件,然后执行,那么就会出现假死情况
因此诞生了AMD,CMD,异步模块加载机制

CMD(Common Module Definition)

CMD是SeaJS 在推广过程中对模块定义的规范化产出
与AMD的不同在于, AMD推崇依赖前置会在一开始加载好所有需要的模块,而CMD则推崇依赖就近,当需要时才加载

//math.js
define(function(require, exports, module) {
  exports.add = function() {
    var sum = 0, i = 0, args = arguments, l = args.length;
    while (i < l) {
      sum += args[i++];
    }
    return sum;
  };
});

//increment.js
define(function(require, exports, module) {
  var add = require('math').add;  //需要用到math时加载模块
  exports.increment = function(val) {
    return add(val, 1);
  };
});
AMD (Asynchronous Module Definition, 异步模块定义)

AMD属于依赖前置,把项目中需要用到的依赖提前声明,等获取之后执行callback

//创建文件check_amd.js, 定义模块
define(['check'], function(){
    var flag = true;
    function check(){
        return flag;
    }
    return {
        check: check
    };
});

//在需要用到的页面加载模块
require(['check_amd'], function (check){
    if(check.check()){
        console.log("哈哈哈");
    }
});

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

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

预览链接
代码地址

你可能感兴趣的:(模块化)