SeaJS+RequireJS+模块儿化开发相关笔记（一）
1.网站越来越复杂，js代码，js文件也越来越多了，会遇到以下问题。
【
◆命名冲突问题，代码的可读性差，没办法完整的写到一块儿，团队协作开发，不同开发人员的变量和函数命名可能相同
◇解决方案一：命名空间法，添加一个命名空间，把某一块儿代码放到一个命名空间里，命名空间法是通过约定的方式定义的，var calculator={
a:123,
add:function(){},
substract:function(){},
mutiply:function(){}
};calculator.divide=function(){};，但是如果没有约定好，那么别人直接一行 calculator=0;，那么你的代码全部没有用了，虽然可以解决命名冲突的问题，但是很牵强。
◇驼峰命名法
◇匈牙利命名法：如定义一个函数，var fnCalc;如定义一个数字，var numB;如定义一个字符串strName;，先写这个变量的类型然后再写变量名，很多年前的，一般用于弱类型，可以百度查查。
◇解决方案二：使用匿名函数的封装性划分私有空间，外面就调用不了你空间里的方法和属性，除了你自己愿意暴露，这个解决方案已经是极限了
【
var calculator=(
function(){
var add=funciton(v1,v2){
return v1+v2;
}
var divide=funciton(v1,v2){
return v1/v2;
}
//向外暴露 add ，但是divide没有暴露
return {
add:add
}
})()
】，但是如果还是有与方案一一样的问题，但是如果使用MD5将变量名给加密，那样就可能好一点，最好还是需要约定一下，比如开闭原则，对直接修改关闭，对扩展开放，例子如下，对原本的calculator进行扩展，或者自定义
【
//开闭原则，对直接修改关闭，对扩展开放
var calculator=(function(cal){
cal.mod=function(v1,v2){
return v1%v2;
}
return cal;
})(window.calculator||{});//参数的意义是，如果calculator存在，我就传进去，这样就是扩展，如果不存在，那么我传递一个空对象进行，那么就是自定义
】
】
◆文件依赖问题，代码重用时，引入 js 文件的数目可能少了或者引入的顺序不对
【
◇第一种方案：【
//自己写的一个计算器
var calculator=(
function(){
var add=funciton(v1,v2){
return v1+v2;
}
var divide=funciton(v1,v2){
return v1/v2;
}
//向外暴露 add ，但是divide没有暴露
return {
add:add
}
})();
//对原来的计算器做扩展
var calculator=(function(cal,$){
cal.add2=function(){
var v1=$('#v1').val();
var v2=$('#v2').val();
return (v1-0)+(v2-0);
}
return cal;
})(window.calculator||{},window.$);
//这么做就是将$传递进去了，并且，就算你引入jQuery在这个代码之后，也可以使用，因为你将jQuery传递进去了，而且还可以告诉别人，自己这个计算器是依赖jQuery的，看参数就很明显了，这种方式很像angularJS中的依赖注入。
】
◇依赖注入，在参数里面告诉你，然后才会去加载，谁帮我加载，我告诉谁，很牵强的解决文件依赖问题的方法，如果对方就是不给你加载，那么就没有办法，只能够提一个醒。
◇
】
◆
2.模块儿生产的优点
◆生产效率高：直接组装就是成品。
◆便于维护：维修方便，哪儿块儿坏了就换哪块儿。
◆现实生活中模块化的例子：模块化计算机、谷歌模块化手机、模块化房屋
◆代码模块化例子：日期模块、数学计算模块、日志模块
◆生产角度： 一种生产方式，生产效率高，维护成本低。
◆软件开发角度：就是一种开发模式，写代码的一种方式，开发效率高，方便后期维护。
◆
3.程序模块儿化
◆日期模块
◆数学计算模块
◆日志模块
◆登陆认证模块
◆报表展示模块
◆。。。。。。
◆所有这些模块共同组成了程序软件系统
4.程序模块化开发优点
◆开发效率高
◇代码方便重用，别人开发的模块直接拿过来就可以使用，不需要重复开发类似的功能
◆方便后期维护
◇软件的声明周期中最长的阶段其实并不是开发阶段, 而是维护阶段，需求变更比较频繁，使用模块化的开发方式更容易维护
5.模块儿化开发演变过程
◆全局函数：“污染”了全局变量，无法保证不与其它模块发生变量名冲突，模块成员之间看不出直接关系
◆对象封装 – 命名空间：暴露了所有的模块成员，内部状态可以被外部改写，不安全命名，空间越来越长
◆私有共有成员分离：私有空间的变量和函数不会影响全局作用域，公开公有方法，隐藏私有空间内部的属性、元素。（使用匿名函数的封装性划分私有空间）。
6.模块儿化规范
◆服务器端规范：
◇CommonJS（http://www.commonjs.org/）
◇Node.js（https://nodejs.org/）
◆浏览器端规范：
◇AMD（https://github.com/amdjs/amdjs-api）
◇RequireJS（http://requirejs.org/）
◇CMD （https://github.com/amdjs/amdjs-api）
◇SeaJS（http://seajs.org/）
◆
7.辅助开发模块儿化JS的工具
◆SeaJS
◇一个基于CMD规范实现的模块化开发解决方案
◇作者：Alibaba 玉伯
◇官网：http://seajs.org/(老)、https://seajs.github.io/seajs/(新)
◇github：https://github.com/seajs/seajs
◇特性：简单友好的模块定义规范、自然直观的代码组织方式
◇哲学：一切皆模块
◇遵循MIT协议，对一切开源，谁都可以免费试用，但是不能忘记作者。
◆
10.SeaJS的使用
◆开发(development)环境相当于：jquery.js原版，使用的时候没有那么多讲究
◆生产(production)环境相当于：jquery.min.js压缩版，就是上线了，会注意很多地方，比如这时候用的jquery是压缩过的
◆SeaJS所在的路径为默认根目录
◆cmd规范：define()是用来定义模块儿的，和angluar.module()一样也是用来定义模块儿的。
◆require：加载JS
◆config：配置【
seajs.config({
base:'定义根目录',
alias:{
'别名'：'路径'//方便调用
}
})
】
◆exports=>相当于retrun，给它赋值相当于return value，无论是exports还是module.exports都是向外暴露，他们都是一个对象，也可用通过.或者[]的方式来给它们添加属性或者方法。
★使用seajs注意，记住要知道
☆exports是一样的module.exports，都相当于向外暴露属性或者方法
☆require是在js中引入其它模块儿的，会返回一个对象，而这个对像就是exports
☆注意cmd规范，规范就是必须用define(function(require, exports, module){})包起来，{}中写你的代码。
☆可以通过配置seajs.config()，可以设置根目录，还有可以设置某一个模块儿的路径的别名，这样在其它文件中引入其它模块儿的时候可以使用别名
☆在html页面中通过seajs.use()来引入并且启动main.js，这个main.js就是外观模式，特别重要。
☆seajs.use(path,callback)，seajs也可以进行异步操作，如使用callback，
seajs.use('main.js',function(obj){
//这里面的obj其实是main传递过来的数据，可以是一个函数或者一个对象。
})
☆一个模块儿对应一个js文件，并且seajs.use()与window.load没有任何关系，所以如果你想在页面文档加载完毕之后执行，就需要自己加window.load。
◆
◆
◆
◆
◆
◆
11.requirejs与seajs的区别
◆requirejs是优先加载的，seajs是懒加载的，就是会在用的时候才去加载。
◆requirejs：http://www.requirejs.cn/
◆无论是seajs还是requirejs其实都很像是设计模式里面的外观模式，它们的main.js就是对所有模块儿进行整合，这样就只需要引入一个main.js了。
◆无论是requirejs还是seajs都是在一个js中引入其它的js，这个你直接那么做是不可能的，js中无法引入其它js
◆原理都是通过创建script标签来引入js的，但是这个步骤不再由你自己来实现，而是由requirejs与seajs，你只需要注重模块儿，然后按照规范去用，就可以了。
◆例如你要使用jQuery和jQuery的很多很多插件，你可以使用将这些组合起来，放到main.js中，那样你就只需要引入main.js这一个就行了，还不需要将jQuery和jQuery的很多插件压缩到一起。
◆模块儿化除了解决了大量文件的引入，还解决的命名冲突的问题，因为它最后向外暴露了一个对象，你使用这个对象即可，以及文件依赖存在的顺序问题，你可以在main.js中去处理，不需要你在html文件中去处理，非常好。
◆在ecma6里面，是可以直接引入原生js的，所以requirejs与seajs只是让你学习模块儿化的好处罢了，ecma6只是在一些比较新的浏览器中可以使用，还是存在兼容性的问题。
【
◆命名冲突问题，代码的可读性差，没办法完整的写到一块儿，团队协作开发，不同开发人员的变量和函数命名可能相同
◇解决方案一：命名空间法，添加一个命名空间，把某一块儿代码放到一个命名空间里，命名空间法是通过约定的方式定义的，var calculator={
a:123,
add:function(){},
substract:function(){},
mutiply:function(){}
};calculator.divide=function(){};，但是如果没有约定好，那么别人直接一行 calculator=0;，那么你的代码全部没有用了，虽然可以解决命名冲突的问题，但是很牵强。
◇驼峰命名法
◇匈牙利命名法：如定义一个函数，var fnCalc;如定义一个数字，var numB;如定义一个字符串strName;，先写这个变量的类型然后再写变量名，很多年前的，一般用于弱类型，可以百度查查。
◇解决方案二：使用匿名函数的封装性划分私有空间，外面就调用不了你空间里的方法和属性，除了你自己愿意暴露，这个解决方案已经是极限了
【
var calculator=(
function(){
var add=funciton(v1,v2){
return v1+v2;
}
var divide=funciton(v1,v2){
return v1/v2;
}
//向外暴露 add ，但是divide没有暴露
return {
add:add
}
})()
】，但是如果还是有与方案一一样的问题，但是如果使用MD5将变量名给加密，那样就可能好一点，最好还是需要约定一下，比如开闭原则，对直接修改关闭，对扩展开放，例子如下，对原本的calculator进行扩展，或者自定义
【
//开闭原则，对直接修改关闭，对扩展开放
var calculator=(function(cal){
cal.mod=function(v1,v2){
return v1%v2;
}
return cal;
})(window.calculator||{});//参数的意义是，如果calculator存在，我就传进去，这样就是扩展，如果不存在，那么我传递一个空对象进行，那么就是自定义
】
】
◆文件依赖问题，代码重用时，引入 js 文件的数目可能少了或者引入的顺序不对
【
◇第一种方案：【
//自己写的一个计算器
var calculator=(
function(){
var add=funciton(v1,v2){
return v1+v2;
}
var divide=funciton(v1,v2){
return v1/v2;
}
//向外暴露 add ，但是divide没有暴露
return {
add:add
}
})();
//对原来的计算器做扩展
var calculator=(function(cal,$){
cal.add2=function(){
var v1=$('#v1').val();
var v2=$('#v2').val();
return (v1-0)+(v2-0);
}
return cal;
})(window.calculator||{},window.$);
//这么做就是将$传递进去了，并且，就算你引入jQuery在这个代码之后，也可以使用，因为你将jQuery传递进去了，而且还可以告诉别人，自己这个计算器是依赖jQuery的，看参数就很明显了，这种方式很像angularJS中的依赖注入。
】
◇依赖注入，在参数里面告诉你，然后才会去加载，谁帮我加载，我告诉谁，很牵强的解决文件依赖问题的方法，如果对方就是不给你加载，那么就没有办法，只能够提一个醒。
◇
】
◆
2.模块儿生产的优点
◆生产效率高：直接组装就是成品。
◆便于维护：维修方便，哪儿块儿坏了就换哪块儿。
◆现实生活中模块化的例子：模块化计算机、谷歌模块化手机、模块化房屋
◆代码模块化例子：日期模块、数学计算模块、日志模块
◆生产角度： 一种生产方式，生产效率高，维护成本低。
◆软件开发角度：就是一种开发模式，写代码的一种方式，开发效率高，方便后期维护。
◆
3.程序模块儿化
◆日期模块
◆数学计算模块
◆日志模块
◆登陆认证模块
◆报表展示模块
◆。。。。。。
◆所有这些模块共同组成了程序软件系统
4.程序模块化开发优点
◆开发效率高
◇代码方便重用，别人开发的模块直接拿过来就可以使用，不需要重复开发类似的功能
◆方便后期维护
◇软件的声明周期中最长的阶段其实并不是开发阶段, 而是维护阶段，需求变更比较频繁，使用模块化的开发方式更容易维护
5.模块儿化开发演变过程
◆全局函数：“污染”了全局变量，无法保证不与其它模块发生变量名冲突，模块成员之间看不出直接关系
◆对象封装 – 命名空间：暴露了所有的模块成员，内部状态可以被外部改写，不安全命名，空间越来越长
◆私有共有成员分离：私有空间的变量和函数不会影响全局作用域，公开公有方法，隐藏私有空间内部的属性、元素。（使用匿名函数的封装性划分私有空间）。
6.模块儿化规范
◆服务器端规范：
◇CommonJS（http://www.commonjs.org/）
◇Node.js（https://nodejs.org/）
◆浏览器端规范：
◇AMD（https://github.com/amdjs/amdjs-api）
◇RequireJS（http://requirejs.org/）
◇CMD （https://github.com/amdjs/amdjs-api）
◇SeaJS（http://seajs.org/）
◆
7.辅助开发模块儿化JS的工具
◆SeaJS
◇一个基于CMD规范实现的模块化开发解决方案
◇作者：Alibaba 玉伯
◇官网：http://seajs.org/(老)、https://seajs.github.io/seajs/(新)
◇github：https://github.com/seajs/seajs
◇特性：简单友好的模块定义规范、自然直观的代码组织方式
◇哲学：一切皆模块
◇遵循MIT协议，对一切开源，谁都可以免费试用，但是不能忘记作者。
◆
10.SeaJS的使用
◆开发(development)环境相当于：jquery.js原版，使用的时候没有那么多讲究
◆生产(production)环境相当于：jquery.min.js压缩版，就是上线了，会注意很多地方，比如这时候用的jquery是压缩过的
◆SeaJS所在的路径为默认根目录
◆cmd规范：define()是用来定义模块儿的，和angluar.module()一样也是用来定义模块儿的。
◆require：加载JS
◆config：配置【
seajs.config({
base:'定义根目录',
alias:{
'别名'：'路径'//方便调用
}
})
】
◆exports=>相当于retrun，给它赋值相当于return value，无论是exports还是module.exports都是向外暴露，他们都是一个对象，也可用通过.或者[]的方式来给它们添加属性或者方法。
★使用seajs注意，记住要知道
☆exports是一样的module.exports，都相当于向外暴露属性或者方法
☆require是在js中引入其它模块儿的，会返回一个对象，而这个对像就是exports
☆注意cmd规范，规范就是必须用define(function(require, exports, module){})包起来，{}中写你的代码。
☆可以通过配置seajs.config()，可以设置根目录，还有可以设置某一个模块儿的路径的别名，这样在其它文件中引入其它模块儿的时候可以使用别名
☆在html页面中通过seajs.use()来引入并且启动main.js，这个main.js就是外观模式，特别重要。
☆seajs.use(path,callback)，seajs也可以进行异步操作，如使用callback，
seajs.use('main.js',function(obj){
//这里面的obj其实是main传递过来的数据，可以是一个函数或者一个对象。
})
☆一个模块儿对应一个js文件，并且seajs.use()与window.load没有任何关系，所以如果你想在页面文档加载完毕之后执行，就需要自己加window.load。
◆
◆
◆
◆
◆
◆
11.requirejs与seajs的区别
◆requirejs是优先加载的，seajs是懒加载的，就是会在用的时候才去加载。
◆requirejs：http://www.requirejs.cn/
◆无论是seajs还是requirejs其实都很像是设计模式里面的外观模式，它们的main.js就是对所有模块儿进行整合，这样就只需要引入一个main.js了。
◆无论是requirejs还是seajs都是在一个js中引入其它的js，这个你直接那么做是不可能的，js中无法引入其它js
◆原理都是通过创建script标签来引入js的，但是这个步骤不再由你自己来实现，而是由requirejs与seajs，你只需要注重模块儿，然后按照规范去用，就可以了。
◆例如你要使用jQuery和jQuery的很多很多插件，你可以使用将这些组合起来，放到main.js中，那样你就只需要引入main.js这一个就行了，还不需要将jQuery和jQuery的很多插件压缩到一起。
◆模块儿化除了解决了大量文件的引入，还解决的命名冲突的问题，因为它最后向外暴露了一个对象，你使用这个对象即可，以及文件依赖存在的顺序问题，你可以在main.js中去处理，不需要你在html文件中去处理，非常好。
◆在ecma6里面，是可以直接引入原生js的，所以requirejs与seajs只是让你学习模块儿化的好处罢了，ecma6只是在一些比较新的浏览器中可以使用，还是存在兼容性的问题。
