解决问题:
1.命名冲突
2.文件依赖问题
什么是模块化
将软件产品看作一系列功能模块的组合,
通过特定的方式实现软件所需模块的划分、管理、加载。
模块化开发演变
全局函数
- 命名冲突
- 文件依赖的问题
<script type="text/javascript">
//命名冲突 代码写的可读性差而且没法完整的写在一块
var add=function(v1,v2){
return v1+v2;
}
var substract=function(v1,v2){
return v1-v2;
}
var getDate=function(){
return new Date();
}
var mutiply=function(v1,v2){
return v1*v2;
}
var divide=function(v1,v2){
return v1/v2;
}
var add=123;
</script>
对象封装
- 用命名空间的方式进行封装
- 先约定命名的规范的形式(驼峰命名法、匈牙利命名法(例如:(fnCalculate、numB)))
- 对象里面的属性和方法很容易被修改掉,很不安全
<script type="text/javascript">
//命名空间法是通过,约定的方式定义的
//是可以解决命名冲突问题的,但是很牵强
//驼峰命名,匈牙利命名法
//没法做私有性封装
var calculator={
a:123;
}
calculator.add=function(v1,v2){
return v1+v2;
}
calculator.substract=function(v1,v2){
return v1-v2;
}
calculator.mutiply=function(v1,v2){
return v1*v2;
}
calculator.divide=function(v1,v2){
return v1/v2;
}
calculator.a=123;
</script>
划分私有空间
- 通过匿名函数自执行的方法封装模块,返回值的方式得到模块的公共成员
- 可以保护私有变量和方法,有选择的对外暴露自身成员
- 从某种意义上来说解决变量命名冲突的问题
<script type="text/javascript">
//封装性 划分私有空间
//还是需要约定
var calculator=(function(){
var a=123;
var add=function(v1,v2){
return v1+v2;
}
var substract=function(v1,v2){
return v1-v2;
}
var mutiply=function(v1,v2){
return v1*v2;
}
var divide=function(v1,v2){
return v1/v2;
}
return {
add:add,
substract:substract,
mutiply:mutiply,
divide:divide
}
})()
var cal=calculator;
cal.add(1,1);
</script>
模块的维护扩展
- 开闭原则,对修改关闭,对扩展开放。
- 增加了代码的健壮性和容错性
<script>
var calculate={
add:function(v1,v2){
return v1+v2;
}
}
</script>
//扩展:
<script>
var calculate = (function(cal){
cal.sub=function(v1,v2){
return v1-v2;
}
})(window.calculate||{});
</script>
模块的第三方依赖
- 模块职责唯一性
- 把依赖的模块,通过依赖注入的形式,在你的参数上进行体现。(沙箱思想)
(function(win,$){
//依赖注入
})(window,window.$);
总结
- 最大的问题,规范的问题
- 多人协作开发过程中:代码的风格一定要统一
模块化规范
服务器端模块化规范
CommonJS ->nodejs
浏览器端模块化规范
- AMD
- RequireJS
- CMD
- SeaJS
commonjs - node.js
- SeaJS
SeaJS
一个基于CMD规范实现的模块化开发解决方案
整体感知
特性:
- 简单友好的模块定义规范
- 自然直观的代码组织方式
哲学:一切皆模块
基本使用
定义模块 define
- 定义模块 define(function(){})
- 函数体内的方法属性都属于这个方法,对外有封装性;
- 解决了命名冲突问题,使js代码有了封装性
- 直接调用 jQuery 插件等非标准模块的方法:
http://my.oschina.net/briviowang/blog/208587
启动模块 seajs.use
- 加载入口模块,我们把define定义的js就叫模块
- 这个用于在html代码里面的加载
加载模块 require
-加载文件依赖、模块依赖的,用于define函数体内
暴露接口 exports 和 module.exports
- module.exports曝露出一个完整的对象,只能扔一次只能曝露出来一个
- exports是module.exports的别名,可以用来单个属性、方法、对象的曝露,用.的形式,exports能做的事情module.exports也可以做
requirejs与seajs的区别
- requirejs是优先加载的
- seajs是懒加载的,就是有拖延症,用的时候才加载
http://www.requirejs.cn/