模块化
为什么要模块化
在JS中没有包的概念,变量可以重复定义,这就存在变量覆盖问题
<script>
(function (win) {
//函数暴露
win.aa=this.aa;
function aa() {
console.log("--")
}
})(window);
</script>
commonjs规范
规范
说明
每个文件都可以当作一个模块
在服务器:模块的加载是运行时同步加载的
在浏览器:模块需要提前编译打包处理
基本语法
暴露模块:
module.exports = value
exports.xxx = value
引入模块:
require(xxx) 注:第三方:xxx模块名 自定义:xxx为模块文件路径
实现
服务器端实现
Node.js
http://nodejs.cn
目录
|-module1
|-module.js
|-module2
|-module.js
|-module3
|-module.js
./module1/module.js
exports.say={
msg:"say",
aa:function () {
console.log("----------")
}
}
./module2/module.js
exports.bar={
msg:"nihao",
aa:function () {
console.log("----------")
}
}
./module3/module.js
module.exports={
msg:"sss"
}
./test.js
enter code herelet module1= require('./module1/module')
let module2= require('./module2/module')
let module3= require('./module3/module')
let uniq=require('uniq');
console.log(module1.say.msg)
console.log(module2.bar.msg)
console.log(module3.msg)
浏览器实现
Browserify
http://browserify.org
https://www.npmjs.com/ //查找js包
步骤
1.创建目录和文件
2.下载browserify
*全局 npm install browserify -g
*局部 npm install browserify --save-dev //加入开发依赖,表示此依赖只在开发的时候引入,环境有:开发环境(编写代码)、测试环境,运行环境(上线)
3.定义模块代码
4.打包处理
* broserify /targetPath -o /outPath
目录
|-js
|-dist // 打包生成的文件的目录 或者叫 build
|-src // 源码的目录
|-index.html
|-package.json
AMD
规范
说明
Asynchronous Modul Defintion(异步模块定义)
专门用于浏览器端,模块的加载是异步的
基本语法
暴露模块
//定义没有依赖的模块
define(function(){
return module;
})
//定义有依赖的模块
define(['module1','module2'],function(m1,m2){
return module;
})
引入模块
(function () {
require.config({
baseUrl:'AMD/',//基本路径,加上之后paths=baseUrl+paths
paths:{ //配置路径,不加后缀
service: './module/service',
controller:'./module/controller'
}
})
require(['service','controller'],function(m1,m2){
//使用m1/m2
})
})
注:jQuery内置支持AMD规范,名称一定要为jquery
service.js
define(function () {
var name = "kk";
function say() {
return name;
}
return {
name: name,
say: say
};
})
controller.js
define(['service'],function (service) {
var bar ="bar";
function fbar() {
console.log("----------")
console.log(service.name)
}
return {fbar};
})
实现
Require.js
http://www.reqiurejs.cn //官网
http://www.ruanyifeng.com/blog/2012/11/require_js.html
步骤
//1.下载require.js,并引入
*官网 http://www.requirejs.cn
*引入 js/libs/require.js
//2.创建项目结构
|-js
|-libs
|-require.js
|-modules
|-service.js
|-controller.js
|-main.js
|-index.html
service.js
define(function () {
var name = "kk";
function say() {
return name;
}
return {
name: name,
say: say
};
})
controller.js
define(['service'],function (service) {
var bar ="bar";
function fbar() {
console.log("----------")
console.log(service.name)
}
return {fbar};
})
main.js
(function () {
require.config({
baseUrl:'AMD/', //基本路径,加上之后,paths=baseUrl+paths
paths:{ //配置路径,不加后缀
service: './module/service',
controller:'./module/controller'
}
})
require(['controller'],function (controller) {
controller.fbar();
})
})()
CMD(了解)
ES6
规范
说明
http://es6.ruanyifeng.com/#docs/module
依赖的模块需要编译打包处理(ES6还要浏览器不支持,转换为ES5时自带reqiure语法(浏览器不认识),需要使用使用browserify)
语法
导出模块:export xxx // export default()=>{}默认暴露
引入模块:import xxx from ‘./moddule’
实现(浏览器)
1.使用Babel将ES6编译为ES5代码
2.使用Browserify编译打包js
目录
|-ES6
|-.babelrc
|-js
|-dist
|-modules
|-module1.js
|-module2.js
|-module2.js
|-app.js
|-index.html
|-package.json
使用步骤
1.定义package.json
{
"name":"es6-babel-browserify"
"version":"1.0.0"
}
2.安装 babel-cli,babel-preset-es2015和browserify
*npm install babel-cli browserify -g //cli:command line interface
*npm install babel-preset-es2015 --save-dev //将ES6转换成ES5的所有插件打包下载
*preset 预设(将es6转换成es5的所有插件打包)//
3.定义.babelrc文件 //rc run control运行时需要读的文件
{
"presets":["es2015"] //要转换什么
}
4.编码
*js/src/module1.js //分别暴露 分别引入
*js/src/module2.js //统一暴露 统一引入
*js/src/module2.js //默认暴露 默认引入
5.编译
*使用Babel将ES6编译为ES代码(但包含Commonjs代码):babel js/src -d js/lib
*使用Browserify编译js:browserify js/lib/app.js -o js/lib/bundle.js
module1.js
export function f1() {
console.log("f1")
}
export function f2() {
console.log("f2")
}
module2.js
var foo=function foo() {
console.log("foo")
}
function bar() {
console.log("bar")
}
export {foo,bar};
module3.js
export default {
kk: function () {
console.log("kk")
},
aa: function () {
console.log("aa")
}
}
app.js
import {f1,f2} from './module1'
import {foo,bar} from './module2'
import module3 from './module3'
f1()
f2()
foo()
bar()
module3.kk()
module3.aa()