模块化

1 为什么要模块化？ 在阮一峰的博客中已经阐述得非常清楚了 http://www.ruanyifeng.com/blog/2012/11/require_js.html 2 模块化编程 模块化也就是加载js，加载js依赖的管理和使用过程，由于js存在同步和异步加载模式相应的也就有了同步和异步加载模式，即cmd，amd同步主要用于加载时间很短，比如nodejs的本地加载，而异步加载amd则用于 很耗时间的场景中。这些都是有commonjs规范中制约着。 3 AMD的实现 requirejs，和curljs两者都实现了amd加载的方式，实际项目中requirejs使用较多 4 requirejs 其实requirejs有一个js目录的约定吧，他约定我们的js目录如下，appjs为我们的模块入口 www/ index.html js/ app/ sub.js lib/ jquery.js canvas.js app.js 1）requirejs加载js模块 通过require.config配置的paths进行，这里有一个根目录即baseUrl，这个很好理解，即js所在的相对根目录吧。 通paths配置的都不是直接在baseUrl目录下的js文件，他们可能是在本地其他目录，页可能是在网络cdn中 如 paths : { "jquery" : ["https://cdn.bootcss

一、原始写法 模块就是实现特定功能的一组方法。 只要把不同的函数（以及记录状态的变量）简单地放在一起，就算是一个模块。 　　function m1(){ 　　　　//... 　　} 　　function m2(){ 　　　　//... 　　} 上面的函数m1()和m2()，组成一个模块。使用的时候，直接调用就行了。 这种做法的缺点很明显："污染"了全局变量，无法保证不与其他模块发生变量名冲突，而且模块成员之间看不出直接关系。 二、对象写法 为了解决上面的缺点，可以把模块写成一个对象，所有的模块成员都放到这个对象里面。 　　var module1 = new Object({ 　　　　_count : 0, 　　　　m1 : function (){ 　　　　　　//... 　　　　}, 　　　　m2 : function (){ 　　　　　　//... 　　　　} 　　}); 上面的函数m1()和m2(），都封装在module1对象里。使用的时候，就是调用这个对象的属性。 　　module1.m1(); 但是，这样的写法会暴露所有模块成员，内部状态可以被外部改写。比如，外部代码可以直接改变内部计数器的值。 　　module1._count = 5; 三、立即执行函数写法 使用"立即执行函数"（Immediately-Invoked Function Expression，IIFE）

1.原始写法 模块就是实现特定功能的一组方法。 只要把不同的函数（以及记录状态的变量）简单的放在一起，就算是一个模块。 1 function m1(){ 2 　　//... 3 } 4 function m2(){ 5 　　//... 6 } 上面的m1()和m2()，组成一个模块。使用的时候，直接调用。 这种写法的缺点：“污染”了全局变量，无法保证不与其他模块变量名发生冲突，而且模块成员之间看不出直接关系。 2.对象写法 为了解决上面的缺点，可以把模块写成一个对象的形式，所有的模块成员都放在对象里： var module1 = new Object({ 　　_count : 0, 　　m1 : function (){ 　　　　//... 　　}, 　　m2 : function (){ 　　　　//... 　　} }); 上面的函数m1()和m2()，都封装在module1对象里 ，使用的时候就是调用这个对象的属性。 module1.m1() 但是这样的写法会暴露所有模块成员，内部状态可以被外部改写。 module1._count = 5; 3.立即执行函数写法 使用"立即执行函数"（Immediately-Invoked Function Expression，IIFE），可以达到不暴露私有成员的目的。 var module1 = (function(){ 　　var

一，原始写法 模块就是实现特定功能的一组方法。 只要把不同的函数（以及记录状态的变量）简单地放在一起，就算是一个模块。 function m1 () { //..... } function () { //...... } 这是最初级的写法，这样m1(),m2()，组成一个模块。使用的时候，直接调用就行了， 这种做法的缺点很明显：“污染”了全局变量，无法保证不与其他模块发生变量名冲突，而且模块成员之间看不出直接关系。 二，对象写法 为了解决上面的缺点，可以把模块写成一个对象，所有的模块成员都放到这个对象里面。 varmodule1 = newObject({ _count :0, m1 : function() { }, m2 : function() { } }); 上面的函数m1()和m2()，都封装在module1对象里。使用的时候，就是调用这个对象的属性。 module1.m1(); 但是,这样的写法会暴露所有的模块成员，内部状态可以被外部改写。比如外部代码可以直接改变内部计数器的值。 module1._count = 5; 三，立即执行函数写法 使用“立即执行函数”，可以达到不暴露私有成员的目的。 var module1=(function() { var _count = 0; var m1 = function() { console.log("m1"); };

/** * CommonJS 模块化规范 * CommonJS规范加载模块是同步的，也就是说，只有加载完成，才能执行后面的操作 */ /*-------Node.js遵循Commonjs规范---------*/ //写法1. var exports=module.exports; exports.name="leyi"; exports.fn=function(){ return 'hello world!' }; //写法2. module.exports={ "name":'leyi', "fn":function(){ return 'hello world!' } }; //写法3. module.exports=function(){ this.name='leyi'; this.fn=function(){ return 'hello world!' } }; /** * AMD 模块化规范 -推崇依赖前置 * AMD规范则是非同步加载模块，允许指定回调函数。由于Node.js主要用于服务器编程，模块文件一般都已经存在于本地硬盘， * 所以加载起来比较快，不用考虑非同步加载的方式，所以CommonJS规范比较适用。 * 但是，如果是浏览器环境，要从服务器端加载模块，这时就必须采用非同步模式，因此浏览器端一般采用AMD规范。 */ /*-------require

一、为什么要用require.js？ 最早的时候，所有Javascript代码都写在一个文件里面，只要加载这一个文件就够了。后来，代码越来越多，一个文件不够了，必须分成多个文件，依次加载。下面的网页代码，相信很多人都见过。 　　<script src="1.js"></script> 　　<script src="2.js"></script> 　　<script src="3.js"></script> 　　<script src="4.js"></script> 　　<script src="5.js"></script> 　　<script src="6.js"></script> 这段代码依次加载多个js文件。 这样的写法有很大的缺点。首先，加载的时候，浏览器会停止网页渲染，加载文件越多，网页失去响应的时间就会越长；其次，由于js文件之间存在依赖关系，因此必须严格保证加载顺序（比如上例的1.js要在2.js的前面），依赖性最大的模块一定要放到最后加载，当依赖关系很复杂的时候，代码的编写和维护都会变得困难。 require.js的诞生，就是为了解决这两个问题： 　　 　　（1）实现js文件的异步加载，避免网页失去响应； 　　（2）管理模块之间的依赖性，便于代码的编写和维护。 二、require.js的加载 使用require.js的第一步，是先去官方网站 下载 最新版本。

1. 前端模块化 Js模块化提供了三种规范 1，commonjs 规范 代表就是nodejs 适合后台开发 因为是同步的 服务器的运行比较快等待时间不长，commonjs不适合用于前端，前端的客户端是浏览器，浏览器追求异步加载，浏览器不能等待太长时间。 2，前端模块的规范是Amd规范 代表就是requirejs，他是异步的，很多前端框架都是用的amd规范，比如jquery angular等 3，第三个模块化规范是而es6 2.模块化的操作 1.Commonjs的操作 所有的模块化都是两个方向，暴露模块接口和引入模块。 Module.exports={} 暴露的是一个叫exports的对象 Require() 引入一个模块 这是后台的规范，在nodejs环境可以直接运行，但是在客户端不能直接运行，需要对文件打包解析。Webpack gulp 浏览器是一个对象，在 window 对象 　　在 window 中查找 　　方法也是属性，属性值是 function 　　作用域： 　　　　当执行 js 代码时，浏览器会给一个全局环境，叫window，作用域分两部分，一个是内存部分，一个是执行部分，代码从上到下执行，碰到变量， 　　就会在 window 中（内存部分） 查找这个变量是否存在，存在便看赋值了没有，赋值了便是后面的值，没赋值 undefined ， 没声明这个变量 xxx is

模块化的开发方式可以提高代码复用率，方便进行代码的管理。通常一个文件就是一个模块，有自己的作用域，只向外暴露特定的变量和函数。目前流行的js模块化规范有CommonJS、AMD、CMD以及ES6的模块系统。本文主要介绍各规范下的模块化实现方式。 一、CommonJS Node.js是commonJS规范的主要实践者，它有四个重要的环境变量为模块化的实现提供支持：module、exports、require、global。实际使用时，用module.exports定义当前模块对外输出的接口（不推荐直接用exports），用require加载模块。 //定义模块math.js var basicNum = 0; function add(a, b) { return a + b; } module.exports = { //在这里写上需要向外暴露的函数、变量 add: add, basicNum: basicNum } //引用自定义的模块时，参数包含路径，可省略.js var math = require(‘./math‘); math.add(2, 5); //引用核心模块时，不需要带路径 var http = require(‘http‘); http.createService(...).listen(3000); 　　commonJS用同步的方式加载模块。在服务端

基本思路 1. 为什么要做组件化？ 无论前端也好，后端也好，都是整个软件体系的一部分。软件产品也是产品，它的研发过程也必然是有其目的。绝大多数软件产品是追逐利润的，在产品目标确定的情况下，成本有两个途径来优化：减少部署成本，提高开发效率。 减少部署成本的方面，业界研究得非常多，比如近几年很流行的“去IOE”，就是很典型的，从一些费用较高的高性能产品迁移到开源的易替换的产品集群，又比如使用Linux + Mono来部署.net应用，避开Windows Server的费用。 提高开发效率这方面，业界研究得更多，主要途径有两点：加快开发速度，减少变更代价。怎样才能加快开发速度呢？如果我们的开发不是重新造轮子，而是 每一次做新产品都可以利用已有的东西，那就会好很多。怎样才能减少变更代价呢？如果我们能够理清模块之间的关系，合理分层，每次变更只需要修改其中某个部 分，甚至不需要修改代码，仅仅是改变配置就可以，那就更好了。 我们先不看软件行业，来看一下制造行业，比如汽车制造业，他们是怎么造汽车的呢？造汽车之前，先设计，把整个汽车分解为不同部件，比如轮子，引擎，车门， 座椅等等，分别生产，最后再组装，所以它的制造过程可以较快。如果一辆汽车轮胎被扎破了，需要送去维修，维修的人也没有在每个地方都修一下，而是只把轮胎 拆下来修修就好了，这个轮胎要是实在坏得厉害，就干脆换上个新的，整个过程不需要很多时间。

在实际的应用开发中，常用到的网络框架有OkHttp、Retrofit、RxJava+RxAndroid，每个框架都有自己的优点：例如OkHttp，因为其特有的拦截器责任链模式，可以拦截请求和响应；Retrofit内部封装OkHttp，它更高效在于使用注解封装Http请求，在之前Retrofit中也使用过；RxJava的优势在于它的操作符，事件的转换。 每个框架都有自己的优点，因此通过整合全部的请求框架，来实现多域名、多环境、结构清晰的网络模块，因此在项目封装网络请求模块势在必行。 1、基础理论 首先先介绍一下Http中请求和响应的报文格式。 （1）get请求报文格式 ------ 第一部分：请求行 主要包括请求方法GET、URL（接口）、协议版本（Http1.0或者Http1.1） ------第二部分：请求头 Host：域名（www.xxxxx.xxx）、Connection（如果是Http1.1会默认是长连接 Keep Alive）、与Accept相关的字段（像Accept-Language、Accept-Encoding）… （2）get请求响应报文 ------第一部分：响应行 状态码、状态码描述、协议版本 ------第二部分：响应头 Server：服务器端的描述、Connection：长连接、响应的类型Content-type：json数据。。。。。。 -----