最近看了编程精解里面的模块化一章,很受启发。

  /****************/

  在开发的实际过程中,根据页面或者逻辑布局,js代码可以按照功能划分为若干个区块:数据交互、表单验证、页面布局等等模块

  为了提高开发效率和后期代码维护,很自然的应该将几十个js函数划分为模块,利于调试和后续修改。但写出几十个函数的时候,命名自然就出现问题了,想不出别的函数名或者干脆两个函数重名了,这种因为重复声明而导致的bug称为命名污染,这在大型项目中很常见。

  提到模块开发,最容易想到的是通过js文件来分模块存储和调用代码。而文件存储的弊病是:比如首页加载了3,4个js文件(应该不算多),不同文件里面的全局变量,包括函数和变量,怎么保证不存在命名冲突,当然,通过给变量名和函数名前加前缀是一个很笨但是很奏效的办法,有没有什么办法能够从最基础上避免这种命名污染、同时能够实现代码模块化呢?

  

  1.通过模块对象来实现。

    举一个书中的例子,要做一个月份翻译器,把1翻译为一月。对于新手来讲很可能是这样的:

      

  1. var names = ['一','二','三','四','五','六','七','八','九','十','十一','十二'];
  2. function getMonthName(num){
  3. return names[num-1]+'月';
  4. };
  5. function getMonthNum(str){
  6. for(var i in names){
  7. if( str == (names[i]+'月')){
  8. return i+1;
  9. }
  10. }
  11. };

  这里面的names和getMonthName,getMonthNum的生存域都是顶级的,所以如果其他文件或者js代码中声明了名字为names的变量,就会导致程序异常(getMonthName,getMonthNum这么长的名字一般很少重复)。

  在一个后台管理网站里面,需要写的函数可能有:表单验证、图片轮播组件、dom加载、从某input里面读数据再拼成json、hover效果、弹出层....如果这些功能或者插件都是直接声明全局函数或全局变量,想命名就会想哭的。

  

  所以这时候,应该想到利用函数闭包来避免产生作用域命名污染,上面代码的最简修改就是

  

  1. //匿名函数声明并直接调用
  2. //names作为局部变量出现 不会污染顶级作用域,外部无法访问
  3. //通过为顶级作用域的window对象绑定函数的方式,对外暴露接口
  4. (function(){
  5. var names = ['一','二','三','四','五','六','七','八','九','十','十一','十二'];
  6. window.getMonthName = function getMonthName(num){
  7. return names[num-1]+'月';
  8. };
  9. window.getMonthNum = function getMonthNum(str){
  10. for(var i in names){
  11. if( str == (names[i]+'月')){
  12. return i+1;
  13. }
  14. }
  15. };
  16. })();

  这种方法也有不好的地方,我们总不能把所有的函数接口都绑定到window对象的属性当中,那和直接在代码里声明函数没区别。

  所以,再一步优化就是做模块对象,很简单的优化,把函数绑定到模块对象上,通过访问模块对象的属性来调用功能:

  

  

  1. var monthTranslator = (function(){
  2. var names = ['一','二','三','四','五','六','七','八','九','十','十一','十二'];
  3. return {
  4. getMonthName:function(num){
  5. return names[num-1]+'月';
  6. },
  7. getMonthNum:function(str){
  8. for(var i in names){
  9. if( str == (names[i]+'月')){
  10. return i+1;
  11. }
  12. }
  13. }
  14. };
  15. })();

  上面的函数调用时,直接使用 monthTranslator.getMonthName(1);  就可以了。当然也可以把names作为模块对象的属性出现,这就看功能设计了。

  /*************/

  上面说的这些就是js代码的模块化,这个见仁见智,有的人可能觉得你这种写法有什么用处呢,“我自己想个命名前缀不就得了,有必要写这么麻烦的函数么”

  但是我觉得,良好的代码风格是一个程序员的优良品德。对人对己,都是极好的。

  

[补]1.继承方式的实现:冒充对象

  1. function Parent(){
  2. this.name = 'parent';
  3. this.count = 0;
  4. this.info = function(){
  5. return [this.name,':',this.count.toString()].join('');
  6. }
  7. }
  8. function Son(){
  9. this.inherit = Parent;
  10. this.inherit();
  11. delete this.inherit;
  12. this.flag = 'son';
  13. this.count = 1;
  14. }
  15. var son = new Son();

[补]2.继承方式的实现:原型链的修改和维护 对象.constructor = 构造器.prototype.constructor(原型链末端闭环)

  1. function Parent(){
  2. this.name = 'parent';
  3. this.count = 0;
  4. this.info = function(){
  5. return [this.name,':',this.count.toString()].join('');
  6. }
  7. }
  8. function Son(){
  9. this.constructor = arguments.callee;
  10. this.flag = 'son';
  11. this.count = 1;
  12. }
  13. Son.prototype = new Parent();
  14. var son = new Son();

[javascript]模块化&命名污染—from 编程精解的更多相关文章

  1. [已读]JavaScript编程精解

    译者汤姆大叔,应该很多人都知道,他写了一系列的关于闭包与作用域理解的文章,但是由于创建了一些我不理解的新名词,我不爱看. <JavaScript编程精解>算是买得比较早的一本书,那会大肆搜 ...

  2. [javascript] postmessage

    摘要 postmessage 作为 html5 跨域传值的解决方法,灰常好用啊..本次用的是页面a 用iframe 嵌入 页面b. 使用方法 postmessage 参数 otherWindow.po ...

  3. JavaScript编程精解 初读笔记

    1.1 值 JavaScript里有6种基本类型的值: number.string.Boolean.object.function和undefined. 1.3.2 prompt和confirm 浏览 ...

  4. 《JavaScript编程精解》读书笔记

    第一章 JavaScript基础:值.变量.控制流程 JavaScript里有六种基本类型:number类型.string类型.boolean类型.object.function和undefined. ...

  5. java网络编程精解demo1---读取用户控制台的输入的数据并显示

    package test3; import java.io.BufferedReader; import java.io.IOException; import java.io.InputStream ...

  6. js编程精解--笔记

    看这本书的目的是为了更好的使用mongodb,所以只看js编程语言基础,不看浏览器和画布. 需要看1-11章,共160页 第一章 值.类型和运算符 第二章 程序结构 第三章 函数 第四章 数据结构:对 ...

  7. javascript中模块化知识总结

    JavaScript 模块化开发 1. 模块化介绍 掌握模块化基本概念以及使用模块化带来的好处 当你的网站开发越来越复杂的时候,会经常遇到什么问题? 恼人的命名冲突 繁琐的文件依赖 历史上,JavaS ...

  8. 关于JavaScript的模块化

    为什么需要模块化 最近在学习网易微专业的<前端系统架构>课程,里面讲到了关于JavaScript的模块化问题.具体指的是当随着Web系统不断强大起来,需要在客户端进行的操作就多了起来(比如 ...

  9. Java基础 之软引用、弱引用、虚引用 ·[转载]

    Java基础 之软引用.弱引用.虚引用 ·[转载] 2011-11-24 14:43:41 Java基础 之软引用.弱引用.虚引用 浏览(509)|评论(1)   交流分类:Java|笔记分类: Ja ...

随机推荐

  1. Spring实战之装配Bean

    1.1Spring配置的可选方案 Spring容器负责创建应用程序中的bean并通过DI来协调这些对象之间的关系.但是,作为开发人员,你需要告诉Spring要创建哪些bean并且如何将其装配在一起.当 ...

  2. A generic error occurred in GDI+的解决方案

    转自智慧光原文A generic error occurred in GDI+. 解决方法 使用image1.RotateFlip(RotateFlipType.Rotate90FlipNone)方法 ...

  3. 解读linux中用户密码规则及忘记root口令的破解(思路)

    linux当中,用户名和密码表对应关系放在/etc/passwd中,如: root:x:0:0:root:/root:/bin/bash 格式代表意义分别为 用户名:密码:用户id:组id:用户描述 ...

  4. A Bug's Life(加权并查集)

    Description Background Professor Hopper is researching the sexual behavior of a rare species of bugs ...

  5. iOS开发基础控件--UISegmentedControl

    UISegmentedControl全局外观设置 分段控件是我们常用的控件之一,今天把具体用法总结了下: 1.初始化UISegmentedControl [plain] view plaincopy ...

  6. 使用NPM在项目中引入【lodash】

    mkdir [文件名 ] 创建项目文件 mkdir lodashDemo cd [文件名] 进入项目文件 cd lodashDemo nvm -v 查看nvm版本,确定nvm已安装 nvm -v No ...

  7. 【CodeForces148D】Bag of mice

    题意 dragon和princess玩一个游戏.开始的时候袋子里有w个白老鼠和b个黑老鼠.两个人轮流从袋子里面往外摸老鼠.谁先拿到白老鼠谁先获胜.dragon每次抓出一只老鼠,剩下老鼠里面都会有一只跳 ...

  8. 81-POJ-Wall(计算几何)

    http://poj.org/problem?id=1113 Wall Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 411 ...

  9. vim全局替换命令-乾颐堂

    语法为 :[addr]s/源字符串/目的字符串/[option] 全局替换命令为::%s/源字符串/目的字符串/g [addr] 表示检索范围,省略时表示当前行. 如:“1,20” :表示从第1行到2 ...

  10. .net正则查询

    using System;using System.Collections.Generic;using System.Linq;using System.Web;using System.Web.UI ...