JavaScript部分
1. 总是使用===来进行相等判断
原因:由于 == 和 != 操作符存在类型转换问题,而为了保持代码中数据类型的完整性,推荐使用全等 === 和不全等 !=== 操作符。
2. 总是使用";"来结束一条语句
原因:JavaScript允许不使用";"来结束语句,当没发现";"的时候,JavaScript会自己判断何时是语句结束了,这种不确定性大大的提高了出错的几率,所以请严格要求自己,使用";"结束一条语句。
3. 总是使用字面量去创建内置类型的实例
原因:使用new创建的包装类型与使用字面量定义的轻量化的"值类型",拥有的方法列表是一样的,有什么理由用new?
示例:
var name = 'Frank';
var age = 10;
var util = {/*...*/};
var m1 = function() {/*...*/};

4. 总是使用var去定义变量

原因:虽然可以不使用var去定义变量,但是最好不要这么做,除非你想自找麻烦。
示例:
var name = 'Frank',
age = 10,
util = {/*...*/};

上面例子中是推荐的一种单行定义多个变量的写法。

5. 如非必要,避免使用全局变量
原因:全局就代表不安全,容易被修改,容易被覆盖,如非必要,避免使用。
6. 在if/for等语句块中,总是写上大括号{},即使只有一条语句
原因:避免歧义。
示例:
if (true) {
alert('msg');
}

7. 起始的大括号总是写在上一行行末

原因:避免其他的一些问题导致JavaScript编译器错误断句。
示例:
var foo = function() {
  alert('foo');
};
8. 使用命名空间
原因:避免命名冲突。
示例:
var util = {};
util.checkName = function() {/*...*/};

9. 除了"构造函数"外,所有的函数(也包括变量)总是使用驼峰命名规范

原因:公认的推荐写法。
示例:
var myName = 'bar';
function checkName(name) {
//...
}

10. 正确使用循环

1). 使用for循环或者foreach方法遍历数组,使用for..in循环遍历对象,这个不多说了,前面遇到多次了。
2). 缓存边界,提高效率,示例如下:
for(var i=0, len = arr.length; i < len; i++) {
//...
}

3). 尽量不要在循环体中创建变量,特别是jQuery对象或者DOM对象,开始循环前缓存起来吧:

var obj = $('.name');
for(/*...*/){
// 使用obj去做某些事
}

11. 尽量多使用单引号表示字符串

原因:HTML元素中多使用双引号,所以JavaScript代码中尽量多使用单引号吧。
示例:
var name = 'Frank';

当然了,出现字符串嵌套的时候就要混用单双引号了。

12. 尽量不使用with语法
with的本意是减少键盘输入。比如
obj.a = obj.b;
obj.c = obj.d;

可以简写成

with(obj) {
  a = b;
  c = d;
}

但是,在实际运行时,解释器会首先判断obj.b和obj.d是否存在,如果不存在的话,再判断全局变量b和d是否存在。这样就导致了低效率,而且可能会导致意外,因此最好不要使用with语句。

13. 尽量不使用eval函数
eval用来直接执行一个字符串。这条语句也是不应该使用的,因为它有性能和安全性的问题,并且使得代码更难阅读。
eval能够做到的事情,不用它也能做到。比如
eval("myValue = myObject." + myKey + ";");

可以直接写成

myValue = myObject[myKey];

至于ajax操作返回的json字符串并执行的需求,可以直接使用JQuery的$.getScript方法实现。

同样的道理适用于setInterval或setTimeout函数的第一个参数,直接传函数吧。
14. 尽量不使用switch贯穿
switch结构中的case语句,默认是顺序执行,除非遇到break,return和throw。有的程序员喜欢利用这个特点,比如
switch(n) {
  case 1:
  case 2:
    break;
}

这样写容易出错,而且难以发现。因此建议避免switch贯穿,凡是有case的地方,一律加上break。

switch(n) {
  case 1:
    break;
  case 2:
    break;
}

15. 不使用位运算符

原因:Javascript完全套用了Java的位运算符,包括按位与&、按位或|、按位异或^、按位非~、左移<<、带符号的右移>>和用0补足的右移>>>。这套运算符针对的是整数,所以对Javascript完全无用,因为Javascript内部,所有数字都保存为双精度浮点数。如果使用它们的话,Javascript不得不将运算数先转为整数,然后再进行运算,这样就降低了速度。而且"按位与运算符"&同"逻辑与运算符"&&,很容易混淆。
16. 不要扩展内置类型的原型
原因:这样会导致可维护性的问题,因为这会让你的代码的移植性变差。其他的开发人员使用你的代码的时候,可能只需要原生的方法,并不需要额外的功能。
17. 大型程序推荐使用面向对象的写法使用JavaScript(闭包实现封装性,原型链实现继承)
原因:便于扩展,便于使用。
18. 小心使用typeof, instanceof进行类型判断
原因:我们前面在总结对象的若干问题的时候(http://www.cnblogs.com/dxy1982/p/3766606.html)已经详细讲解过这两个操作了,大部分情况下得不到我们想要的结果,其实在弱化类型的动态语言中,个人并不太推荐进行类型检查。这里简单看个例子:
var arr = [0, 1];
alert(typeof arr); // object
alert(arr instanceof Array); // true
alert(Array.isArray(arr)); // 比instanceof更好的写法

19. 谨慎对浮点数经行判等

这个是所有计算机语言浮点数都可能存在的问题,看例子以及常见方案:
// 错误比较浮点数
alert((0.1+0.2) === 0.3);
// 常见的解决方案
var epsEqual = function () {
var EPSILON = Math.pow(2, -53);
return function epsEqual(x, y) {
return Math.abs(x - y) < EPSILON;
};
}();
alert(epsEqual(0.1+0.2, 0.3));

20. 时刻检查传入数组中的index参数是否是负数

原因:有的函数可以接收负数,这样用好能达到奇效,但是误用可能导致奇怪的问题。
看例子:
var arr = [1,2,3,4,5];
var index = arr.indexOf('foo'); // index = -1
alert(arr.splice(index, 2)); //

是你想要的结果吗?

21. 原始运算符始终比函数高效
原因:原生的操作符执行效率最高。
看例子:
// 使用函数是有开销的
var min = Math.min(a, b);
// 推荐的写法
var min = a < b ? a : b;

22.将脚本放在页面的底部,并且采用HTML5的写法

原因:这个做法的用意是让页面尽可能快的呈献给用户,脚本的加载默认是阻塞的,脚本加载并执行完之前,浏览器不能继续渲染下面的内容。因此,用户将被迫等待更长时间。这绝对是个有益的实践。看个例子:
<script src="path/to/file.js"></script>
<script src="path/to/anotherFile.js"></script>
</body>
</html>

23. 总是使用数组的toString方法(简单)或者join方法(可以自定义格式)输出数组字符串

原因:啥也别说了,相当快捷:
var arr = [1,2,3,4,5];
alert(arr.toString());
alert(arr.join(','));
// 稍微复杂一点的例子
var arr = ['item 1', 'item 2', 'item 3', ...];
var list = '<ul><li>' + arr.join('</li><li>') + '</li></ul>';

这种情况下,忘了for循环吧。

24. 时刻提供清晰的调用目标来减少作用域链的检查
原因:提高执行效率。
示例:
// 低效率方法
var url = location.href;
// 相对高效一点的用法
var url = window.location.href;

这个原理同样适用于"多定义局部变量,少定义全局变量"。

 
JQuery部分
1. 总是使用最新版本的JQuery
原因:这个不用多说,大部分情况下,新版本代表更好的性能,更多的功能。
2. 优先使用ID与标记选择器
原因:选择器的选择速度从快到慢依次是:ID,TAG,CLASS。所以如果ID能访问就用id,否则就尝试用tag访问,再不行才用class。快的原因是有原生方法的支持,比如getElementById就很快。当然伪类选择器和属性选择器比上面这些方式更慢。
3. 需要多次使用同一个jQuery对象时缓存该对象
原因:选中某一个网页元素,是开销很大的步骤。所以,使用选择器的次数应该越少越好,并且尽可能缓存选中的结果,便于以后反复使用。
比如,下面这样的写法就是糟糕的写法:
$('#top').find('p.classA');
$('#top').find('p.classB');

更好的写法是:

var cached = $('#top');
cached.find('p.classA');
cached.find('p.classB');

4. 多使用链式操作

$('div').find('h3').eq(2).html('Hello');

原因:采用链式写法时,jQuery自动缓存每一步的结果,因此比非链式写法要快。

5. 使用data方法缓存数据
在jQuery中,可以通过data()方法将数据缓存,虽然使用局部或全局的变量可以保存数据,但变量并不能进行数据的缓存,而且并不依附于某个元素自身;如果使用data方法,可以针对元素定义数据,在元素中存取数据,从而避免数据被循环引用的风险。而且data方法支持存放JSON数据,相当方便:
var cached = $('#p');
cached.data('_data');//初始化
cached.data('_data',{//赋值
name: 'haha'
});
cached.data('_data').name;//获取JSON中的name值

虽然使用data()方法可以很方便地存取全局性数据,但存储的数据随着操作的变化,会越来越大,如果不及时进行清理,将会影响原有程序的执行。

还有一点,如果你真的要在DOM元素上储存数据,不要写成下面这样:
var elem = $('#elem');
elem.data(key,value);

而要写成

var elem = $('#elem');
$.data(elem[0],key,value);

根据测试,后一种写法要比前一种写法,快了将近10倍。因为elem.data()方法是定义在jQuery函数的prototype对象上面的,而$.data()方法是定义jQuery函数上面的,调用的时候不从复杂的jQuery对象上调用,所以速度快得多。

6. 如非必要,尽量使用原生方法
原因:原生方法比对应的JQuery方法要快很多,所以如非必要,应少用一些JQuery方法,多使用一些JavaScript的原生DOM方法。比如插入html代码的时候,浏览器原生的innterHTML()方法比jQuery对象的html()更快。又如JavaScript原生循环方法for和while,要比jQuery的.each()方法快,应该优先使用原生方法。
7. 少改动DOM结构
1). 改动DOM结构开销很大,因此不要频繁使用.append()、.insertBefore()和.insetAfter()这样的方法。
如果要插入多个元素,就先把它们合并,然后再一次性插入。根据测试,合并插入比不合并插入,快了将近10倍。
2). 如果你要对一个DOM元素进行大量处理,应该先用.detach()方法,把这个元素从DOM中取出来,处理完毕以后,再重新插回文档。根据测试,使用.detach()方法比不使用时,快了60%。
3). 可以使用DocumentFragment,一个轻量级的文档对象,来作为临时媒介,完成DOM一次性插入。添加元素的时候,我们可以把元素先保存到该对象中,这并不会触发浏览器重绘。当添加结束后,再使用该对象执行一次DOM插入操作,这样就可以避免过多的浏览器重绘。看下面的例子:
function addDivs(element) {
var div;
// Creates a new empty DocumentFragment.
var fragment = document.createDocumentFragment();
for (var i = 0; i < 20; i ++) {
div = document.createElement('a');
div.innerHTML = 'Hi!';
fragment.appendChild(div);
}
element.appendChild(fragment);
}

8. 如有可能,多使用工具方法(静态方法),而不是jQuery对象的方法(实例方法)

许多jQuery方法都有两个版本,一个是供jQuery对象使用的版本,另一个是供jQuery函数使用的版本。下面两个例子,都是取出一个元素的文本,使用的都是text()方法。
你既可以使用针对jQuery对象的版本:
var $text = $("#text");
var $ts = $text.text();

也可以使用针对jQuery函数的版本:

var $text = $("#text");
var $ts = $.text($text);

由于后一种针对jQuery函数的版本不通过jQuery对象操作,所以相对开销较小,速度比较快。

JavaScript大杂烩16 - 推荐实践的更多相关文章

  1. javascript编程的最佳实践推荐

    推荐的javascript编程的最佳实践,摘要记录在这里: 可维护的代码保证代码的性能部署代码 1 可维护的代码1.1什么是维护的代码:可理解性——其他人可以接手代码并理解它的意图和一般途径,而无需原 ...

  2. JavaScript相关图书推荐

    JavaScript语言精粹(修订版) 作      者 Douglas Crockford(道格拉斯·克罗克福德) 著:赵泽欣 等 译 出 版 社 电子工业出版社 出版时间 2012-09-01 版 ...

  3. (译) 《Javascript 24条最佳实践》

    (摘录) <Javascript 24条最佳实践> 自己一直偏向于实用主义,不是学院派,不是学究派,只讲究把东西能够很好的做出来,但经过一段时间的开发工作当自己总结出来一些东西时,觉得挺有 ...

  4. JavaScript大杂烩17 - 性能优化

    在上一节推荐实践中其实很多方面是与效率有关的,但那些都是语言层次的优化,这一节偏重学习大的方面的优化,比如JavaScript脚本的组织,加载,压缩等等. 当然在此之前,分析一下浏览器的特征还是很有意 ...

  5. 《Javascript设计模式与开发实践》--读书笔记

    第2章 this call apply bind()方法创建一个新的函数,在bind()被调用时,这个新函数的this被bind的第一个参数指定,其余的参数将作为新函数的参数供调用时使用. bind( ...

  6. 《JavaScript设计模式与开发实践》整理

    最近在研读一本书<JavaScript设计模式与开发实践>,进阶用的. 一.高阶函数 高阶函数是指至少满足下列条件之一的函数. 1. 函数可以作为参数被传递. 2. 函数可以作为返回值输出 ...

  7. JavaScript设计模式与开发实践 - 观察者模式

    概述 观察者模式又叫发布 - 订阅模式(Publish/Subscribe),它定义了一种一对多的关系,让多个观察者对象同时监听某一个目标对象(为了方便理解,以下将观察者对象叫做订阅者,将目标对象叫做 ...

  8. JavaScript设计模式与开发实践 - 策略模式

    引言 本文摘自<JavaScript设计模式与开发实践> 在现实中,很多时候也有多种途径到达同一个目的地.比如我们要去某个地方旅游,可以根据具体的实际情况来选择出行的线路. 如果没有时间但 ...

  9. JavaScript设计模式与开发实践 - 单例模式

    引言 本文摘自<JavaScript设计模式与开发实践> 在传统开发工程师眼里,单例就是保证一个类只有一个实例,实现的方法一般是先判断实例存在与否,如果存在直接返回,如果不存在就创建了再返 ...

随机推荐

  1. textarea 赋值的方法

    textarea 赋值的方法 <textarea name="" rows="3" id="note21" ></text ...

  2. centos7 部署YApi

    =============================================== 2018/6/5_第2次修改                       ccb_warlock 更新说 ...

  3. vmware workstation 提示程序包可能有错,错误代码 29141 & 提示不可恢复错误: (vcpu-0)

    问题一:提示程序包可能有错,错误代码 29141 换了n个版本(vmware workstation 10,11, 12),下载了n次,都提示该错误(29141),明明程序包没错啊, 一开始还怀疑是我 ...

  4. 谈谈对JVM的理解

            JVM可谓是学习JAVA基础中的基础了,但仍有不少同学对JVM概念还是比较模糊,甚至没有听说过,对java的理解也只是在基础语法 层面,本文就将对JVM进行初步介绍,因篇幅所限,只能介 ...

  5. Spring的第三天AOP之xml版

    Spring的第三天AOP之xml版 ssm框架 spring  AOP介绍 AOP(Aspect Oriented Programming),面向切面编程.它出来的目的并不是去取代oop,而是对它的 ...

  6. java awt学习笔记

    最近这两天,花了些时间温习了java.awt的学习,故今日花些时间写下自己的总结吧. 1.常见的组件:Button.TextArea.Label.Checkbox.TextField Containe ...

  7. 将MySQL数据库转移到SqlServer2008数据库

    由于工作需要用到了将MySQL数据库转成SqlServer数据库,查了一些资料发现将SqlServer数据库转成MySQL数据库的文章很多,但是反过来的就很少了.下面就将自己的方法分享给大家. 这里用 ...

  8. 浅谈websocket和c# socket(新手篇)

    周末放假没带电脑所以今天分享质量不高,手机没有那些样式看起来可能没有那么方便,今天主要分享一下websocket. (赶紧拿小本本记下来) websocket 你发现是一个组合单词web socket ...

  9. Python知识梳理

    这是个人学习笔记,非教程,内容会有些混乱 极简教程     数据类型 我们可以使用type()函数类获取对象的类型,Python3中内置数据类型包括:None,int,float,complex,st ...

  10. Modbus通信协议 【 初识 Modbus】

    Modbus协议     Modbus 协议是应用于电子控制器上的一种通用语言.通过此协议,控制器相互之间.控制器经由网络(例如以太网)和其它设备之间可以通信.它已经成为一通用工业标准.有了它,不同厂 ...