首页 > 代码库 > 《编写可维护的Javascript》总结

《编写可维护的Javascript》总结

最近读了这本书,为了防止狗熊掰棒子式的学习,写这篇总结把收获沉淀下来。

先说说看书的一点感受吧。不要说在大公司中多人团队合作了,就连原来在实验室的几个人小规模开发也都很需要编码规范,否则当复用组件的时候就要花费大量的时间调试,甚至不得不更改原来的代码。多人协作所需要制定的代码规范,常常就是大家达成协议要缩进几个格、如何命名等这些编程风格。虽然这个也很重要,统一风格有助于别人读懂和维护代码,而我认为更重要的是减少对他人代码的污染,同时减少重复的逻辑,能够实现代码的复用。再往上走,更高级和智能的应该就是借助一些成熟的模式和工具来实现代码的管理了。

避免代码污染,第一点需要注意的应该就是命名空间污染了。最早接触封闭的命名空间应该是上学期间做的一个基于jQuery的浮动提示控件。那会儿只会一点css和最简单的js处理,代码很简陋,逻辑上也是照猫画虎来的。现在再回头看原来的代码,就发现jQuery就是单全局变量方式(也不算特别单,包括$和jQuery两个),添加控件的时候,就可以在$.fn这个命名空间上添加新的函数。

这本书里提到的相关的解决方法:

1)      松耦合:通过类似Juicer的模板来实现Js与Html的分离;

2)      全局变量:发生命名冲突。使用全局单一全局变量,在它上面缀上模块钩子来管理命名空间。这一点不仅体现在js的模块化处理,对于使用transition这种页面切换效果控件的情况下,需要使用包裹DOM来区分不同的元素也是很有必要的。踩了不少这个方面的坑啊~

3)      模块化:

定义模块:模块名称、依赖、工厂方法。

使用模块:YUI将所有模块都挂接到了全局变量Y上,在使用的时候通过Y找到需要调用的模块变量;而AMD会将依赖创建为对象,对应到参数传递给工厂函数。

 

在看全局变量这一块儿的时候,没见过世面的我发现一个彩蛋——创建书签。最简单的书签

<a href="javascript:void(document.bgColor=‘green‘);">书签</a>

拖到书签栏之后,点击书签即可执行href里边的代码,将页面的背景色变为绿色。在执行书签代码的时候,为了防止影响原有页面的js变量,需要将书签的代码设置为“零全局变量”,即用立即执行的函数调用,并将所有脚本放置其中。

 

在看到“不是你的对象不要动”这一行大大的黑体字的时候,心里忍不住紧张了一下。

最近做项目过程中,有一个功能点需要引入不少新旧控件来实现,这就涉及了很多别人的对象。当对于控件有新的需求时,最直接的想法就是修改控件的某个函数来实现目的。结果,由于其他页面也调用了该控件,就出现展现不一致的问题。踩了这个坑之后,我意识到直接修改控件存在着很大的风险,但是完全新增方法应该没有什么问题。但是,看了这本书之后,他总结的更为全面。包括:

不覆盖方法;

不删除方法;

不新增方法:原来我认为新增方法是没有什么问题的,但是书里提出一个风险——这个对象此刻没有该方法不代表他以后不会添加。如果以后控件升级了,就有可能会发生冲突。

书里提到的比直接修改方法更好的作法是通过继承实现。另外,在项目中学到的解决方法是通过注册回调函数事件来实现。

 

最后,记录下来一些总结的知识点。

1)      null与undefined:

原来的面试题必问啊,原来就知道null == undefined 且null !== undefined;含义上null是空对象,undefined是没有任何值;

2)      函数:

严格模式:在函数中,而不是全局作用域使用use strict。使得编译器以更严格的方式进行解释,减少错误的发生。

比如不使用var声明变量,旧的解析方式会作为全局变量,strict的方式会报错。

立即执行函数:模块化作用域的基础。

3)      执行js代码:

eval:最常见,用于jsonp返回值的处理;

Function构造函数: new Function("console.log(‘hi‘)");

setTimeout和setInterval也可以执行字符串,但是这不符合它本身的语义。

严禁使用Function,必要时使用eval,setTimeout和setInterval的使用要符合语义。

4)      避免使用原始包装类型。