[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代码的模块化,这个见仁见智,有的人可能觉得你这种写法有什么用处呢,“我自己想个命名前缀不就得了,有必要写这么麻烦的函数么”
但是我觉得,良好的代码风格是一个程序员的优良品德。对人对己,都是极好的。
[补]1.继承方式的实现:冒充对象
- function Parent(){
- this.name = 'parent';
- this.count = 0;
- this.info = function(){
- return [this.name,':',this.count.toString()].join('');
- }
- }
- function Son(){
- this.inherit = Parent;
- this.inherit();
- delete this.inherit;
- this.flag = 'son';
- this.count = 1;
- }
- var son = new Son();
[补]2.继承方式的实现:原型链的修改和维护 对象.constructor = 构造器.prototype.constructor(原型链末端闭环)
- function Parent(){
- this.name = 'parent';
- this.count = 0;
- this.info = function(){
- return [this.name,':',this.count.toString()].join('');
- }
- }
- function Son(){
- this.constructor = arguments.callee;
- this.flag = 'son';
- this.count = 1;
- }
- Son.prototype = new Parent();
- var son = new Son();
[javascript]模块化&命名污染—from 编程精解的更多相关文章
- [已读]JavaScript编程精解
译者汤姆大叔,应该很多人都知道,他写了一系列的关于闭包与作用域理解的文章,但是由于创建了一些我不理解的新名词,我不爱看. <JavaScript编程精解>算是买得比较早的一本书,那会大肆搜 ...
- [javascript] postmessage
摘要 postmessage 作为 html5 跨域传值的解决方法,灰常好用啊..本次用的是页面a 用iframe 嵌入 页面b. 使用方法 postmessage 参数 otherWindow.po ...
- JavaScript编程精解 初读笔记
1.1 值 JavaScript里有6种基本类型的值: number.string.Boolean.object.function和undefined. 1.3.2 prompt和confirm 浏览 ...
- 《JavaScript编程精解》读书笔记
第一章 JavaScript基础:值.变量.控制流程 JavaScript里有六种基本类型:number类型.string类型.boolean类型.object.function和undefined. ...
- java网络编程精解demo1---读取用户控制台的输入的数据并显示
package test3; import java.io.BufferedReader; import java.io.IOException; import java.io.InputStream ...
- js编程精解--笔记
看这本书的目的是为了更好的使用mongodb,所以只看js编程语言基础,不看浏览器和画布. 需要看1-11章,共160页 第一章 值.类型和运算符 第二章 程序结构 第三章 函数 第四章 数据结构:对 ...
- javascript中模块化知识总结
JavaScript 模块化开发 1. 模块化介绍 掌握模块化基本概念以及使用模块化带来的好处 当你的网站开发越来越复杂的时候,会经常遇到什么问题? 恼人的命名冲突 繁琐的文件依赖 历史上,JavaS ...
- 关于JavaScript的模块化
为什么需要模块化 最近在学习网易微专业的<前端系统架构>课程,里面讲到了关于JavaScript的模块化问题.具体指的是当随着Web系统不断强大起来,需要在客户端进行的操作就多了起来(比如 ...
- Java基础 之软引用、弱引用、虚引用 ·[转载]
Java基础 之软引用.弱引用.虚引用 ·[转载] 2011-11-24 14:43:41 Java基础 之软引用.弱引用.虚引用 浏览(509)|评论(1) 交流分类:Java|笔记分类: Ja ...
随机推荐
- Spring实战之装配Bean
1.1Spring配置的可选方案 Spring容器负责创建应用程序中的bean并通过DI来协调这些对象之间的关系.但是,作为开发人员,你需要告诉Spring要创建哪些bean并且如何将其装配在一起.当 ...
- A generic error occurred in GDI+的解决方案
转自智慧光原文A generic error occurred in GDI+. 解决方法 使用image1.RotateFlip(RotateFlipType.Rotate90FlipNone)方法 ...
- 解读linux中用户密码规则及忘记root口令的破解(思路)
linux当中,用户名和密码表对应关系放在/etc/passwd中,如: root:x:0:0:root:/root:/bin/bash 格式代表意义分别为 用户名:密码:用户id:组id:用户描述 ...
- A Bug's Life(加权并查集)
Description Background Professor Hopper is researching the sexual behavior of a rare species of bugs ...
- iOS开发基础控件--UISegmentedControl
UISegmentedControl全局外观设置 分段控件是我们常用的控件之一,今天把具体用法总结了下: 1.初始化UISegmentedControl [plain] view plaincopy ...
- 使用NPM在项目中引入【lodash】
mkdir [文件名 ] 创建项目文件 mkdir lodashDemo cd [文件名] 进入项目文件 cd lodashDemo nvm -v 查看nvm版本,确定nvm已安装 nvm -v No ...
- 【CodeForces148D】Bag of mice
题意 dragon和princess玩一个游戏.开始的时候袋子里有w个白老鼠和b个黑老鼠.两个人轮流从袋子里面往外摸老鼠.谁先拿到白老鼠谁先获胜.dragon每次抓出一只老鼠,剩下老鼠里面都会有一只跳 ...
- 81-POJ-Wall(计算几何)
http://poj.org/problem?id=1113 Wall Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 411 ...
- vim全局替换命令-乾颐堂
语法为 :[addr]s/源字符串/目的字符串/[option] 全局替换命令为::%s/源字符串/目的字符串/g [addr] 表示检索范围,省略时表示当前行. 如:“1,20” :表示从第1行到2 ...
- .net正则查询
using System;using System.Collections.Generic;using System.Linq;using System.Web;using System.Web.UI ...