1理解:
什么是模块/模块化?
将一个复杂的程序依据一定的规范封装成几个块,并组合在一起
块的内部数据/实现是私有的,只是向外部暴露一些接口(方法)与外部其他模块通信
为什么要模块化?
降低复杂度
提高解耦性
部署方便
模块化的好处:
避免命名冲突
更好的分离,按需加载
更高复用性
更好维护
页面引入加载script
问题:
请求过多
依赖模糊
难以维护
2模块进化史
全局function模式 //污染全局
namespace模式 //不安全
IIFE模式
IIFE模式增强
load script
3
模块化规范
1.CommonJS
规范:
说明:
http://wiki.commonjs.org/wiki/Modules/1.1
每个文件都可当作一个模块
在服务器端:模块的加载是运行时同步加载的
在浏览器端:模块需要提前编译打包处理
基本语法:
暴露模块:
module.exports = value
exports.xxx = value
问题:暴露的模块到底是什么?
exports对象 (其实,module.exports原本就是一个空的对象。)
引入模块
require(xxx) //第三方模块:xxx为包名;自定义模块:xxx为模块文件路径
实现:
服务器端实现: node.js
http://nodejs.cn/
浏览器端实现: Browserify
node.js模块化教程
1.下载安装node.js
2.创建目录结构
/-Modules
/-modelu1.js
/-modelu2.js
/-modelu3.js
/-app.js
/-package.json
{
"name": "commonjs_node",
"version": "1.0.0"
}
3.下载第三方模块
npm install uniq
4.模块化编码
module1.js
module.exports = {}
module2.js
module.exports = function(){}
module3.js
exports.foo = function(){}
app.js
//引入第三方库uniq
let uniq = require("uniq")
//将其他模块汇集到主模块
let module1 = require('./modules/module1')
let module2 = require('./modules/module2')
let module3 = require('./modules/module3')
module1.foo() //module1
module2()//module2
module3.foo()//module3
let result = uniq(module3.arr)
console.log(result) //[11,2,3,4,5]
5.运行
node app.js
Browserify模块化使用教程
/-js
/-dist //打包生成文件的目录
/-src //源码所在目录
/-module1.js
/-module2.js
/-module3.js
/-app.js //应用主源文件
/-index.html
/-package.json
{
name:"browserify-test"
}
2.下载browserify
全局: npm install browserify -g
局部:npm install browserify --save-dev //--save运行依赖的包 -dev开发依赖的包
3.定义模块代码
4.打包处理js
browserify js/src/app.js -o js/dist/bundle.js
5.页面使用引入
<script src="js/dist/bundle.js" type="text/javascript" charset="utf-8"></script>
6.运行index.html到浏览器
2.AMD
规范:
说明:
Asynchronous Module Definition (异步模块定义)
http://github.com/amdjs/amdjs-api/wiki/AMD
专门用于浏览器端,模块的加载是异步的
基本语法:
定义暴露模块
//定义没有依赖的模块
define(function(){return 模块})
//定义有依赖的模块
define([‘module1’, ‘module2’],function(m1,m2){ return 模块 })
引用使用模块
require([‘module1’, ‘module2’],function(m1,m2){ 使用m1/2})
实现(浏览器端)
Require.js
http://www.requirejs.cn/
Require.js使用教程
1.下载require.js 并引入
官网 http://www.requirejs.org
https://github.com/requirejs/requirejs
将require.js导入项目js/libs/require.js
2.创建项目结构
/-js
/-lib
/-require.js
/-modules
/-alerter.js
/-dataService.js
/-main.js
/-index.html
3.定义require.js的模块代码
dataService.js:
//定义没有依赖的模块
define(function(){
let name= "dataService"
function getName(){
return name
}
//暴露模块
return {getName}
})
alerter.js:
//定义有依赖的模块
define(['dataService'],function(dataService){
let msg = "alerter.js"
function showMsg(){
console.log(msg,dataService.getName())
}
$('body').css('background','deeppink')
//暴露模块
return {showMsg}
})
main.js:
(function(){
requirejs.config({
//baseUrl: 'js/lib', //基本的路径
paths:{ //配置路径
dataService: './modules/dataService',
alerter: './modules/alerter'
jquery:'./libs/jquery-3.4.1'
}
})
requirejs(['alerter'], function(alerter){
alerter.showMsg()
})
})()
4.页面引入
<script src="js/libs/require.js" data-main="js/main.js" ></script>
3CMD
已经卖给国外
规范:
说明:
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(’./module’)
//引入依赖模块(异步)
require.async(’./module3’,function(m3){
})
//暴露模块
exports.xxx = value
)
引入使用模块
define(function(require){
var m1=require(’./module1’)
m1.show()
})
实现:
sea.js
http://www.zhangxinxu.com/sp/seajs
4ES6
规范:
说明:
http://es6runayifeng.com/#docs/module
依赖模块需要编译打包处理
语法:
导出模块:export
引入模块:import
实现(浏览器端):
使用babel将es6编译为es5代码
使用browserify编译打包js
ES6 Bable-Browserify使用教程
1.定义package.json文件
2.安装babel-cli, babel-preset-es2015, 和browserify //cli :command line interface命令行接口
npm install babel-cli browserify -g //全局安装babel
npm install babel-preset-es2015 --save-dev //当前项目安装
preset 预设(将es6转换成es5的所有插件打包)
3.定义.babelrc文件 (rc //run control //运行时控制文件)
{
“presets”:[“es2015”]
}
4.编码
js/src/module1.js:
//暴露模块 分别暴露
export function foo(){
console.log(“foo() module1”)
}
export function bar(){
console.log("bar() module1")
}
export let arr = [1,4,"bc"]
js/src/module2.js:
//统一暴露
function fun(){
console.log("fun() module2")
}
function fun2(){
console.log("fun2() module2")
}
export {fun,fun2}
js/src/module3.js:
export default{
msg:"默认暴露",
foo(){
console.log(this.msg)
}
}
main.js:
//引入其他的模块
//语法 import xxx form '路径'
import {foo, bar} from './module1' //必须用对象结构赋值的形式
import {fun, fun2} from './module2'
import module3 from './module3'
foo()
bar()
fun()
fun2()
module3.foo()
5.编译
使用babel将es6编译为es5代码(但包含CommonJS语法):babel js/src -d js/lib
使用browserify 编译js :browserify js/lib/main.js -o js/lib/bundle.js
6.页面使用引入
<script src="js/dist/bundle.js" type="text/javascript" charset="utf-8"></script>