2-2-1模块化开发.txt

1.模块化概述
管理组织代码

1.模块化演变过程
2.模块化规范
3.常用的模块化打包工具
4.教育模块化工具构建现代Web应用
5.打包工具的优化技巧

2.模块化的演进过程
代码的规模需要，
模块化会遇到一些问题

1.文件划分的方式
	污染全局作用域
	命名冲突问题
	无法管理模块依赖关系
	早期模块化完全依靠约定
	
2.命名空间方式
	减少命名冲突
	
	没有私有空间，能在外部被访问修改
	依赖关系没有解决
	
3.IIFE
	函数提供的私有作用域中---私有成员
	只有需要暴露给外部的成员才挂到全局对象上

3.模块化规范的出现
CommonJS规范
一个文件就是一个模块
每个模块都有单独的作用域
module.exports到处成员
通过require函数载入模块

AMD规范   异步模块同步规范
	
	define  定义模块
	require函数   加载模块
	
	范围广但 使用复杂  
	模块js文件请求频繁
	
CMD规范

	
Sea.js + CMD   淘宝推出的规范

4.模块化的最佳实践
ES Modules 浏览器环境的规范
CommonJS node环境的规范
短期内应该不会有新的了

5.ES Modules 特性
基本特性：
1.modules标签

1.1 自动使用严格模式 不能直接使用this

	1.2单独作用域  每一个module都是单独的
	
	1.3外部js文件是通过cors方式请求  服务端需支持cors 才可以访问
	
	1.4延迟执行脚本   等到网页渲染过后再执行脚本

6.ES Modules 导出和导入
import
由于是单独作用域 所以只有导入才能使用作用域的对象

export
	导出时可以重命名
	default

7.导入导出的注意事项
export {name,age} 误认为自变量对象的结构 实际上这是固定的语法 {}

import{name,age}     引用关系  实时的

导入的时候 只读

8.import的用法
1.使用完整路径和完整名称 ./ 也不能省略 commonjs 可以不用完整
2.import {} 为空的时候 不提取成员 只提取模块
3. * as mod 导出成员多的时候使用 并且视为对象
4.import 只能出现在最顶层
import()函数 动态导入模块
import(’./module.js’).then(function (module) {
console.log(module)
})
5.import abc, { name, age } from ‘./module.js’
abc 视为默认成员并命名

9.导入导出成员
做一个汇总的导出文件 这样import不用一个文件一个文件导入了

10.Polyfill兼容性为
早期浏览器不支持 ES Module

导入兼容文件
	1.build.js   babel转换
	2.loader.js     识别ES Module
	3.polyfill.min.js    promise的兼容文件
	
如果支持的话 会执行两次
通过script的标签 nomodule 属性来起作用

11.ES Modules in Node.js
Node支持ES Modules 可以原生使用
考虑 Common JS规范 差别大 使用还是注意

文件扩展名改为 .mjs
启动时需要额外添加 `--experimental-modules` 参数；  说明是实验特性 不要在生产环境中使用

系统内置模块的成员可以导出使用
第三方模块的成员不可以导出使用

12.ES Modules 与 Common JS 交互
1.可以载入C JS
不能直接提取js里面的成员 不是解构

2.不可以载入mjs
	不能在c js 模块中不能通过require直接导入ES Modules

13.两者的区别
1.cjs
全局变量

2.ES Modules
	没有cjs的全局变量
	需要通过import 导入各个对象模块 
		url 里的 fileURLToPath方法  路径
		path 里的 dirname方法等

14.新版本的支持
type字段设置 module 就不用将文件名后缀改为mjs

徐国要在module下使用cjs，则后缀改为 .cjs

15.兼容方案
babel兼容方案
低版本node运行 8.xx版本之前不能直接运行 需要插件使用

"plugins": [
	"@babel/plugin-transform-modules-commonjs"
  ]
	
	

	
	
	
	沉溺过去的失败才是罪责，奋起勃发则是救赎，复仇折桂更是升华