8.26模块化

1. https://github.com/ljianshu/Blog/issues/48

 

 

• 模块化概念：复杂的程序按照规则封装几个块再组合在一起，块内部数据实现是私有的只是向外部暴露一些接口来与外部通信

• 模块化进程

  1. 全局function：不同的功能封装成不同的函数------缺点命名冲突

  2. 对象封装：减少全局变量解决命名冲突------缺点：数据不安全（外部可以直接修改模块内部数据）会暴露所有成员

  3. 闭包：私有变量，通过方法-----缺点：相互依赖

  4. 引入依赖

• 模块化优点

  1. 避免命名冲突

  2. 按需加载

  3. 复用性

  4. 可维护

• 模块化之后引入过多的问题

  1. 请求变多

  2. 依赖关系模糊 不知道谁依赖谁

• 模块化规范

  1. CommonJS 特点：同步加载，适用于服务端，加载一次缓存结果。浏览器端需要编译后执行。

     •  暴露模块：module.exports = value或exports.value = value

     • 引入模块：require(xxx)

  2. AMD: 特点：异步加载，允许指定回调函数，适用于浏览器端。

     •  定义：define(['module1','module2'], function(m1, m2){return 模块})

     • 使用：require(['module1', 'module2'], function(m1, m2){使用m1, m2})

     • 借助工具：RequireJS

  3. CMD 特点：用于浏览器端，模块加载是异步的，模块使用时才会加载执行。结合了CommonJS和AMD规范的特点。

     • 定义暴露模块：define(function(require, exports, module){

     • //引入依赖模块(同步) var module2 = require('./module2')

     • //引入依赖模块(异步) require.async('./module3', function (m3) {})

     • //暴露模块 exports.xxx = value})

     • 引入模块： define(function (require) { var m1 = require('./module1') var m4 = require('./module4') m1.show() m4.show() })

     • 借助工具：sea.js

  4. ES6模块化：
     

     使用：基本导出（具名导出）和默认导出

     可以将整个模块的导出想象成一个对象，基本导出导出的是该对象的某个属性，默认导出导出的是该对象的特殊属性default

     //导出结果：想象成一个对象
     {
         a: xxx, //基本导出
         b: xxx, //基本导出
         default: xxx, //默认导出
         c: xxx //基本导出
     }
     ​
     export var a = 1 //基本导出 a = 1
     export var b = function(){} //基本导出 b = function(){}
     export function method(){}  //基本导出 method = function(){}
     var c = 3;
     export {c} //基本导出 c = 3
     export { c as temp } //基本导出 temp = 3
     ​
     export default 3 //默认导出 default = 3
     export default function(){} //默认导出 default = function(){}
     export { c as default } //默认导出 default = 3
     ​
     export {a, b, c as default} //基本导出 a=1, b=function(){}, 默认导出 default = 3

     1. 导入

        import {a,b} from "模块路径"   //导入属性 a、b，放到变量a、b中
        import {a as temp1, b as temp2} from "模块路径" //导入属性a、b，放到变量temp1、temp2 中
        import {default as a} from "模块路径" //导入属性default，放入变量a中，default是关键字，不能作为变量名，必须定义别名
        import {default as a, b} from "模块路径" //导入属性default、b，放入变量a、b中
        import c from "模块路径"  //相当于 import {default as c} from "模块路径"
        import c, {a,b} from "模块路径" //相当于 import {default as c, a, b} from "模块路径"
        import * as obj from "模块路径" //将模块对象放入到变量obj中
        import "模块路径" //不导入任何内容，仅执行一次模块

     2. ES6 module 采用依赖预加载模式，所有模块导入代码均会提升到代码顶部

        不能将导入代码放置到判断、循环中

        导入的内容放置到常量中，不可更改

        ES6 module 使用了缓存，保证每个模块仅加载一次导入