第一次写这种东西, 有些生涩和蹩脚, 也是为了自己在表达或是总结方面有所提高, 同时为看过的东西留个痕迹, 以便日后查阅.
有错误或是不妥的地方, 还望各位指正, 谢谢!
第1章 简介
本章主要介绍了本书要讨论的内容, Javascript的一些基本概念, 面向对象, 原型, ECMASCript5, JSLine和console的相关内容.
不做过多阐述, 给出模式的定义
广义上: 模式是一个可以用来产生其他事物的模板或模型.
在软件开发中, 模式是指一个通用问题的解决方案.
书中主要讨论三种类型的模式: 设计模式, 编码模式, 反模式.
所谓反模式, 不是bug, 但使用它时, 引发的问题往往比解决的问题多...
第2章 基本技巧
编写可维护的代码
不用多说, 大家都有过阅读别人写的代码的历经, 确实阅读代码比写代码需要更多的时间.
每个人的想法是一样的, 甚至同一个人现在的想法与一周前的也会不一样, 写出的代码也就有所不同.
如果这些代码不易于维护, 可读性差, 那就更消耗时间.
易于维护的代码应具备如下特性:
- 可读性好
- 具有一致性
- 预见性好
- 看起来如同一个人编写
- 有文档
尽量少用全局变量
全局变量意味着在整个js应用或是页面中, 它们被共享. 有极大的可能出现命名冲突.
例如在一个脚本里定义了全局变量result, 后来又在某函数中定义了一个也叫result的全局变量,
那么就会导致脚本中的result变量被覆盖, 脚本无法正常工作.
首要的规则就是用var定义变量, 如下:
function sum(x, y) {
var result = x + y;
// 反模式: 使用了全局变量
// result = x + y;
return result;
}
另外, 在使用var定义变量时, 不要使用链式赋值. 例如:
// 反模式, 不要使用
function fun() {
var a = b = 7;
// a为局部变量, b为全部变量
// 原因: 从右至左的操作符优先级, var a = (b = 0);
// ...
}
// 如果对链接赋值的变量都进行了声明, 则不会出现全局变量, 如:
function fun() {
var a, b;
a = b = 8;
}
明确定义的全局变量与隐式定义的全局变量有微小的不同, 不同之处在于能否用delete撤消变量
- 使用var定义的全局变量(在函数外创建)不能删除.
- 不使用var定义的全局变量(在函数内创建)可以删除.
这说明隐式定义的全局变量严格来说不是真正的变量, 真正的变量不能被删除的, 它只是全局对象的一个属性, 只有属性可以被delete的掉
借用书中的例子:
// 定义三个变量
var global_var = 1;
global_novar = 2; // 反模式
(function(){
global_fromfun = 3; // 反模式
}());
// 试着执行delete
delete global_var;
delete global_novar;
delete global_fromfun;
// 查看操作结果
console.info(typeof global_var); // number
console.info(typeof global_novar); // undefined
console.info(typeof global_fromfun); // undefined
注: ES5的strict模式中, 为没有声明的变量赋值会抛出错误.
单一var定义变量
可提高代码可读性, 同时在声明变量时也可同时赋值或做一些其他的操作. 例如:
function func() {
var x = 2,
y = 3,
sum = x + y,
obj = {
};
// ...
}
提升: 凌散变量问题
所谓提升, 就是在Javascipt函数里, 允许在任意地方声明多个变量, 无论在哪里声明, 效果都跟在函数的顶部声明一样.
问题举例:
name = 'global'; // 全局变量
(function func() {
console.info(name); // undefined
var name = 'local';
console.info(name); // local
}());
// 局部变量name的声明被提升了, 等同于下面这样:
name = 'global'; // 全局变量
(function func() {
var name; // 等同于 ==> var name = undefined;
console.info(name); // undefined
name = 'local';
console.info(name); // local
}());
所以, 建议, 最好在函数开始就声明好要用的所有变量.
关于for循环
重点是缓存数组或类数组的长度
for(var i=0; i<arr.length; i++) {
// ...
}
像这种访问方式, 每次循环都会访问数据的长度, 这样会使得代码变慢,
尤其是当arr不是真正的数组, 而是HTML集合对象时更为严重, 比如:
document.getElementsByName();
document.getElementsByTagName();
document.getElementsByClassName();
集合对象是DOM下的活动对象, 每次访问在它们的长度也就是在访问活动的DOM, DOM操作是相当耗时的.
缓存数据长度的for循环如下:
for(var i=0, len=arr.length; i<len; i++) {
// ...
}
另外, 书中提到两个更有效率的循环方式, 有兴趣的可以学习一下.
主要就是使用最少的变量, 且逐步减至0, 因为与0的比较会更有效率, 代码如下:
// 第一个仍然是for循环
for(var i=arr.length; i--;) {
// ...
}
// 第二个是while
var i = arr.length;
while(i--) {
// ...
}