《众妙之门:JavaScript 与 jQuery 技术精粹》部分要点摘录

5,325
《众妙之门:JavaScript 与 jQuery 技术精粹》部分要点摘录
  • 4.00 / 5 5
4.00分(5票)

以下内容来自于《众妙之门:JavaScript 与 jQuery 技术精粹》一书,为本人在阅读的时候感觉有必要记录的地方记录而来。

三重标记法

1
2
3
4
5
6
7
8
var d;
if(x < 200){
    d = 1;
} else {
    d = -1;
}
 
var d = x < 200 ? 1 : -1;

数组的遍历& 性能影响

1
2
3
4
5
6
7
8
9
10
11
/* cached outside loop*/
var len = myArray.length;
for (var i = 0; i  < len; i++) {}
 
/* cached inside loop */
/* 数组长度在每个循环中都被不必要的重复访问,如此导致程序运行缓慢*/
for (var i = 0, len = myArray.length; i < len; i++){}
 
/* cached outside loop using while */
var len = myArray.length;
while (len--){}

命名空间模式

问题:程序中使用的命名空间是正确的,但对其存在性的检查无效。如下例:

1
2
3
if (!MyNamespace){
MyNamespace = {};
}

执行过程中!MyNamespace 会报错,变量之前么有做声明。较好的处理方式:

方式一

1
2
3
if (!MyNamespace){
MyNamespace = {};
}

方式二

1
var MyNamespace = MyNamespace || {};

方式三

1
2
3
if( typeof MyNamespace == 'undefined'){
    var MyNamespace = {};
}

JavaScript 部件的七部测试法

  1. 当JavaScript 关闭时会发生什么?
  2. 怎样改变外观、感受和内容?
  3. 最终产品的可用性和语义性如何?
  4. 是否明白在发生神马?(当出错时候能否快速定位问题?)
  5. 与其他语言的交互性如何?
  6. 维护人员是否专注?
  7. 是否有测试方案,升级或扩展是否简单易行?

数据类型相关概念

1
2
3
4
5
6
7
8
9
10
11
12
13
14
typeof null
> "object" //Null 是一个对象
 
null instanceof Object
> false //Null 不是对象的实例
 
typeof NaN
> "number" //NaN 是一个数字
 
NaN === NaN
> false //NaN 不等于任何值
 
new Array() == false
> true //空数组 == false

JavaScript 七宗罪

根源:特定于浏览器的代码

  • 与其他脚本兼容不好
  • 相信取代测试(默认所有东西都是正确的)
  • 使用错误的技术进行设计(不赞同)
  • 依赖于 JavaScript 和特定的输入设备
  • 维护麻烦
  • 未进行文档整理的代码
  • 为机器而非人优化

jQuery 的几个易混淆概念

parent()、parents()、closest()

parent() 用于匹配元素的直接父元素。

parents() 类似于parent(),返回的是多个父元素。

closest() 类似于parents(),但只返回一个父元素或祖先元素,且为最近的元素。

position() 与 offset()

position() 计算相对于偏移父元素(即含有position:relative 的元素的最近父元素,如果没有,相对于文档)

offset() 则总是计算相对于文档的位置。

css(‘width’)与css(‘height’)、width()与height()

前者返回字符型维度,以px 为单位;后者返回整数型维度。

click()、bind()、live()、delegate()

bind()可以一次绑定多个事件,并可以传递回调函数。

1
2
3
4
5
var message = "right";
$("a").bind("click contextmenu", { msg: message }, function(e) {
    alert(e.data.msg);
    return false;
});

live()类似bind(),区别在于可将事件绑定到当前和将来的元素(通过DOM 脚本生成的元素)

delegate() 在jQuery 1.4.2 中出现的未来弥补live()无法直接用于链式结构。

1
2
3
4
5
6
7
8
9
//无效的
$("#test").children("a").live("mouseover", function() {
    alert("hello");
});
 
//
$("#test").delegate("a", "mouseover", function() {
alert("hello");
});

not()、is()、:not()区别

not() 返回不匹配的元素、is()只会返回布尔值、:not()可用于选择器字符串中。

喵~本文目前有2条留言,欢迎发表评论!

  1. 板凳也不错
    :

    博主的主題不錯。

    [回复]
  2. 传说中的沙发
    :

    技术博客真不错

    [回复]

打破沉默,我来发表评论鸟~