前端模块化
对于模块化的理解：
什么是模块?
将一个复杂的程序依据一定的规则(规范)封装成几个块(文件), 并进行组合在一起
块的内部数据/实现是私有的, 只是向外部暴露一些接口(方法)与外部其它模块通信
一个模块的组成：
数据 --->内部的属性
操作数据的行为 ---> 内部的函数
模块化：
编码时是按照模块一个一个编码的, 整个项目就是一个模块化的项目
先来说下AMD~~~
1. 下载require.js, 并引入
官网: http://www.requirejs.cn/
github : https://github.com/requirejs/requirejs
将require.js导入项目: js/libs/requirejs
2. 创建项目结构
3. 定义require.js的模块代码
dataService.js
alerter.js
4. 配置应用主(入口) js: main.js
5. 配置主页: index.html
6. 打开谷歌浏览器进行测试
接下来说下CMD~~
1. 下载sea.js, 并引入
官网: http://seajs.org/
github : https://github.com/seajs/seajs
将sea.js导入项目: js/libs/sea.js
2. 创建项目结构
3. 定义sea.js的模块代码
module1.js
module2.js
module3.js
module4.js
5. main.js : 主(入口)模块
6. 配置 index.html
7. 打开谷歌浏览器进行测试
最后说下CommonJS~
1. 创建项目结构
2. 定义package.json文件
{
"name" : "es6-babel-browserify",
"version" : "1.0.0"
}
3. 定义.babelrc文件
{
"presets": ["es2015"]
}
4. 安装babel
npm install babel-core babel-loader babel-preset-es2015 --save
5. 编码
module1.js
module2.js
module3.js
app.js
6. 配置 index.html
7. 打开谷歌浏览器进行测试
总结下...
AMD : 浏览器端
require.js
基本语法
定义暴露模块: define([依赖模块名], function(){return 模块对象})
引入模块: require(['模块1', '模块2', '模块3'], function(m1, m2){//使用模块对象})
配置:
require.config({
//基本路径
baseUrl : 'js/',
//标识名称与路径的映射
paths : {
'模块1' : 'modules/模块1',
'模块2' : 'modules/模块2',
'angular' : 'libs/angular',
'angular-messages' : 'libs/angular-messages'
},
//非AMD的模块
shim : {
'angular' : {
exports : 'angular'
},
'angular-messages' : {
exports : 'angular-messages',
deps : ['angular']
}
}
})
CMD : 浏览器端
sea.js
基本语法
定义暴露模块:
define(function(require, module, exports){
通过require引入依赖模块
通过module/exports来暴露模块
exports.xxx = value
})
使用模块seajs.use(['模块1', '模块2'])
CommonJS
Node.js : 服务器端
Browserify : 浏览器端 也称为js的打包工具
基本语法:
定义暴露模块 : exports
exports.xxx = value
module.exports = value
引入模块 : require
var module = require('模块名/模块相对路径')
引入模块发生在什么时候?
Node : 运行时, 动态同步引入
Browserify : 在运行前对模块进行编译/转译/打包的处理(已经将依赖的模块包含进来了),运行的是打包生成的js, 运行时不存在需要再从远程引入依赖模块
网友评论