模块化

前端模块化

模块化： 是具有特定功能的一个对象（ 广义理解 ）

模块定义的流程：

    1.定义模块（对象）

    2.导出模块 

    3.引用模块

好处：
1,.可以存储多个独立的功能块
复用性高
2.种类
1.AMD（ require.js）
2.CMD ( sea.js )
3.Common.js
3.AMD定义一个模块

// AMD
/*
	目录
		admDir
			a.js
			index.js
*/
// AMD定义  a.js
    define ({
        a: 1,
        b: 2,
        add: function(){}
    })
// AMD引用 index.js
	require([./a.js],function( moduleA ){
        //moduleA指的就是定义来的对象
	})

4.CMD定义模块

//CMD
/*
	目录结构
		b.js
		index.js
*/

// 模块定义  b.js
	define(function(require, exports, module) {

    	// 模块代码

    });
//模块引用 index.js
	require('./b.js',function( moduleB ){
        //moduleB就是b模块中导出的内容
	})

5.Common.js

Node.js使用了Common.js的规范
a:common.js是属于node的
b:node属于common.js

//common.js
/*
	目录结构：
		name.js
		index.js
*/
//模块的定义 name.js
	const nameObj = {
        name: 'Gabriel Yan '
	}
//模块的导出  name.js
	module.exports = nameObj
//模块的引用
	const nameObj = require('./name.js')

Node.js中Common.js规范的使用有三种类型：

1. 内置模块（ 内置模块指的是挂载在Node.js全局对象身上的api ）

2. 自定义模块
   1.模块的定义

   		//举例
   		const student = {
   		    id: 1,
   		    name: 'Gabriel Yan'
   		}
   		const fn = function(){}
   

   2.模块的导出

   		// 第一种导出
   		module.exports = student // 安全性不高  默认导出一个
   		//第二种导出
   		module.exports = { //批量导出，按需引用
   		    student,fn
   		}
   

   3.模块的引用

   	    // 这种引用对应第一种导出
   	    const student = require('./xxx.js')
   	    // 这种引用对应第二种导出
   	    const { student , fn } = require( './xxx.js ' )
   

   注意：
   在自定义模块引用时，require一定要写好路径

3. 第三方模块

   1. 别人已经封装好的模块
   2. 这个模块具备一些特定的功能
   3. 这些模块存放在 www.npmjs.com 这个网站中
      这些模块的文档也记录在内

   格式： var/let/const 变量名 = require( 模块名称 )

   总结：
   第一步，使用npm/cnpm 安装
   第二部，在文件中引入
   第三部，在www.npmjs.com这个网站中找到这个模块的文档，根据文档来使用

自定义模块的上传（ http://www.npmjs.com ）

1. 创建package.json文件```

   $ npm init -y
   

2. 在http://www.npmjs.com 这个网站注册一个账号
   注意：第一次登陆会发送一个邮件给你的邮箱（ 这个发送是手动的 ），然后大家登陆邮箱激活

3. 检查你的电脑的源是不是npm源

    $ nrm ls
   

   如果是，就不会理会

   如果不是，那么切换到npm源

4. 命令行登录npmjs仓库

      $ npm adduser

5. 创建模块并导出模块
6. 发布包

      $ npm publish

犯错点：

邮箱没有激活 （ 最多的 ）
npm源没有切换
整个电脑的npm就不能使用
-D === –save-dev
Node.js跨域

跨域；

前端跨域：

1. jsonp
2. 反向代理（ 创建一个虚拟后端服务器，让这个后端服务器帮助我们请求数据）

后端跨域

1. node php java
2. 设置请求头
3. 使用第三方的中间件（ cors ） 中间件： 就是具有一定功能的一个函数

ES6 模块与 CommonJS 模块的差异

CommonJS 模块输出的是一个值的拷贝，ES6 模块输出的是值的引用。
CommonJS 模块输出的是值的拷贝，也就是说，一旦输出一个值，模块内部的变化就影响不到这个值。
ES6 模块的运行机制与 CommonJS 不一样。JS 引擎对脚本静态分析的时候，遇到模块加载命令import，就会生成一个只读引用。等到脚本真正执行时，再根据这个只读引用，到被加载的那个模块里面去取值。换句话说，ES6 的import有点像 Unix 系统的“符号连接”，原始值变了，import加载的值也会跟着变。因此，ES6 模块是动态引用，并且不会缓存值，模块里面的变量绑定其所在的模块。
CommonJS 模块是运行时加载，ES6 模块是编译时输出接口。
运行时加载: CommonJS 模块就是对象；即在输入时是先加载整个模块，生成一个对象，然后再从这个对象上面读取方法，这种加载称为“运行时加载”。
编译时加载: ES6 模块不是对象，而是通过 export 命令显式指定输出的代码，import时采用静态命令的形式。即在import时可以指定加载某个输出值，而不是加载整个模块，这种加载称为“编译时加载”。
CommonJS 加载的是一个对象（即module.exports属性），该对象只有在脚本运行完才会生成。而 ES6 模块不是对象，它的对外接口只是一种静态定义，在代码静态解析阶段就会生成。

1.amd

AMD规范采用异步方式加载模块，模块的加载不影响它后面语句的运行。所有依赖这个模块的语句，都定义在一个回调函数中，等到加载完成之后，这个回调函数才会运行。这里介绍用require.js实现AMD规范的模块化：用require.config()指定引用路径等，用define()定义模块，用require()加载模块。

首先我们需要引入require.js文件和一个入口文件main.js。main.js中配置require.config()并规定项目中用到的基础模块。

/** 网页中引入require.js及main.js **/


/** main.js 入口文件/主模块 **/
// 首先用config()指定各模块路径和引用名
require.config({
  baseUrl: "js/lib",
  paths: {
    "jquery": "jquery.min",  //实际路径为js/lib/jquery.min.js
    "underscore": "underscore.min",
  }
});
// 执行基本操作
require(["jquery","underscore"],function($,_){
  // some code here
});

引用模块的时候，我们将模块名放在[]中作为reqiure()的第一参数；如果我们定义的模块本身也依赖其他模块,那就需要将它们放在[]中作为define()的第一参数。

// 定义math.js模块
define(function () {
    var basicNum = 0;
    var add = function (x, y) {
        return x + y;
    };
    return {
        add: add,
        basicNum :basicNum
    };
});
// 定义一个依赖underscore.js的模块
define(['underscore'],function(_){
  var classify = function(list){
    _.countBy(list,function(num){
      return num > 30 ? 'old' : 'young';
    })
  };
  return {
    classify :classify
  };
})

// 引用模块，将模块放在[]内
require(['jquery', 'math'],function($, math){
  var sum = math.add(10,20);
  $("#sum").html(sum);
})

2. cmd

require.js在申明依赖的模块时会在第一之间加载并执行模块内的代码：

define(["a", "b", "c", "d", "e", "f"], function(a, b, c, d, e, f) { 
    // 等于在最前面声明并初始化了要用到的所有模块
    if (false) {
      // 即便没用到某个模块 b，但 b 还是提前执行了
      b.foo()
    } 
});

CMD是另一种js模块化方案，它与AMD很类似，不同点在于：AMD 推崇依赖前置、提前执行，CMD推崇依赖就近、延迟执行。此规范其实是在sea.js推广过程中产生的。

/** AMD写法 **/
define(["a", "b", "c", "d", "e", "f"], function(a, b, c, d, e, f) { 
     // 等于在最前面声明并初始化了要用到的所有模块
    a.doSomething();
    if (false) {
        // 即便没用到某个模块 b，但 b 还是提前执行了
        b.doSomething()
    } 
});

/** CMD写法 **/
define(function(require, exports, module) {
    var a = require('./a'); //在需要时申明
    a.doSomething();
    if (false) {
        var b = require('./b');
        b.doSomething();
    }
});

/** sea.js **/
// 定义模块 math.js
define(function(require, exports, module) {
    var $ = require('jquery.js');
    var add = function(a,b){
        return a+b;
    }
    exports.add = add;
});
// 加载模块
seajs.use(['math.js'], function(math){
    var sum = math.add(1+2);
});

3.ES6 Module

ES6 在语言标准的层面上，实现了模块功能，而且实现得相当简单，旨在成为浏览器和服务器通用的模块解决方案。其模块功能主要由两个命令构成：export和import。export命令用于规定模块的对外接口，import命令用于输入其他模块提供的功能。

/** 定义模块 math.js **/
var basicNum = 0;
var add = function (a, b) {
    return a + b;
};
export { basicNum, add };

/** 引用模块 **/
import { basicNum, add } from './math';
function test(ele) {
    ele.textContent = add(99 + basicNum);
}

如上例所示，使用import命令的时候，用户需要知道所要加载的变量名或函数名。其实ES6还提供了export default命令，为模块指定默认输出，对应的import语句不需要使用大括号。这也更趋近于ADM的引用写法。

/** export default **/
//定义输出
export default { basicNum, add };
//引入
import math from './math';
function test(ele) {
    ele.textContent = math.add(99 + math.basicNum);
}

ES6的模块不是对象，import命令会被 JavaScript 引擎静态分析，在编译时就引入模块代码，而不是在代码运行时加载，所以无法实现条件加载。也正因为这个，使得静态分析成为可能。