宝哥软件园

Javascript的模块化编程(一)编写模块的最佳实践

编辑:宝哥软件园 来源:互联网 时间:2021-10-05

随着网站逐渐成为“互联网应用”,网页中嵌入的Javascript代码变得越来越大,越来越复杂。

网页越来越像桌面程序,需要团队协作、进度管理、单元测试等等.开发人员必须使用软件工程方法来管理网页的业务逻辑。Javascript的模块化编程已经成为一种迫切的需求。理想情况下,开发人员只需要实现核心业务逻辑,其他人可以加载其他人已经编写的模块。但是,Javascript不是模块化编程语言,不支持“类”,更不支持“模块”。(正在开发的ECMAScript标准第六版将正式支持‘类’和‘模块’,但要付诸实践还需要很长时间。)Javascript社区在现有运行环境下,为实现‘模块’的效果做了很多努力。总结了目前“Javascript模块化编程”的最佳实践,并说明了如何付诸实践。虽然这不是初学者教程,但是如果你知道Javascript的基本语法,你就能理解它。

一、原创写作模块是一套实现特定功能的方法。简单地把不同的函数(和记录状态的变量)放在一起,它甚至是一个模块。复制代码:函数m1()上的函数m1()和m2().}函数m2 () {//.}以形成模块。使用时直接调用即可。这种方法的缺点很明显:‘污染’全局变量,不能保证变量名与其他模块不会冲突,模块成员之间也没有直接关系。二、对象写入为了解决上述缺点,可以将模块作为一个对象写入,所有的模块成员都放在这个对象中。复制的代码如下:VAR模块1=新对象({_ COUNT33600,M13360Function () {//.},M2:Function () {//.}});上面的函数m1()和m2()封装在module1对象中。使用时,它是调用此对象的属性。复制的代码如下: module 1 . m1();然而,这样的写入将暴露所有模块成员,并且内部状态可以从外部重写。例如,外部代码可以直接改变内部计数器的值。复制的代码如下:模块1。_ count=5;第三,立即编写函数。使用‘立即调用函数表达式’(life)可以达到不公开私有成员的目的。复制的代码如下:VAR模块1=(function(){ var _ count=0;var m1=function(){ //.};var m2=function(){ //.};返回{ m1 : m1,m2 : m2 };})();使用上述写法,外部代码无法读取internal _count变量。复制代码如下:console.info (module1。_ count);//undefined module1是Javascript模块的基本写法。下面,再次处理该书写。4.放大模式如果一个模块很大,必须分成几个部分,或者一个模块需要继承另一个模块,就要采用‘放大模式’。复制的代码如下:VAR模块1=(函数(mod) {mod.m3=函数(){//.};返回mod})(module 1);上面的代码向module1模块添加了一个新方法m3(),然后返回新的module1模块。5.松散增强在浏览器环境中,模块的每个部分通常都是从互联网上获取的,有时不可能知道哪个部分会先被加载。如果采用上一节的写法,第一个被执行的部分就有可能加载一个不存在的空对象。此时应采用“宽放大模式”。复制的代码如下:VAR MODULE1=(函数(mod) {//.返回mod})(window . module 1 | | { });与“放大模式”相比,“宽放大模式”意味着“立即执行功能”的参数可以是空对象。6.输入全局变量的独立性是模块的一个重要特性,最好不要直接与模块内部的程序其他部分进行交互。为了调用模块内部的全局变量,必须将其他变量显式输入到模块中。复制代码如下:VAR模块1=(函数($,Yahoo) {//.}) (jQuery,Yahoo);上面的module1模块需要使用jQuery库和YUI库,所以这两个库(实际上是两个模块)被用作输入module1的参数。这样做既保证了模块的独立性,又使得模块之间的依赖性明显。本系列的第二部分将讨论如何在浏览器环境中组织不同的模块并管理模块之间的依赖关系。(结束)

更多资讯
游戏推荐
更多+