Module(二)

模块化把代码分成很多模块，但是最后要汇集在一个文件内，我们引用最终文件即可

模块的两个目的1.暴露出一个东西(函数，字符串，数字都可以)2.在模块中干一些事情

（一、）模块化的发展史

一. 全局函数模式

将不同的功能封装成不同的全局函数

二.命名空间模式(简单的对象封装)

把方法和属性封装在一个对象里，这样全局变量就变少了(只剩下一个对象名) 

我们可以通过obj.xxx，来修改属性值

三.立即执行函数(匿名函数)IIFE

!function(){
	let msg = 'module'
	function foo(){
	console.log(msg)
      }
}()

匿名函数就是一个模块(没有暴露任何东西)

let api;
!function(api){
	let msg = 'module'
	function foo(){
	console.log(msg)
	}
	api = foo
}(api)

现在模块把模块中的一个函数暴露出去

!function($){
	$('body').css('background','red')
}(jQuery)

现在没有暴露任何东西但是这个模块里修改了背景

四.闭包

 function createCounter() {
   let counter = 0
   const myFunction = function() {
     counter = counter + 1
     return counter
   }
   return myFunction
 }
 const increment = createCounter()
 const c1 = increment()

闭包本质上和IIFE是一样的，匿名函数靠参数暴露，闭包靠return暴露(两者共同点就是有一个局部变量我们无法访问到)

以前的模块化都需要依靠script标签引入非常不方便管理难以维护需要引入模块化规范

（二、）模块化的规范

规范大致分为四类commonJS，AMD，CMD，ES6，上一篇论文写了ES6的模块化

commonJS

1. 每个文件就是一个模块，有自己的作用域。在一个文件里面定义的变量、函数、类，都是私有的，对其他文件不可见。

2. 在服务器端模块加载是运行时同步加载的

3. 浏览器端模块需要提前打包编译的(browserify/webpack)因为浏览器不认识require(dist目录的由来)

4. 模块可以多次加载，但是只会在第一次加载时运行一次，然后运行结果就被缓存了，以后再加载，就直接读取缓存结果。要想让模块再次运行，必须清除缓存。

5. 模块加载的顺序，按照其在代码中出现的顺序。

commonJS的暴露语法

如果想在多个文件分享变量，必须定义为global对象的属性。下面代码的warning变量，可以被所有文件读取。当然，这样写法是不推荐的。

global.warning = true;

CommonJS规范规定，每个模块内部，module变量代表当前模块。这个变量是一个对象，它的exports属性（即module.exports）是对外的接口。加载某个模块，其实是加载该模块的module.exports属性

var x = 5;
var addX = function (value) {
  return value + x;
};
module.exports.x = x;
module.exports.addX = addX;

上面代码通过module.exports输出变量x和函数addX。

module.exports.x = x;
exports.x = x;

暴露的本质就是暴露export对象原来值是空对象

commonJS的加载语法

require方法用于加载模块。

var example = require('./example.js');

console.log(example.x); // 5
console.log(example.addX(1)); // 6

require(xxx)分为第三方模块，和自定义模块，第三方模块直接引用包名，自定义模块引用路径

Node内部提供一个Module构建函数。所有模块都是Module的实例。

function Module(id, parent) {
  this.id = id;
  this.exports = {};
  this.parent = parent;
  // ...

每个模块内部，都有一个module对象，代表当前模块。它有以下属性。

• module.id 模块的识别符，通常是带有绝对路径的模块文件名。
• module.filename 模块的文件名，带有绝对路径。
• module.loaded 返回一个布尔值，表示模块是否已经完成加载。
• module.parent 返回一个对象，表示调用该模块的模块。
• module.children 返回一个数组，表示该模块要用到的其他模块。
• module.exports module.exports属性表示当前模块对外输出的接口，其他文件加载该模块，实际上就是读取module.exports变量。

exports变量

为了方便，Node为每个模块提供一个exports变量，指向module.exports。这等同在每个模块头部，有一行这样的命令。

var exports = module.exports;

造成的结果是，在对外输出模块接口时，可以向exports对象添加方法。

exports.area = function (r) {
  return Math.PI * r * r;
};

exports.circumference = function (r) {
  return 2 * Math.PI * r;
};

注意，不能直接将exports变量指向一个值，因为这样等于切断了exports与module.exports的联系。

require命令

require命令的基本功能是，读入并执行一个JavaScript文件，然后返回该模块的exports对象。如果没有发现指定模块，会报错。

var invisible = function () {
  console.log("invisible");
}

exports.message = "hi";

exports.say = function () {
  console.log(message);
}

运行下面的命令，可以输出exports对象。

var example = require('./example.js');
example
// {
//   message: "hi",
//   say: [Function]
// }

require命令用于加载文件，后缀名默认为.js，支持相对路径和绝对路径。

var foo = require('foo');
//  等同于
var foo = require('foo.js');

加载规则

根据参数的不同格式，require命令去不同路径寻找模块文件。

（1）如果参数字符串以“/”开头，则表示加载的是一个位于绝对路径的模块文件。比如，require('/home/marco/foo.js')将加载/home/marco/foo.js。

（2）如果参数字符串以“./”开头，则表示加载的是一个位于相对路径（跟当前执行脚本的位置相比）的模块文件。比如，require('./circle')将加载当前脚本同一目录的circle.js。

（3）如果参数字符串不以“./“或”/“开头，则表示加载的是一个默认提供的核心模块（位于Node的系统安装目录中），或者一个位于各级node_modules目录的已安装模块（全局安装或局部安装）。

第三方模块的加载规则(包的规则)

通常，我们会把相关的文件会放在一个目录里面，便于组织。这时，最好为该目录设置一个入口文件，让require方法可以通过这个入口文件，加载整个目录。

在目录中放置一个package.json文件，并且将入口文件写入main字段。package.json通常放在根路径下，下面是一个例子。

// package.json
{ "name" : "some-library", //包名只可有小写字母
  "version" : "1.0.0", //包版本
  "main" : "./lib/some-library.js" //默认路径
}

require发现参数字符串指向一个目录以后，会自动查看该目录的package.json文件，然后加载main字段指定的入口文件。如果package.json文件没有main字段，或者根本就没有package.json文件，则会加载该目录下的index.js文件或index.node文件。

1. 第一种手写package.json

2. 命令行进入根路径npm init

可以类比jquery，require('jquery')会暴露$函数