首页 > 代码库 > [javascript]模块化&命名污染—from 编程精解
[javascript]模块化&命名污染—from 编程精解
最近看了编程精解里面的模块化一章,很受启发。
/****************/
在开发的实际过程中,根据页面或者逻辑布局,js代码可以按照功能划分为若干个区块:数据交互、表单验证、页面布局等等模块
为了提高开发效率和后期代码维护,很自然的应该将几十个js函数划分为模块,利于调试和后续修改。但写出几十个函数的时候,命名自然就出现问题了,想不出别的函数名或者干脆两个函数重名了,这种因为重复声明而导致的bug称为命名污染,这在大型项目中很常见。
提到模块开发,最容易想到的是通过js文件来分模块存储和调用代码。而文件存储的弊病是:比如首页加载了3,4个js文件(应该不算多),不同文件里面的全局变量,包括函数和变量,怎么保证不存在命名冲突,当然,通过给变量名和函数名前加前缀是一个很笨但是很奏效的办法,有没有什么办法能够从最基础上避免这种命名污染、同时能够实现代码模块化呢?
1.通过模块对象来实现。
举一个书中的例子,要做一个月份翻译器,把1翻译为一月。对于新手来讲很可能是这样的:
var names = [‘一‘,‘二‘,‘三‘,‘四‘,‘五‘,‘六‘,‘七‘,‘八‘,‘九‘,‘十‘,‘十一‘,‘十二‘];function getMonthName(num){ return names[num-1]+‘月‘;};function getMonthNum(str){ for(var i in names){ if( str == (names[i]+‘月‘)){ return i+1; } }};
这里面的names和getMonthName,getMonthNum的生存域都是顶级的,所以如果其他文件或者js代码中声明了名字为names的变量,就会导致程序异常(getMonthName,getMonthNum这么长的名字一般很少重复)。
在一个后台管理网站里面,需要写的函数可能有:表单验证、图片轮播组件、dom加载、从某input里面读数据再拼成json、hover效果、弹出层....如果这些功能或者插件都是直接声明全局函数或全局变量,想命名就会想哭的。
所以这时候,应该想到利用函数闭包来避免产生作用域命名污染,上面代码的最简修改就是
//匿名函数声明并直接调用//names作为局部变量出现 不会污染顶级作用域,外部无法访问//通过为顶级作用域的window对象绑定函数的方式,对外暴露接口(function(){ var names = [‘一‘,‘二‘,‘三‘,‘四‘,‘五‘,‘六‘,‘七‘,‘八‘,‘九‘,‘十‘,‘十一‘,‘十二‘]; window.getMonthName = function getMonthName(num){ return names[num-1]+‘月‘; }; window.getMonthNum = function getMonthNum(str){ for(var i in names){ if( str == (names[i]+‘月‘)){ return i+1; } } };})();
这种方法也有不好的地方,我们总不能把所有的函数接口都绑定到window对象的属性当中,那和直接在代码里声明函数没区别。
所以,再一步优化就是做模块对象,很简单的优化,把函数绑定到模块对象上,通过访问模块对象的属性来调用功能:
var monthTranslator = (function(){ var names = [‘一‘,‘二‘,‘三‘,‘四‘,‘五‘,‘六‘,‘七‘,‘八‘,‘九‘,‘十‘,‘十一‘,‘十二‘]; return { getMonthName:function(num){ return names[num-1]+‘月‘; }, getMonthNum:function(str){ for(var i in names){ if( str == (names[i]+‘月‘)){ return i+1; } } } };})();
上面的函数调用时,直接使用 monthTranslator.getMonthName(1); 就可以了。当然也可以把names作为模块对象的属性出现,这就看功能设计了。
/*************/
上面说的这些就是js代码的模块化,这个见仁见智,有的人可能觉得你这种写法有什么用处呢,“我自己想个命名前缀不就得了,有必要写这么麻烦的函数么”
但是我觉得,良好的代码风格是一个程序员的优良品德。对人对己,都是极好的。
最近喜欢用brackets...小轻快,不错不错
[javascript]模块化&命名污染—from 编程精解