模块化

- 模块化 -AMD-CMD规范
- requireJS实践
- r.js打包工具使用

1、为什么要使用模块化？####

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

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

• AMD：

• AMD即 Asynchronous Module Definition，中文名为异步模块定义。它是一个在浏览器端模块化开发的规范

• 使用AMD规范进行开发需要使用RequireJS

• requireJS主要解决两个问题:

• js文件之间的依赖关系：被依赖的文件需要早于依赖它的文件加载到浏览器

• js加载的时候浏览器会停止页面渲染，加载文件越多，页面失去响应时间越长

  语法：define(id, dependences, factory);

   // 定义模块 myModule.js
   define(['dependency'], function(){
    var name = 'Byron';
    function printName(){
         console.log(name);
    }
  
   return {
        printName: printName
    };
   });
  
   // 加载模块
   require(['myModule'], function (my){
        my.printName();
   });
  

• CommonJS:

• 用于服务器端模块化。

• 定义模块：一个单独的文件就是一个模块，每一个模块都是一个单独的作用域（在模块内部定义的变量，无法被其他模块读取，除非定义为global对象的属性）

• 模块输出：模块只有一个出口 module.exports 对象，需要将模块希望输出的内容放在该对象中

• 加载模块：加载模块使用require方法，该方法读取一个文件并执行，返回文件内部的 module.exports 对象

语法：

require(dependences) // 加载依赖模块
exports.factory = function(){ // ...};  // 使用”exports”对象来做为输出的唯一表示。

//模块定义 myModel.js

var name = 'Byron';
function printName(){
    console.log(name);
}

function printFullName(firstName){
    console.log(firstName + name);
}

module.exports = {
    printName: printName,
    printFullName: printFullName
}


//加载模块
var nameModule = require('./myModel.js');
nameModule.printName();

• CMD：

• CMD即 Common Module Definition，中文为通用模块定义，它是一个在浏览器端模块化开发的规范。

• 和AMD不同的是，它并不是异步加载，而是松散加载，只有当需要加载模块的时候，再用require方法引用模块。

• 使用CMD规范进行开发需要使用SeaJS

• Sea.js推荐一个模块一个文件

  语法：define(factory);
  
  // 定义模块  myModule.js
  

  define(function(require, exports, module) {
  var $ = require('jquery.js')
  $('div').addClass('active');
  });

  // 加载模块
  seajs.use(['myModule.js'], function(my){
  doSomething
  });

AMD和CMD

• 模块定义时对依赖的处理不同：
  • AMD推崇依赖前置，在定义模块的时候就要声明其依赖的模块
  • CMD推崇就近依赖，只有在用到某个模块的时候再去require
• 对依赖模块的执行时机处理不同（同第一点，换种表述方式）：
  • AMD依赖前置，js可以方便知道依赖模块是谁，立即加载
  • CMD就近依赖，需要使用把模块变为字符串解析一遍才知道依赖了那些模块
• AMD模块的加载就是异步的
• SeaJS和RequireJS可以完成相同的功能

2、使用 requirejs 完善入门任务15，包括如下功能：####

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

预览
代码

参考资料：
Javascript模块化编程(一)：模块的写法
Javascript模块化编程(二)：AMD规范
详解JavaScript模块化开发
requirejs中文网