码迷,mamicode.com
首页 > 其他好文 > 详细

犀牛书读书笔记-01

时间:2014-08-26 22:40:36      阅读:349      评论:0      收藏:0      [点我收藏+]

标签:style   blog   http   color   os   java   使用   io   strong   

第一章,概述


这章是综述性质的,作者随意的给出了一些例子。

1. visibility = hidden, display = none。

function hide (e, reflow) {
        if (reflow) {
            e.target.style.display = "none";
        } else {
            e.target.style.visibility = "hidden";
        }
}

这段代码展示了两种隐藏节点的方式,之前在项目中接触最多的是display=none,对visibility=hidden的方式没用过,还不知道这种方式和display = none有什么区别。
visibility = "hidden",元素会隐藏,但是不会把元素从渲染树种拿掉,它依然会部分渲染,只是不可见而已(变成完全透明,只会触发repaint)。
display = "none",那么元素就不会渲染,整个从渲染树中拿掉了。会触发reflow与repaint。
比如

block one
block two
block three

中间的元素visibility = hidden

block one
hidden block
block three

中间的元素display = none

block one
hidden block
block three

其实我想问为什么中间那个所谓只会触发repaint的隐藏方式会傲娇的多出来一截。。。。。。显然这种情况下浏览器会reflow的。想想可能是因为我用了自动宽度。果然,这样就和谐多了。
使用固定宽度

block one
block two
block three
block one
block two
block three

2. Bind events with DOM node‘s "on" attributes。

给DOM元素定义事件最简单的方法是,给DOM节点以"on"为前缀的属性绑定一个回调。出于页面维护性的考虑,这种代码和HTML节点写一块儿玩法正常情况下很少会用到。

<div style = "border: 1px solid gray" onmousedown="(function(node){node.textContent = new Date().toString();})(this);">点击我文字会改变</div>
<div style = "border: 1px solid gray" onmouseup="(function(event){event.target.textContent = new Date().toString();})(event);">点击我文字会改变</div>

3. addEventListener。

玩的更多的应该还是addEventListener。

<div id = "click_node">点击我看看</div>
<script>
    window.onload = function() {
        var node = document.getElementById(‘click_node‘);
        if (node && node.addEventListener) {
           node.addEventListener(‘mousedown‘, function(){
               node.textContent = "mouse down on node";
           }, false);
           node.addEventListener(‘mouseup‘, function(event){
               node.textContent = "mouse up on node";
           }, false);
        }
    }
</script>

注意几个小问题,比如addEventListener的第一个参数是需要绑定的事件名,全小写的,而且没有”on”前缀。(如果兼容老版IE用attachEvent的话则需要加上on前缀)。第三个参数是用来指定是否把linstener注册在事件的capture阶段,一般都是false,也是使用element.onclick = function(){}这种绑定方式的的默认行为。

关于DOM事件的生命周期,可以参考一下这篇文章。这里插一句,文章中提到通过阻止没必要的事件冒泡可以提升性能,不过作者提到的event.cancelBubble这种方式并不被提倡(参考),应该使用event.stopPropagation()来替代这种方式。

 

第二章,词法结构


这章主要内容是JS程序的词法构成,并没有什么需要特别注意的。

1. JavaScript会认为它正在解析的程序代码已经是这种标准格式,不会再对标示符、字符串、正则表达式做标准化处理。

关于JavaScript与Unicode,我准备专门再写一篇总结文章。这个Normalization问题有时候挺烦人的,特别是要对字符串做细致处理的时候。ES6已经添加一个新方法String.prototype.normalize来提供这个功能,在此之前可以使用一些库来完成,比如unorm (https://github.com/walling/unorm)(by Bjarke Walling).

2. 在return、break、continue语句和随后的表达式之间不能有换行。

否则会出现难以调试的程序问题。正常人应该都不会这么写的。

3. “++”与“--”作为后缀的时候要与表达式在同一行。

同上,正常人不会另起一行写++--的。

 

第三章,类型、值和变量


1. JavaScript的数据类型分为两类:原始类型(primitive type)与对象类型。简单(原始)类型(simple types)有numbers、strings、booleans、null 和 undefined。剩下的其他的都是对象类型。

注意一下number、string、boolean是类对象(object-like)因为他们有一些预定义的方法,但它们是immutable的。

2. JS不区分整数和浮点数。所有的数字都是双精度浮点数,采用IEEE 754标准。JS中实际的操作(比如数组索引、位操作)则是基于32位整数。

由于是双精度浮点数,所以有喜闻乐见的 0.1 + 0.2 != 0.3。任何采用二进制浮点数的编程语言都会有这个问题。
关于实际操作,比如位操作时使用32位整数, 写代码时可以利用这个特性来把小数转换成整数,参考我这篇文章,《javascript中小数转换为整数》
IEEE 754 中关于双精度浮点数的规定是1位数符、11位阶码再加上52位的有效数位。由于规范要求小数必须是标准形式,即小数点左边为1,所以用52位有效数字表示了53位的  信息。其所能精确表示的整数范围就是 2^53 ~ -2^53。

3. JS中的NaN有一点特殊:它和任何值都不相等,包括自身。

所以看到dojo库中有这样的equals,也是为了让两个NaN能够“相等”。

function equals(a, b){
    return (a === b) || ( a !== a && b !== b);
}
4. JS中字符串是Immutable的,类似replace、toUpperCase都是返回新串。

其实前面第一条讲类型时已经说过了。

5. JS中有“包装对象”的存在,前面提到的使用简单类型的方法实际上是通过创建临时的包装对象,然后再使用包装对象的方法。null和undefined没有包装对象,试图引用他们的任何属性都会抛错。

简单对象虽然看起来有一些属性,比如"123".length, 但是试图给它赋值属性(如"123".attr = 4)会被忽略掉 ("123".attr is still undefined)。

6. JS会在必要的时候把包装对象转换成原始值。如“==”认为原始值与其包装对象相等(包装对象会向原始值转换),但是“===”不会进行任何转换,所以不等。

对象原始值的比较(==)会试图把对象的原始值求出来再比较,如果是两个对象比较,则比较他们是否引用同一个对象。

var  a = ‘a‘,
     b = ‘a‘,
     c = new String(‘a‘);
     d = new String(‘a‘);
a == b // true
a === b // true   a == c // true, 会转换
a === c // false, 全等不转换 c == d // false, 两个对象的比较
c === d // false, 没悬念

7. 对象向原始值的转换有些复杂。显示转换最简单,比如 Number("3"), Object(3)。

有一些常用的简单写法

+x //把x转换成Number, 相当于Number(x), 也可以写成 x - 0,不过没+x看起来好看
!!x //估计大家见得多了,相当于Boolean(x)

8. Object to Boolean 所有的对象类型都会转成true。

所以别太惊讶,new Boolean(false)实际上是会转换成true。

if(new Boolean(false))
   console.info("yes, new Boolean(false) is truthy");

9. Object to Number/String, 涉及到toString(), valueOf()这两个方法,一般情况下转成string,toString会先调用,不行就valueOf;转成number则顺序颠倒。

10. “-“会把它的两个操作数都转换成数字。而对于”+“,很多时候+的操作数会被转换成字符串。

[1] + 1; // ”11“
[1] - 1; //0
new Date() + 1; //"Sun Aug 10 2014 00:20:41 GMT+0800 (China Standard Time)1"
new Date() - 1; //1407601216775

11. 关于变量,JS中没有块级作用域,JS是函数作用域。所以有一种”声明提前“的非正式称谓(hoisting)。

实际上JS脚本虽然是解释执行,但是在逐行执行之前还有一个”预编译“的过程,这个过程会把context中声明的变量放入”栈“中,并未他们赋值为undefined,然后再开始逐条执行语句。

体会一下这个例子

a();
function a() { console.info(1);}
a();
function a() {console.info(2);}
a();
a = function () { console.info(3);}
a();
//输出:
//2 2 2 3

12. 使用var 声明的变量无法被delete删除,而作为对象的属性可以。

删除一个你自己声明的变量确实没有什么必要。

(function() {
    var a = ‘123‘;
    console.info(a);
    delete a;
    console.info(a);
})();
//输出两个”123“

13. 作用域链与闭包。

这个我决定再单独开一个坑。


犀牛书读书笔记-01

标签:style   blog   http   color   os   java   使用   io   strong   

原文地址:http://www.cnblogs.com/chrissitang/p/3898244.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!