| 注册
请输入搜索内容

热门搜索

Java Linux MySQL PHP JavaScript Hibernate jQuery Nginx
StephenSlat
7年前发布

JavaScript中的模块化开发

   <h2>一、为什么会有模块化</h2>    <p>1. 当一个项目开发的越来越复杂的时候,会遇到一些问题,比如:</p>    <ul>     <li> <p>命名冲突:当项目由团队进行协作开发的时候,不同开发人员的变量和函数命名可能相同;即使是一个开发,当开发周期比较长的时候,也有可能会忘记之前使用了什么变量,从而导致重复命名,导致命名冲突。</p> </li>     <li> <p>文件依赖:代码重用时,引入js文件的数目可能少了,或者引入的顺序不对,比如使用boostrap的时候,需要引入jQuery,并且jQuery的文件必须要比boostrap的js文件先引入。</p> </li>    </ul>    <p>2. 当使用模块化开发的时候可以避免以上的问题,并且让开发的效率变高,以及方便后期的维护:</p>    <ul>     <li> <p>提升开发效率:代码方便重用,别人开发的模块直接拿过来就可以使用,不需要重复开发法类似的功能。</p> </li>     <li> <p>方便后期维护:代码方便重用,别人开发的模块直接拿过来就可以使用,不需要重复开发法类似的功能。</p> </li>    </ul>    <p>所以总结来说,在生产角度,模块化开发是一种生产方式,这种方式生产效率高,维护成本低。从软件开发角度来说,模块化开发是一种开发模式,写代码的一种方式,开发效率高,方便后期维护。</p>    <h2>二、模块化开发的演变过程</h2>    <p>1. 全局函数</p>    <pre>  <code class="language-javascript">function add(a , b) {      return parseFloat(a) + parseFloat(b);  }  function substract(a ,b) {}  function multiply(a ,b) {}  function divide(a ,b) {}</code></pre>    <p>在早期的开发过程中就是将重复的代码封装到函数中,再将一系列的函数放到一个文件中,这种情况下全局函数的方式只能认为的认为它们属于一个模块,但是程序并不能区分哪些函数是同一个模块,如果仅仅从代码的角度来说,这没有任何模块的概念。</p>    <p>存在的问题:</p>    <ul>     <li>污染了全局变量,无法保证不与其他模块发生变量名冲突。</li>     <li>模块成员之间看不出直接关系。</li>    </ul>    <p>2. 对象封装-命名空间</p>    <pre>  <code class="language-javascript">var calculator = {    add: function(a, b) {      return parseFloat(a) + parseFloat(b);    },    subtract: function(a, b) {},    multiply: function(a, b) {},    divide: function(a, b) {}  };</code></pre>    <p>通过添加命名空间的形式从某种程度上解决了变量命名冲突的问题,但是并不能从根本上解决命名冲突。 不过此时从代码级别可以明显区分出哪些函数属于同一个模块。</p>    <p>存在的问题:</p>    <ul>     <li>暴露了所有的模块成员,内部状态可以被外部改写,不安全。</li>     <li>命名空间越来越长。</li>    </ul>    <p>3. 私有公有成员分离</p>    <pre>  <code class="language-javascript">var calculator = (function () {      // 这里形成一个单独的私有的空间      // 私有成员的作用:      //   1、将一个成员私有化      //   2、抽象公共方法(其他成员中会用到的)        // 私有的转换逻辑      function convert(input){          return parseInt(input);      }        function add(a, b) {          return convert(a) + convert(b);      }      function subtract(a, b) {}      function multiply(a, b) {}      function divide(a, b) {}      return {          add : add,          subtract : subtract,          multiply : multiply,          divide : divide      }  })();</code></pre>    <ol>     <li>利用此种方式将函数包装成一个独立的作用域,私有空间的变量和函数不会影响到全局作用域。</li>     <li>以返回值的方式得到模块的公共成员,公开公有方法,隐藏私有空间内部的属性、元素,比如注册方法中可能会记录日志。</li>     <li>可以有选择的对外暴露自身成员。</li>     <li>从某种意义上来说,解决了变量命名冲突的问题。</li>    </ol>    <p>4. 模块的扩展与维护</p>    <pre>  <code class="language-javascript">// 计算模块  (function (calculator) {      function convert(input) {          return parseInt(input);      }      calculator.add = function(a, b) {          return convert(a) + convert(b);      }      window.calculator = calculator;  })(window.calculator || {});    // 新增需求  (function (calculator) {      calculator.remain = function (a , b) {          return a % b;      }      window.calculator = calculator;  })(window.calculator || {});    alert(calculator.remain(4,3));</code></pre>    <ol>     <li>利用此种方式,有利于对庞大的模块的子模块划分。</li>     <li>实现了开闭原则:对新增开发,对修改关闭。对于已有文件尽量不要修改,通过添加新文件的方式添加新功能。</li>    </ol>    <p>5. 第三方依赖的管理</p>    <pre>  <code class="language-javascript">(function (calculator , $) {      // 依赖函数的参数,是属于模块内部      // console.log($);      calculator.remain = function (a , b) {          return a % b;      }      window.calculator = calculator;  })(window.calculator || {} , jQuery);</code></pre>    <p>模块最好要保证模块的 <strong>职责单一性</strong> ,最好不要与程序的其他部分直接交互,通过向匿名函数注入依赖项的形式,除了保证模块的独立性,还使模块之间的以来关系变得明显。</p>    <p>对于模块的依赖通过自执行函数的参数传入,这样做可以做到依赖抽象,本例中使用的jQuery,而当要使用zepto的时候,只要更换传入的参数即可。</p>    <p>原则:高内聚低耦合,模块内相关性高,模块间关联低。</p>    <p>总结:在什么场景下使用模块化开发</p>    <ul>     <li>业务复杂</li>     <li>重用逻辑非常多</li>     <li>扩展性要求较高</li>    </ul>    <h2>三、模块化规范</h2>    <p>服务器端规范主要是 CommonJS , node.js 用的就是 CommonJS 规范。</p>    <p>客户端规范主要有: AMD (异步模块定义,推崇依赖前置)、 CMD (通用模块定义,推崇依赖就近)。 AMD 规范的实现主要有 RequireJS , CMD 规范的主要实现有 SeaJS 。 RequireJS 在国外用的比较多, SeaJS 在国内用的比较多,并且 SeaJS 的创始人为阿里的玉伯,所以 SeaJS 在阿里系用的非常广泛,包括京东等大厂也在用 SeaJS ,我们详细介绍的也是 SeaJS 。但是 SeaJS 已经停止维护了,因为在ES6中已经有了模块化的实现,随着ES6的普及,第三方的模块化实现将会慢慢的淘汰(但是这个在国内可能还要很多年)。</p>    <h2>四、SeaJs</h2>    <p>1. SeaJs简介</p>    <ul>     <li>SeaJS 是一个基于CMD规范实现的模块化开发解决方案。</li>     <li>作者:Alibaba 玉伯</li>     <li>Alibaba 玉伯</li>     <li>特性:      <ul>       <li>简单友好的模块化定义规范。</li>       <li>自然直观的代码组织方式。</li>      </ul> </li>     <li>哲学:一切皆模块</li>    </ul>    <p>2. 使用步骤</p>    <ul>     <li>引入sea.js库</li>     <li>定义模块 <pre>  <code class="language-javascript">define(function(require, exports, module){ 模块代码 });</code></pre> </li>     <li>暴露接口      <ul>       <li>exports</li>       <li>module.exports</li>      </ul> </li>     <li>依赖模块 <pre>  <code class="language-javascript">require(‘模块id’)</code></pre> </li>     <li>启动模块系统 <pre>  <code class="language-javascript">seajs.use(‘模块id’,function( 模块对象 ){ 业务代码 });</code></pre> </li>    </ul>    <p>HelloWorld</p>    <ul>     <li>01-convertor.js <pre>  <code class="language-javascript">/**  * 转换模块,到处成员:convertToNumber  */  define(function (require, exports, module) {    exports.convertToNumber = function (input) {        return parseFloat(input);    }  });</code></pre> </li>     <li>01-calculator.js <pre>  <code class="language-javascript">define(function (require, exports, module) {    // 此处是模块的私有空间,定义模块的私有成员    // 载入01-convertor模块    var convertor = require('./01-convertor');    function add(a, b) {        return convertor.convertToNumber(a) + convertor.convertToNumber(b);    }    exports.add = add;  });</code></pre> </li>     <li>01-helloworld.html <pre>  <code class="language-javascript"><!DOCTYPE html>  <html lang="en">  <head>    <meta charset="UTF-8">    <title>Title</title>    <script src="node_modules/seajs/dist/sea.js"></script>    <script>        seajs.use('./01-calculator.js', function (calculator) {            alert(calculator.add(1,2));        });    </script>  </head>  <body>  </body>  </html></code></pre> </li>    </ul>    <p>3. 定义模块define</p>    <ul>     <li> <p>先有规范,后有实现</p> </li>     <li> <p>在CMD规范中, <strong>一个模块就是一个js文件</strong></p> </li>     <li> <p>define是一个全局函数,用来定义模块</p> </li>     <li> <p>define(factory)</p>      <ul>       <li>对象{}这种方式,外部会直接获取到该对象</li>       <li>字符串''同上</li>       <li>函数function( require, exports, module ){ // 模块代码 }        <ul>         <li><strong>注意:</strong> 为了减少出错,定义函数的时候直接把这三个参数写上</li>        </ul> </li>      </ul> </li>    </ul>    <p>factory为对象、字符串时,表示模块的接口就是该对象、字符串。比如可以如下定义一个 JSON 数据模块:</p>    <pre>  <code class="language-javascript">define({ "foo": "bar" });</code></pre>    <p>也可以通过字符串定义模板模块:</p>    <pre>  <code class="language-javascript">define('I am a template. My name is {{name}}.');</code></pre>    <p>factory为函数时,表示是模块的构造方法。执行该构造方法,可以得到模块向外提供的接口。factory方法在执行时,默认会传入三个参数:require、exports和 module:</p>    <pre>  <code class="language-javascript">define(function(require, exports, module) { // 模块代码});</code></pre>    <p>define define(id?, deps?, factory)</p>    <p>define也可以接受两个以上参数。字符串 id表示模块标识,数组 deps是模块依赖。比如:</p>    <pre>  <code class="language-javascript">define('hello', ['jquery'], function(require, exports, module) { // 模块代码});</code></pre>    <p>id和 deps参数可以省略。省略时,可以通过构建工具自动生成。</p>    <p>注意:带 id和 deps参数的 define用法不属于 CMD 规范,而属于 Modules/Transport 规范。</p>    <p>define.cmd Object</p>    <p>一个空对象,可用来判定当前页面是否有 CMD 模块加载器:</p>    <pre>  <code class="language-javascript">if (typeof define === "function" && define.cmd) {       // 有 Sea.js 等 CMD 模块加载器存在  }</code></pre>    <p>require Function</p>    <p>require是 factory函数的第一个参数。</p>    <p>require require(id)</p>    <p>require是一个方法,接受 模块标识 作为唯一参数,用来获取其他模块提供的接口。</p>    <pre>  <code class="language-javascript">define(function(require, exports) {     // 获取模块 a 的接口     var a = require('./a');     // 调用模块 a 的方法     a.doSomething();  });</code></pre>    <p>注意:在开发时,require的书写需要遵循一些 简单约定 。</p>    <p>require.async require.async(id, callback?)</p>    <p>require.async方法用来在模块内部异步加载模块,并在加载完成后执行指定回调。callback参数可选。</p>    <pre>  <code class="language-javascript">define(function(require, exports, module) {    // 异步加载一个模块,在加载完成时,执行回调    require.async('./b', function(b) {      b.doSomething();    });      // 异步加载多个模块,在加载完成时,执行回调    require.async(['./c', './d'], function(c, d) {      c.doSomething();      d.doSomething();    });  });</code></pre>    <p>注意:require是同步往下执行,require.async则是异步回调执行。require.async 一般用来加载可延迟异步加载的模块。</p>    <p>require.resolve require.resolve(id)</p>    <p>使用模块系统内部的路径解析机制来解析并返回模块路径。该函数不会加载模块,只返回解析后的绝对路径。</p>    <pre>  <code class="language-javascript">define(function(require, exports) {    console.log(require.resolve('./b'));    // ==> http://example.com/path/to/b.js  });</code></pre>    <p>这可以用来获取模块路径,一般用在插件环境或需动态拼接模块路径的场景下。</p>    <p>4. exports 和 module.exports</p>    <ul>     <li>功能:通过给 exports或module.exports动态的挂载变量、函数或对象,外部会获取到该接口</li>     <li>exports 等价于 module.exports</li>     <li>可以通过多次给exports 挂载属性向外暴露</li>     <li>不能直接给 exports 赋值</li>     <li>如果想暴露单个变量、函数或对象可以通过直接给module.exports 赋值 即可</li>    </ul>    <p>5. exports Object</p>    <p>exports是一个对象,用来向外提供模块接口。</p>    <pre>  <code class="language-javascript">define(function(require, exports) {    // 对外提供 foo 属性    exports.foo = 'bar';      // 对外提供 doSomething 方法    exports.doSomething = function() {};  });</code></pre>    <p>除了给 exports对象增加成员,还可以使用 return直接向外提供接口。</p>    <pre>  <code class="language-javascript">define(function(require) {    // 通过 return 直接提供接口    return {      foo: 'bar',      doSomething: function() {}    };  });</code></pre>    <p>如果 return语句是模块中的唯一代码,还可简化为:</p>    <pre>  <code class="language-javascript">define({    foo: 'bar',    doSomething: function() {}  });</code></pre>    <p>上面这种格式特别适合定义 JSONP 模块。</p>    <p>特别注意:下面这种写法是错误的!</p>    <pre>  <code class="language-javascript">define(function(require, exports) {    // 错误用法!!!    exports = {      foo: 'bar',      doSomething: function() {}    };  });</code></pre>    <p>正确的写法是用 return或者给 module.exports赋值:</p>    <pre>  <code class="language-javascript">define(function(require, exports, module) {    // 正确写法    module.exports = {      foo: 'bar',      doSomething: function() {}    };  });</code></pre>    <p>提示:exports 仅仅是 module.exports 的一个引用。在 factory 内部给 exports 重新赋值时,并不会改变 module.exports 的值。因此给 exports 赋值是无效的,不能用来更改模块接口。</p>    <p>6. module Object</p>    <p>module是一个对象,上面存储了与当前模块相关联的一些属性和方法。</p>    <p>6.1 module.id String</p>    <p>模块的唯一标识。</p>    <pre>  <code class="language-javascript">define('id', [], function(require, exports, module) {     // 模块代码  });</code></pre>    <p>上面代码中,define的第一个参数就是模块标识。</p>    <p>6.2 module.uri String</p>    <p>根据模块系统的路径解析规则得到的模块绝对路径。</p>    <pre>  <code class="language-javascript">define(function(require, exports, module) {    console.log(module.uri);     // ==> http://example.com/path/to/this/file.js  });</code></pre>    <p>一般情况下(没有在 define 中手写 id 参数时),module.id 的值就是 module.uri,两者完全相同。</p>    <p>6.3 module.dependencies Array</p>    <p>dependencies是一个数组,表示当前模块的依赖。</p>    <p>6.4 module. exports Object</p>    <p>当前模块对外提供的接口。</p>    <p>传给 factory 构造方法的 exports 参数是 module.exports 对象的一个引用。只通过 exports 参数来提供接口,有时无法满足开发者的所有需求。 比如当模块的接口是某个类的实例时,需要通过 module.exports 来实现:</p>    <pre>  <code class="language-javascript">define(function(require, exports, module) {    // exports 是 module.exports 的一个引用    console.log(module.exports === exports); // true      // 重新给 module.exports 赋值    module.exports = new SomeClass();      // exports 不再等于 module.exports    console.log(module.exports === exports); // false  });</code></pre>    <p>注意:对 module.exports 的赋值需要同步执行,不能放在回调函数里。下面这样是不行的:</p>    <pre>  <code class="language-javascript">// x.js  define(function(require, exports, module) {    // 错误用法    setTimeout(function() {      module.exports = { a: "hello" };    }, 0);  });</code></pre>    <p>在 y.js 里有调用到上面的 x.js:</p>    <pre>  <code class="language-javascript">// y.js  define(function(require, exports, module) {    var x = require('./x');      // 无法立刻得到模块 x 的属性 a    console.log(x.a); // undefined  });</code></pre>    <p>7. 小结</p>    <p>这就是 CMD 模块定义规范的所有内容。经常使用的 API 只有 define, require, require.async, exports, module.exports 这五个。其他 API 有个印象就好,在需要时再来查文档,不用刻意去记。</p>    <p>与 RequireJS 的 AMD 规范相比,CMD 规范尽量保持简单,并与 CommonJS 和 Node.js 的 Modules 规范保持了很大的兼容性。通过 CMD 规范书写的模块,可以很容易在 Node.js 中运行</p>    <h2>五、CommonJs</h2>    <p>其实学完了SeaJs规范之后,CommonJs规范也就差不多会用了,两者非常的相似,并且在node.js中使用起来更简单。</p>    <p>在node.js中直接使用require引包,直接使用exports和module.exports暴露公开成员,并且npm基于CommonJs实现了自动加载和安装依赖。</p>    <p>同样的CommonJs让node.js变得:1、增加 <strong>内聚</strong> 性,有助分工协作,2、方便 <strong>重构</strong> ,3、提高代码 <strong>质量</strong></p>    <p>node.js中的实现为:</p>    <pre>  <code class="language-javascript">(function(exports,require,module,__filename,__dirname){    return module.exports;  });</code></pre>    <p>require</p>    <ul>     <li> <p>加载模块后会 <strong>缓存</strong> ,多次加载后得到同一对象 require('http')</p> </li>     <li> <p>查看模块缓存 console.log(require.cache);</p> </li>     <li> <p>查询模块绝对路径 require.resolve('./test.js');</p> </li>     <li> <p>查看单个的模块缓存 require.cache[require.resolve('./test.js')]</p> </li>     <li> <p>删除模块缓存 delete require.cache[require.resolve('./test.js')];</p> </li>    </ul>    <p> </p>    <p> </p>    <p>来自:http://www.jianshu.com/p/3832c00a44a7</p>    <p> </p>    
 本文由用户 StephenSlat 自行上传分享,仅供网友学习交流。所有权归原作者,若您的权利被侵害,请联系管理员。
 转载本站原创文章,请注明出处,并保留原始链接、图片水印。
 本站是一个以用户分享为主的开源技术平台,欢迎各类分享!
 本文地址:https://www.open-open.com/lib/view/open1483424484785.html
SeaJS Node.js JavaScript开发