模块化的JavaScript开发的优势在哪里

现在模块化的 JavaScript 的开拓越来越火热，无论是模块加载器照旧优越的 JavaScript 模块，都是层出不穷。既然这么火，必定是有存在的来由，必定是办理了某些现实题目。许多没打仗过模块化 JavaScript 开拓者不禁要问，我真的必要模块化吗，模块化对比于传统的模式有什么上风？

JavaScript 自己是没有模块化支持的，许多说话多有，就连CSS都有这样的加载方法。

@import "fed.css";

固然由于机能题目不保举CSS这样来举办加载，但这是一种模块化的头脑，这种头脑对付 JavaScript 来说很有效。幸好JavaScript是一门机动的说话，可以通过下面这段代码来进动作态加载 JavaScript 文件。

var script = document.createElement( 'script' ),
    head = document.head;

script.src = 'http://example.com/test.js';
script.async = 'async';
head.insertBefore( script, head.firstChild );

传统的加载方法必需在页面中安排一个 script 标签来举办加载。

<script type="text/javascript" src="http://example.com/test.js"></script>

更好的疏散

那假如要加载多个就得安排多个 script 标签，假如是加载模块的话，拿 easy.js 来说，页面中始终只要引用 easy.js 即可，这样对付 HTML 和 JavaScript 疏散很有甜头，在某些场景下这个疏散度很重要。

就拿我司的环境来说吧。后端的 view 层并不是由我们前端来开拓的，项目上线的时辰，前端只能更新 CSS 和 JS 文件，HTML 文件动不了。假如前端要在该页面新增一个 JavaScript 文件的引用是很贫困的，由于后端措施的更新都要严酷凭证流程来并有牢靠的更新时刻，假如是用模块加载的方法不消再分析后端的更新。虽然，你大概会说，假如原页面中已经有 JavaScript 文件，我直接在原文件中加代码不就行了，那么接下来说说直接在原文件中新增代码会遇到什么样的题目。

更好的代码组织方法

假如单个文件越来越大，维护起来出题目的几率也会越来越大，一小我私人开拓还好，假如是多人开拓，差异的代码气魄沤背同超多的营业逻辑稠浊在一路，不要说维护了，光想想都蛋痛。模块式的开拓，一个文件就是一个模块，节制了文件的粒度，每个模块可以专注于一个成果。正所谓一个萝卜一个坑，多人开拓时，各自管好本身坑里的萝卜就行了，这也正是 OOP 的头脑。

按需加载

照旧环绕单个文件来说事，当文件大到必然的水平，机能题目也随之而来了。归并文件是能镌汰哀求，这是会带来机能的晋升，可是当文件大到必然的体积时，此时的下载时刻也许并不会比多个小文件的下载时刻更短。此时就必要衡量哀求数和文件体积的相关了。

单文件尚有一个题目，那就是缓存是否能充实的操作好。假如一个概略积的文件内包括了超多的营业逻辑和伟大的成果，而这个文件同时又被许多页面引用到。好比在某页面，现实只用到了该文件一个很少的成果，那么其他的代码对付该页面来说就是多余的，挥霍了加载流量。你或者会说，这个文件固然大，可是它第一次加载的时辰就被缓存过了，尽量在某页面只用到了少少部门的成果，但只要缓存过，加载照旧挺快的。是的，假如环境有这么抱负必定是功德。可是，每每抱负和实际城市有差距，假如产物的迭代更新太快，营业需求一天一个样，那么该文件就会三天两端的更新，更新也许是一个很小的成果，可是这样的更新对付革新缓存的价钱然则很大的。假如确实有这种环境，就声名这种计划确实是有题目。假如能公道的对文件举办模块化的打点，那么可以只管镌汰不须要的加载，只管镌汰革新大文件的缓存带来的丧失，这也必要衡量好，好比将很少更新的归并成一个文件，常更新的独立成模块。

停止定名斗嘴

JavaScript 自己是没有定名空间的，为了停止定名斗嘴，常常会行使工具和闭包的步伐来停止。用工具仅仅是低落了斗嘴的概率罢了，拿常常行使 jQuery 的开拓来说，无论是往 $ 上扩展照旧在 $.fn 上扩展，人多了不免会起斗嘴。可能用自界说的工具，搞个好几层，不仅是写起来难记，这样的挪用也会在机能上打折扣的。模块化就很好的办理了这个题目，在该模块内的任何情势的定名都不会再和其他模块有斗嘴，你想起啥名都行了。虽然，你硬要在模块内部给 window 上挂一堆对象，我也没步伐。

既然每个模块都是关闭式的，那么模块之间怎样通讯呢？接口的计划那是必需的。很简朴，对付像 seajs 这种 CMD 类型的，必要行使自界说的要害字来向外部袒露一个接口。

define(function( require, exports ){
    var hello = 'hello world';
    // 向外部袒露该模块的接口
    exports.hello = hello;
});

easy.js 遵循 AMD 类型，袒露接口更简朴，直接用 return 要害词即可。

define( 'hello', function(){
    var hello = 'hello world';
    // 向外部袒露该模块的接口
    return hello;
});

更好的依靠处理赏罚

传统的开拓模式，假如 B 文件要依靠 A 文件，那么必需在 B 文件前面用 script 的情势先加载好 A 文件。假若有一天，B 文件不再必要依靠 A 文件，可能要增进依靠文件 C，那么又回到了我说的第一个题目上。假如这个 B 文件被 N 个页面在挪用，并且页面还跨营业站点，那改起来的确就是恶梦啊。假如是用模块化，只必要在模块内部声明好依靠就行了，增进删除都直接修改模块即可。挪用的时辰也不消管该模块依靠了哪些其他模块，安心的用就是了。

好了，讲了这么多，假如你照旧认为无动于衷，要么是你打仗到的项目较小，还没伟大到这个水平，要么就是我的表达手段有题目。假如你认为尚有什么必要增补的，接待在下面留言。

文章来历：雨夜带刀‘s Blog，转载请注明出处。

（编辑：河北网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!