JavaScript模块化开辟的那些事

模块化开辟在编程开辟中是一个非常重要的观点,一个优异的模块化项目的后期保护本钱能够大大下降。本文重要引见JavaScript模块化开辟的那些事,文中经由历程一个小故事比较直观地论述了模块化开辟的历程。

小A是某个创业团队的前端工程师,担任编写项目的Javascript顺序。

《JavaScript模块化开辟的那些事》

全局变量争执

依据本身的履历,小A先把一些经常运用的功用抽出来,写成函数放到一个公用文件base.js中:

var _ = {
    $: function(id) { return document.getElementById(id); },
    getCookie: function(key) { ... },
    setCookie: function(key, value) { ... }
};

小A把这些函数都放在_对象内,以防过量的全局变量形成争执。他通知团队的其他成员,假如谁想运用这些函数,只需引入base.js就能够了。

小C是小A的同事,他向小A反应:本身的页面引入了一个叫做underscore.js的类库,而且,这个类库也会占用这个全局变量,如许一来就会跟base.js中的争执了。小A心想,underscore.js是第三方类库,预计不好改,然则base.js已在许多页面放开,不可能改。末了小A只好无法地把underscore.js占用的全局变量改了。

此时,小A发明,把函数都放在一个名字空间内,能够削减全局变量争执的几率,却没有处理全局变量争执这个题目。

依靠

跟着营业的生长,小A又编写了一系列的函数库和UI组件,比方说标签切换组件tabs.js,此组件需挪用base.js以及util.js中的函数。

有一天,新同事小D跟小A反应,本身已在页面中援用了tabs.js,功用却不一般。小A一看就发明题目了,本来小D不晓得tabs.js依靠于base.js以及util.js,他并没有增添这两个文件的援用。因而,他立时举行修正:

<script src="tabs.js"></script>
<script src="base.js"></script>
<script src="util.js"></script>

但是,功用照样不一般,此时小A经验小D说:“都说是依靠,那被依靠方肯定要放在依靠方之前啊”。本来小D把base.js和util.js放到tabs.js以后了。

小A心想,他是作者,天然晓得组件的依靠状况,然则他人就难说了,特别是新人。

过了一段时间,小A给标签切换组件增添了功用,为了完成这个功用,tabs.js还须要挪用ui.js中的函数。这时刻,小A发明了一个严峻的题目,他须要在所有挪用了tabs.js的页面上增添ui.js的援用!!!

又过了一段时间,小A优化了tabs.js,这个组件已不再依靠于util.js,所以他在所有用到tabs.js的页面中移除了util.js的援用,以进步机能。他这一修正,出大事了,测试组MM通知他,有些页面不一般了。小A一看,豁然开朗,本来某些页面的其他功用用到了util.js中的函数,他把这个文件的援用去掉致使出错了。为了保证功用一般,他又把代码恢复了。

小A又想,有无方法在修正依靠的同时不必一一修正页面,也不影响其他功用呢?

模块化

小A逛互联网的时刻,无意中发明了一种新颖的模块化编码体式格局,能够把它之前碰到的题目悉数处理。

在模块化编程体式格局下,每一个文件都是一个模块。每一个模块都由一个名为define的函数建立。比方,把base.js改形成一个模块后,代码会变成如许:

define(function(require, exports, module) {
    exports.$ = function(id) { return document.getElementById(id); };
    exports.getCookie = function(key) { ... };
    exports.setCookie = function(key, value) { ... };
});

base.js向外供应的接口都被增添到exports这个对象。而exports是一个部分变量,全部模块的代码都没有占用半个全局变量。

那怎样挪用某个模块供应的接口呢?以tabs.js为例,它要依靠于base.js和util.js:

define(function(require, exports, module) {
    var _ = require('base.js'), util = require('util.js');
    var div_tabs = _.$('tabs');
    // .... 其他代码
});

一个模块能够经由历程部分函数require猎取其他模块的接口。此时,变量和util都是部分变量,而且,变量名完全是受开辟者掌握的,假如你不喜欢,那也能够用base:

define(function(require, exports, module) {
    var base = require('base.js'), util = require('util.js');
    var div_tabs = base.$('tabs');
    // .... 其他代码
});

一旦要移除util.js、增添ui.js,那只需修正tabs.js就能够了:

define(function(require, exports, module) {
    var base = require('base.js'), ui = require('ui.js');
    var div_tabs = base.$('tabs');
    // .... 其他代码
});

加载器

因为缺少浏览器的原生支撑,假如我们要用模块化的体式格局编码,就必须借助于一个叫做加载器(loader)的东西。

现在加载器的完成有许多,比方require.js、seajs。而JRaiser类库也有本身的加载器。

原文出处:JavaScript模块化开辟的那些事

    原文作者:Xinrui
    原文地址: https://segmentfault.com/a/1190000002591834
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞