Javascript实践技巧

最近辞职了，准备北上。期待有个好结果~

 

本文以《Javascript高级程序设计》为基础，结合自身经验来总结下Javascript实际工作方面的知识。

 

一、可维护性

1、代码约定

1.1: 可读性

这里面主要包括 缩进和注释

缩进:使用统一的缩进（推荐4个空格） 

注释:

在下面情况中，应该包含注释

1、函数和方法都应该包含注释，这里面包括函数的目的和可能使用的算法。如果还包括参数是什么，返回值是什么就更好。

2、对于完成单个任务的大段的代码需要在前面放一个注释来解释代码的作用。

3、如果使用了复杂的算法则需要注释来解释。

4、Hack代码一定要写注释，否则别人会以为是没用的代码，然后删除掉。

 

1.2: 变量和函数命名

首先要避免毫无意义的命名（例如a、x、doSomething这些），这里提供一些推荐的命名方法

1、变量名应该为名词，例如car、person等。

2、函数名以动词开始，如getName();返回boolean的函数一般以is开头，如isPerson();

3、变量名应该使用合乎逻辑的名字，不必担心长度，长度问题可以用压缩来解决。

 

1.3: 变量类型透明

因为在Js里面，变量是松散类型的，很容易忘记变量的类型是什么。

建议初始化的时候给予一个初始值来表明变量类型。

 

 

2、松散耦合

2.1: 结构-表现-行为的分离。

具体来说就是避免在html中写css和js（内联style、事件属性等）。

避免在css中使用表达式。

避免在js中动态创建大量html（使用模板），设置样式（使用增加css类的方法）

 

2.2解耦事件和应用逻辑。

大家通常会在一个事件里面把逻辑全写完，例如

element.onclick = function(){
     // do something
     // some other code
     // some other code
}

这里假设函数里面有大量的逻辑，这么写也是很普遍的写法，但这有两个致命点

1，如果不触发事件，如果执行逻辑？

2，如果另外一个事件也会执行相应的逻辑，那么是不是只能复制一遍里面的代码了。

 

所以，一个更好的方法是把里面的大量逻辑封装到一个方法中。

 

解耦事件和应用逻辑的原则：

1，不要将event对象传递给方法，只传来自event对象的数据。

2，任何可以在应用层面的动作都应该可以在不执行事件的情况下进行。

3，任何事件处理程序都应该处理事件，然后将处理转交给应用逻辑。

 

 

3: 编程实践

3.1: 不要修改自己无法控制的对象。

可以使用下面方法为对象创建新的功能。

1、创建新的对象，为这个对象添加属性和方法。

2、创建自定义类型，继承需要修改的那个类型。在自定义类型上扩展方法。

 

3.2: 避免全局变量。

创建一个全局变量，其余变量都当作这个全局对象的属性或方法。

单一全局变量引申出来便是命名空间的概念。

可以使用一个全局对象，之后所有对象都隶属于它。通常可以用公司名来创建，例如：

var BAIDU = {};
BAIDU.util = {};
BAIDU.util.cookie = {...};//用于处理cookie相关

 

3.3: 使用常量把数据从业务逻辑中分离出来。

常见的比如 接口的url、表单的错误文字等。

分离之后为后续的修改或者国际化都提供了便捷。

以下几种情况是很需要分离的

1、重复值 - 重复多次的值应该抽取出来，这样后续修改起来方便，也避免了漏改的情况。

2、用户界面字符串 - 为以后国际话做铺垫。

3、URLs - url改变后可以快速修改

4、任何可能会改变的值 - 每次用到字面量的时候，问下自己这个值以后是否会改变，如果会，那么应该提出出来作为一个常量。

 

 

二、性能

1、注意作用域

在一个函数中将多次用到的全局变量保存为局部变量。

2、避免使用with语句

3、访问数组比访问对象快，减少查找对象属性的次数。如果可以用数字位置和命名属性访问，那么用数字。例如:

var img = document.getElementsByTagName("img");

img[0] //使用这种方式访问第一个img

4、避免显示或者隐示的调用eval，比如说直接用eval或者在setTimeout中传入字符串

5、使用原生的方法，比如求一个数的平方，那么用Math对象提供的方法更快。

6、switch比复杂的if-else要快，而且switch按照最可能和最不可能的顺序排列可以进一步优化switch

7、使用单个的var来声明所有变量可以加快速度。

8、var name = values[i]; i++; 可以优化成 var name = values[i++];

9、最大程度减少对DOM的操作。比如要插入很多条列表，可以先在js中拼装好，然后插入一次。使用innerHTML比appendChild要快。

10、使用事件委托。

11、减少对NodeList对象的访问，因为每次访问都会实时查询。这里面可以引申出缓存jquery对象。例如

var images = document.getElementsByTagName("img");

for(var i = 0, len = images.length; i < len ; i++){}

这里使用len保存images.length，就避免了每次判断的时候访问images的length属性。

然后这里使用了images保存document.getElementsByTagName("img");也避免了之后每次的查找。

 

 

三、部署

1、构建过程

开发时把js分成多个文件，以提高维护性。发布时通过构建工具，合并代码。

2、验证

构建工具中可以加入验证工具，如jslint

3、压缩

3.1 文件压缩（减少代码长度）

一般有这些操作，删除空白、删除注释、缩短变量名

3.2 HTTP压缩（减少传送字节数）

一般通过设置web服务器用gzip压缩。所有浏览器都可以解压gizp的。

 

 

 

转载本站文章请注明作者和出处 奇葩一朵朵 – http://www.cnblogs.com/season-huang/ ，请勿用于任何商业用途