模块化

对模块化的总结，涉及js模块化发展史，包含CommonJS，AMD，CMDES6模块化。

模块化

• 1.JavaScript模块化发展史
  • 第一阶段
    • 仅用于实现页面中的一些小效果，代码仅几百行 只需程序员小心即不会出错 不存在专业的前端工程师
  • 第二阶段
    • ajax的出现，改变了JavaScript在浏览器中扮演的角色 不仅可以实现小效果，还可以和服务器进行交互 代码数量增长，出现前端开发需求，但待遇极低
    • 制约前端发展的问题：1.浏览器解释执行js速度太慢 2.用户端的电脑配置不足 3.更多的代码带来全局变量污染，依赖关系混乱等问题
  • 第三阶段
    • 谷歌的V8引擎发布，解决前两大问题 2009年，Ryan Dahl推出nodejs，js第一次入主后端 经社区激烈讨论，行成了第一个模块化方案commonjs，方案一出， nodejs成为了第一个实现JS语言实现模块化的平台
  • 第四阶段
    • 为了把commonJS运用到浏览器环境，出了AMD规范 2015年，ES6发布，它提出了官方的模块化解决方案———ES6模块化 于是接下来就有了大量的框架，第三方库等
• 2.commonjs
  • 2.1 安装nodejs
    • 入口文件：nodejs直接运行的某个文件
    • nodejs 遵循ECMAscript标准，但由于脱离了浏览器环境，不能在nodejs使用webAPI，如dom对象，window对象，document对象等，其他可以使用
    • 运行js文件——>在终端打开（Ctrl+j）——node index. js（.js可省略）
  • 2.2 CommonJS
    • 在node js中有且只有一个入口文件
    • 模块：一个js文件，实现一部分功能，并隐藏自己的内部实现，同时提供一些接口供其他模块使用
      • 模块的导出：暴露接口的过程
      • 模块的导入：通过某种语法或者api去使用一个模块时
    • CommonJS规范
      • 1.文件中存在exports或require，则该JS文件是一个模块
      • 2.模块内的所有代码均为隐藏代码，不会造成全局污染
      • 3.如果一个模块需要暴露一下API提供给外部使用，使用exports（一个空的对象）
      • 4.如果一个模块需要导入其他模块，使用require（函数）传入模块的路径，必须以 . / 或 .. / 开头
    • nodejs对CommonJS的实现
      • 1.只有执行到require函数时才会加载并执行模块
      • 2.为了隐藏模块中的代码，nodejs执行模块时，把模块中所有代码放置到一个函数中执行，以保证不污染全局变量
      • 为了保证顺利导出模块内容
        • (function(module){ module.exports = {}; var exports = module.exports; //模块中的代码 return module.exports; })()
      • 为了避免重复加载同一模块，nodejs开启了默认缓存，如果加载的模块已经被加载过了，则会自动使用之前的导出结果
• 3.AMD 和 CMD
  • 浏览器端模块化的难题
    • require（模块路径）通过路径找到本机文件，CommonJS可以认为是同步的，必须要加载完文件继续执行代码
    • 当浏览器遇到CommonJS时，浏览器需要远程到服务器读取，且读取文件并把它放入一个环境中执行，需要浏览器厂商支持，但因CommonJS属于社区标准，浏览器厂商不愿提供支持
    • 解决办法：1.做成异步，加载完后调用一个回调 2.模块中代码需要放置到函数中执行？编写模块时，直接放函数中就行 于是出了AMD 和CMD
  • AMD
    • 全称是Asynchronous Module Definition，即异步模块加载机制 require.js实现了AMD规范 在AMD中，导入和导出模块的代码，都必须放置在define函数中
    • define([依赖的模块列表], function(模块名称列表){ //模块内部的代码 return 导出的内容 })
  • CMD
    • 全称是Common Module Definition，公共模块定义规范 sea.js实现了CMD规范 在CMD中，导入和导出模块的代码，都必须放置在define函数中
    • define(function(require, exports, module){ //模块内部的代码 })
• 4.ES6模块化
  • 特点：
    • 依赖预声明
    • 灵活的多种导入导出方式
    • 规范的路径表示法：所有路径必须以./或../开头
  • 基本的导入导出
    • 目前，浏览器使用以下方式引入一个ES6模块文件 <script src="入口文件" type="module">
    • 导出：export 声明表达式 / export ｛具名符号｝
    • 导入：import {导入的符号列表} from "模块路径"
    • 细节： 导入时，可以通过关键字as对导入的符号进行重命名 导入时使用的符号是常量，不可修改 可以使用*号导入所有的基本导出，形成一个对象
  • 默认导入导出
    • 导出：export default 默认导出的数据 export {默认导出的数据 as default} 每个模块仅允许有一个默认导出
    • import 接收变量名 from "模块路径" var 接收变量名 = require("模块路径")
  • 同时导入某个模块的默认导出和基本导出
    • import 接收默认导出的变量, {接收基本导出的变量} from "模块路径"
  • ES6模块化的其他细节
    • 1.尽量导出不可变值
    • 2.可以使用无绑定的导入用于执行一些初始化代码 import "模块路径"
    • 3.可以使用无绑定再导出，来重新导出来自另一个模块的内容 export ｛绑定的标识符｝from "模块路径"