模块化解决的问题
- 全局变量的灾难.
- 函数命名冲突
- 依赖关系不好管理
?？榛⒄构讨械?7 种方式
- 一个文件、一个函数都可以被称为模块。
1. 单例模式（命名空间）
var fnObj={//减少 Global 上的变量数目，安全性低（对象可以被操作）
foo:function(){...},
bar:function(){...}
}
fnObj.foo();
2. 闭包:?；だ锉叩谋淞坎槐煌饨绺扇?/h5>
var Module=(function(){
var aaa=111;
var foo=function(){
return aaa；
}
return foo//暴露接口
})()
Module.aaa//undefined
Module.foo()//111;
3. 引入第三方依赖文件，例如jq（第三方?？楣嗟幕澳岩晕?，请求过多，加载顺序问题等。。）
var Module = (function($){
var _$body = $("body"); // 使用jq
var foo = function(){
console.log(_$body); // 特权方法
}
return {
foo: foo
}
})(jQuery)
Module.foo();
4. common.js (node的?？榛绞?
// math.js
单个导出
exports.add = function(a, b){
return a + b;
}
//批量导出
var add=function(){...}
var reduce=function(){...}
module.exports={
add,
reduce,
}
// main.js
var math = require('math') // ./math in node
console.log(math.add(1, 2)); // 3
5. AMD/CMD 浏览器环境?？榛桨福ɑ咎蕴?/h5>
var Module=(function(){
var aaa=111;
var foo=function(){
return aaa；
}
return foo//暴露接口
})()
Module.aaa//undefined
Module.foo()//111;
var Module = (function($){
var _$body = $("body"); // 使用jq
var foo = function(){
console.log(_$body); // 特权方法
}
return {
foo: foo
}
})(jQuery)
Module.foo();
// math.js
单个导出
exports.add = function(a, b){
return a + b;
}
//批量导出
var add=function(){...}
var reduce=function(){...}
module.exports={
add,
reduce,
}
// main.js
var math = require('math') // ./math in node
console.log(math.add(1, 2)); // 3
AMD----requireJS
CMD----SeaJS
6. webpack模块管理 大势所趋(大而全，用于比较大的项目)
// webpack.config.js
module.exports = {
entry: './main.js',
output: {
filename: 'bundle.js'
}{,
module: {
loaders: [{
test: /\.js$/,
loader: 'babel-loader'
}]
}}
}
7. ES6 MODULE（使用babel将es6 转化成 es5 ）
// math.js
export default math = {//导出?？? PI: 3.14,
foo: function(){}
}
// app.js
import math from "./math";//引入?？?math.PI
详解commonJS(后端NODE的趋势)
//sum.js导出sum
exports.sum = function(){...做加操作..};
//calculate.js引入sum 并导出add
var math = require('sum');
exports.add = function(n){
return math.sum(val,n);
};
- require 用来加载代码，而 exports 和 module.exports 则用来导出代码
- exports 和 module.exports区别
module.exports 初始值为一个空对象 {}
exports 是指向的 module.exports 的引用
require() 返回的是 module.exports 而不是 exports
exports.png
如果a页面有代码，b页面需要调用a页面的代码，在b页面 var b=require(./a) 通过绝对路径找到a文件。require()这个方法会让路径找到的代码执行一遍。在b页面中如果console.log(b)，b相当于接收了这个方法的返回值。--> 每一个js文件生成的闭包都是 :
(function (exports,require,module,__dirname,__filename) {
//?？榛?返回对象 暴露接口
//__dirname __filename 是通过外界传进来的，所以可以在文件中访问
exports = module.exports = {};
return module.exports;
//如果导出的是引用数据类型 用module.exports =Function
})();
// 返回值是 return module.exports就是一个空对象.如果不想返回一个空对象，需要在a页面中把module.exports改了。
exports = module.exports = somethings
等价于
module.exports = somethings
exports = module.exports
原理很简单，即 module.exports 指向新的对象时，exports 断开了与 module.exports 的引用，那么通过 exports = module.exports 让 exports 重新指向 module.exports 即可。
详解ES6 MODULE(前端?？榛那魇?，其他的迟早淘汰)
http://08643.cn/p/d49c4427a442#module
NPM是世界中最流行的js模块管理平台
- 官网：https://www.npmjs.com/
- 使用：
1. 初始化项目:npm init
2. 下载?？?npm install
3. npm与package.json : http://08643.cn/p/b33646395dd2
模块化工具webpack
参阅：http://08643.cn/p/5352110fe626
前端?？榛胱榧?/h3>
- 在程序代码可以通过模块化进行解耦后，组件化开发便能借此进一步推进项目程序的工程化进度。而组件化开发更是?？榛⒌母呒短逑?。同一内容块可以抽象化为一个组件，并在生产中重复使用，配合虚拟滚动视图，更好的发挥浏览器的性能。
- 在Vue.js和React这两个框架中，?？榛妥榧岷系乃枷胗凶藕芎玫奶逑?。
- 区别：
- 组件化更多关注的是UI部分，你看到的一个管理界面的弹出框，头部，内容区，确认按钮和页脚都可以是个组件，这些组件可以组成一个弹出框组件，跟其他组件组合又是一个新的组件。
- 模块化侧重于功能或者数据的封装，一组相关的组件可以定义成一个?？?，一个暴露了通用验证方法的对象可以定义成一个模块，一个全局的json配置文件也可以定义成一个?？?。
![]()
组件化和模块化.jpg
![]()
eg.jpg
ps: 前端项目开发过程： https://github.com/fouber/blog/issues/10
组件化和模块化.jpg
eg.jpg
