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只是在一些比较新的浏览器中可使用，仍是存在兼容性的问题。