JS模块化
2021-07-30 17:46:03 0 举报AI智能生成
js模块化学习和使用路线图,让编程更简单
作者其他创作
大纲/内容
理解
1. 什么是模块/模块化?
生活中的例子——“模块化手机”：
分支主题
分支主题
将一个复杂的程序依据一定的规则(规范)拆分成几个块(文件), 并进行组合在一起。
块的内部数据或实现是私有的, 只是向外部暴露一些接口(方法)与外部其它模块通信。
分支主题
模块化的进化史
分支主题
分支主题
子主题
分支主题
分支主题
分支主题
子主题
分支主题
分支主题
分支主题
分支主题
分支主题
2. 为什么要模块化?
分支主题
3. 模块化的好处
避免命名冲突(减少命名空间污染)
更好的分离, 按需加载
更高复用性
高可维护性
4. 页面引入加载script
分支主题
分支主题
问题
请求过多
依赖模糊
难以维护
模块化规范
CommonJS
规范
说明
http://wiki.commonjs.org/wiki/Modules/1.1
每个文件都可当作一个模块
在服务器端: 模块的加载是运行时同步加载的
在浏览器端: 模块需要提前编译打包处理
基本语法
暴露模块
module.exports = value
exports.xxx = value
问题: 暴露的本质到底是什么?exports对象
引入模块
require(xxx)
第三方模块:xxx为模块名
自定义模块: xxx为模块文件路径
实现
服务器端实现
Node.js
http://nodejs.cn/
浏览器端实现
Browserify
http://browserify.org/
也称为CommonJS的浏览器端的打包工具
区别Node与Browserify
Node.js运行时动态加载模块(同步)
Browserify是在转译(编译)时就会加载打包(合并)require的模块
AMD
规范
说明
Asynchronous Module Definition(异步模块定义)
https://github.com/amdjs/amdjs-api/wiki/AMD
专门用于浏览器端, 模块的加载是异步的
基本语法
定义暴露模块
//定义没有依赖的模块
define(function(){
return 模块
})
分支主题
//定义有依赖的模块
define(['module1', 'module2'], function(m1, m2){
return 模块
})
引入使用模块
//入口js配置
require(['module1', 'module2'], function(m1, m2){
使用m1/m2
})
//页面引入使用
<script type="text/javascript" src="js/libs/require.js" data-main="js/main.js"></script>
实现(浏览器端)
Require.js
http://www.requirejs.cn/
http://www.ruanyifeng.com/blog/2012/11/require_js.html
CMD
规范
说明
Common Module Definition(通用模块定义)
https://github.com/seajs/seajs/issues/242
专门用于浏览器端, 模块的加载是异步的
模块使用时才会加载执行
基本语法
定义暴露模块
//定义没有依赖的模块
define(function(require, exports, module){
exports.xxx = value
module.exports = value
})
分支主题
//定义有依赖的模块
define(function(require, exports, module){
//引入依赖模块(同步)
var module2 = require('./module2')
//引入依赖模块(异步)
require.async('./module3', function (m3) {
})
//暴露模块
exports.xxx = value
})
引入使用模块
//入口js配置
define(function (require) {
var m1 = require('./module1')
var m4 = require('./module4')
m1.show()
m4.show()
})
//页面引入使用
<script type="text/javascript" src="js/libs/sea.js"></script>
<script type="text/javascript">
seajs.use('./js/modules/main')
</script>
实现(浏览器端)
Sea.js
http://www.zhangxinxu.com/sp/seajs/
ES6
规范
说明
http://es6.ruanyifeng.com/#docs/module
依赖模块需要编译打包处理
语法
暴露模块-export:
1. 分别暴露：export 暴露内容
2. 统一暴露：export {xxx, yyy}
3. 默认暴露：export defalut 暴露内容
引入模块-import:
1. import {xxx,yyy} from './module1'
2. import module3 from './module3'
实现(浏览器端)
使用Babel将ES6编译为ES5代码
使用Browserify编译打包js
扩展阅读
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模块化编程)
0 条评论
下一页
