理解Javascript模块化开发
2023-11-29 03:25:25
小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
相关内容