理解Javascript模块化开发

理解Javascript模块化开发
小A是一个创业团队的前端工程师,负责项目的Javascript程序。

全局变量冲突

根据自己的经验,小第一得出一些常用函数和写功能为公共文件base.js:

复制代码代码如下所示:

var = { _

$:功能(ID){ return document.getelementbyid(ID);},

getcookie:功能(关键){…},

setcookie:功能(键,值){…}

};
小的这些功能都放在_对象,以防止过多的全局变量冲突造成的。他告诉其他的团队成员,如果有人想使用这些功能,只是介绍base.js。

C是一个很小的一个同事,他报了一个:自己的页面介绍了一种叫做Underscore.js图书馆和图书馆将占据_全局变量,那么它将在_冲突base.js。小思想,Underscore.js是第三方类库,估计是不好的,但base.js已分散在许多页,这是不可能改变的。最后,小A改变了全局变量的Underscore.js占领。

在这一点上,小A发现将函数放在一个名称空间中可以减少全局变量冲突的概率,但不能解决全局变量冲突问题。

依靠

随着业务的发展,小编写了一系列的函数库和UI组件,例如,标签交换组件tabs.js。这个组件需要在util.js叫base.js和功能。

一天,一个新同事,小D,和一个小的一个反映,他们在网页中引用tabs.js,但功能不正常。小的看问题,原来的小D不知道tabs.js取决于base.js和util.js,他没有把这两个文件的参考。所以他立即改变了:

复制代码代码如下所示:

然而,功能不正常,此时小教训小D说:都说是依赖,依赖,必须放在独立的一面啊。原来,小D把base.js和util.js到tabs.js。

没想到,他是作者,他自然知道这个组件的依赖性,但很难说,尤其是新来的人。

After a while, small A adds functionality to the label switching component, and in order to achieve this function, tabs.js needs to call the functions in the ui.js.At this point, little A found a serious problem, and he needed to add a reference to the ui.js on all the pages that called the tabs.js!!!!

过了一会儿,小的优化tabs.js,不再依赖util.js。所以他取消util.js参考使用tabs.js提高性能的所有网页。他大赚了一笔,而试验组,毫米,告诉他一些页面是不正常的。作为一个小的,我突然意识到,一些页面的其他功能util.js使用的功能,和他做了一个错误删除的文件的参考,以确保功能正常,他继续代码。

小A也认为,有没有一种方法可以修改依赖关系,而不是一个接一个地修改页面,也不会影响其他功能

模块化

当一小部分人在互联网上走动时,无意中发现了一种新的模块化编码方法,可以解决以前遇到的所有问题。

在模块化编程,每个文件是一个模块,每个模块是由一个函数名定义。例如,在base.js转化成一个模块,代码将这:

复制代码代码如下所示:

定义(函数(需求,导出,模块){)

出口。$ =功能(ID){ return document.getelementbyid(ID);};

exports.getcookie =功能(关键){…};

exports.setcookie =功能(键,值){…};

});
base.js所提供的接口添加到对象的出口。出口是一个局部变量,以及整个模块的代码不占半全局变量。

如何调用模块提供的接口在tabs.js,例如,它取决于base.js和util.js:

复制代码代码如下所示:

定义(函数(需求,导出,模块){)

无功_ =需要(js),利用=需要('util .js);

无功div_tabs = _美元('tabs);

…其他代码。

});
一个模块可以被其他模块的接口,通过局部功能的要求。此时,_变量和公用事业是局部变量,以及变量名完全是由开发商控制的,如果你不爱_,它也可以用于基地:

复制代码代码如下所示:

定义(函数(需求,导出,模块){)

VAR方法=需要(js),利用=需要('util .js);

无功div_tabs =基础。$('tabs);

…其他代码。

});
一旦你已经删除和添加util.js ui.js,你可以修改tabs.js。

复制代码代码如下所示:

定义(函数(需求,导出,模块){)

VAR方法=需要(js),界面要求('ui .js);

无功div_tabs =基础。$('tabs);

…其他代码。

});
装载机

由于缺乏对浏览器的本地支持,如果我们要以模块化的方式进行编码,我们必须帮助使用一种叫做加载程序(加载器)的东西。

目前装载机实现,如require.js和seajs,jraiser类库也有自己的装载机。

tag:模块化开发电脑软件Javascript

相关内容