前端JS模块化
2021-09-28 15:00:36 26 举报AI智能生成
前端JS模块化 CommonJS/AMD/CMD/ES6模块
作者其他创作
大纲/内容
将一个复杂的程序依据一定的规则（规范）封装成几个块（文件），并组合在一起
块的内部数据/实现是私有的，只是向外部暴露一些接口（方法）与外部其它模块通信
1. 什么是模块/模块化?
网站应用趋于复杂化
代码复杂度越来越高
开发人员希望代码被高度解耦
运维人员希望减少http请求，优化代码架构，提升用户体验
面临的问题：
避免命名冲突（减少命名空间污染）
更好地分离，按需加载
更高复用性
高可维护性
模块化的好处：
2. 为什么要模块化?
Global被污染，很容易命名冲突
1. 最早，全部在一个文件中或是简单的分成几个文件
减少Global上的变量数目
本质是对象，外部可以修改对象的属性，不安全
2. 简单封装：Namespae模式（命名空间）
3. 匿名闭包：IIFE模式
现代模块化实现的基石
4. 增强闭包模式，引入依赖，但还没有规范
没有规范的代码
1. 请求过多
2. 依赖模糊
3. 难以维护
没有规范的问题
CommonJs
AMD
CMD
ES6
模块化规范的发展
5. 模块化规范
3. 模块化的发展
Commonjs规范说明
CommonJS规范
每个文件都当做一个模块
服务端：模块的加载是运行时同步加载的
浏览器端：模块需要提前编译打包处理
说明
module.exports = value
exports.xxx = value
问题：暴露的模块到底是什么？
暴露模块
第三方模块：xxx为模块名
自定义模块： xxx为模块文件路径
require(xxx)
引入模块
基本语法
规范
Nodejs
http://node.js.cn
服务端实现
Browserify
https://browserify.org
也称为CommonJS的浏览器端的打包工具
浏览器端实现
Nodejs运行时动态加载模块（同步）
Browserify是在转译（编译）时就会加载打包（合并）require的模块
Node与Browserify的区别
实现
4. CommonJS
Asynchronous Module Definition(异步模块定义)
https://github.com/amdjs/amdjs-api/wiki/AMD
专门用于浏览器端，模块的加载是异步的
// 定义没有依赖的模块define(function(){ return 模块})
Require.js
http://www.requirejs.cn/
http://www.ruanyifeng.com/blog/2012/11/require_js.html
实现（浏览器端）
5. AMD
Common Module Define（通用模块定义）
https://github.com/seajs/seajs/issues/242
模块使用时才会加载执行
define(function(require){ var m1 = require('./module1') var m2 = require('./module2') m1.show() m2.show()})
Sea.js
http://www.zhangxinxu.com/sp/seajs/
实现(浏览器端)
6.CMD
http://es6.ruanyifeng.com/#docs/module
依赖模块需要打包编译处理
暴露模块: export
引入模块：import
语法
使用Babel将ES6编译为ES5代码
使用Browserify编译打包js
7. ES6
https://github.com/seajs/seajs/issues/588(前端模块化开发那点历史)
http://zccst.iteye.com/blog/2215317(CommonJS，AMD，CMD区别)
http://www.zhihu.com/question/20351507/answer/14859415(AMD和CMD 的区别)
http://www.ruanyifeng.com/blog/2012/10/javascript_module.html(Javascript模块化编程)
8. 扩展阅读
前端JS模块化
0 条评论
下一页
