朋友推荐的一本书(http://eloquentjavascript.net/),趁最近不忙看了下。

总的来说这本书一般吧,不大适合JS入门读者,因为里面的例子比较败笔,比较学术性不够生动和切符实际工作应用。

对于JS的书,个人还是推荐《head first javascript》~事实上据说head first那系列的书都还不错。

每本书总有其可取之处的,如果你计划也看这本书,或许你直接过一下我的笔记好了。。。

注:英文为原文,中文为我的注释。没有英文的中文是我直接翻译过来的。

 

本文为读书笔记的第2部分(第一部分在这里),针对eloquent javascript的后面两章:浏览器事件HTTP Request。这两章内容推荐看看。

 

1,It is important to realise that, even though events can fire at any time, no two handlers ever run at the same moment.

If other JavaScript code is still running, the browser waits until it finishes before it calls the next handler.
事件的处理函数是“同步执行”的,也就是说,同一时刻同一事件的多个处理函数不可能同时被调用。

 

2,In programmer jargon, browser JavaScript is single-threaded, there are never two 'threads' running at the same time
用编程术语来说,js应用是单线程的。。

 

3,the most incompatible browser is Internet Explorer, which ignores the standard that most other browsers follow. After that, there is Opera, which does not properly support some useful events, such as the onunload event which fires when leaving a page, and sometimes gives confusing information about keyboard events
最不遵循标准的浏览器:IE和Opera...

 

4,Most browsers pass the event object as an argument to the handler. Internet Explorer stores it in the top-level variable called event.
大多数浏览器会将event对象作为参数传给事件处理函数。但IE另类地将这个event对象存储在全局变量event中。
所以在事件处理函数内部,要引用事件对象,可以使用||操作符处理下

function handler(evt){
    evt=evt||window.event;
};

当然,如果你用jquery,浏览器之间的这些差异基本上都不用考虑

 

5,A,mousedown=>mouseup=>click
    B,(mousedown=>mouseup=>click)x2=>dblclick
    A,单击一个按钮时事件的执行顺序
    B,双击一个按钮时事件的执行顺序。(firefox下面测的,别的浏览器没试)

 

6,Event objects related to the mouse contain clientX and clientY properties, which give the x and y coordinates of the mouse, in pixels, on the screen.
Documents can scroll, though, so often these coordinates do not tell us much about the part of the document that the mouse is over.
Some browsers provide pageX and pageY properties for this purpose, but others (guess which) do not.
Fortunately, the information about the amount of pixels the document has been scrolled can be found in document.body.scrollLeft and document.body.scrollTop.

事件处理函数的事件对象的clientX、pageX、scrollLeft..
clientX-相对于屏幕。
pageX-相对于文档。
(clientY和pageY的理解同理)
显然,当水平有滚动条且滚动值大于0时,pageX会大于clientX,且理论上pageX=clientX+(document.body.scrollLeft或window.pageXOffset)

有些浏览器的事件对象是没有pageX属性的。。。比如IE 

凡是页面顶部声明为:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/2000/REC-xhtml1-20000126/DTD/xhtml1-transitional.dtd">
或者HTML5标准的<!DOCTYPE html> ,document.body要改为document.documentElement,否则document.body.scrollLeft总为0。

示例http://vivasky.com/labs/jsfocus/js_eventTests.html

 

7,keydown=>keyup=>keypress
Internet Explorer does not generate a keypress event at all for special keys such as the arrow keys.
在IE下,方向键根本没有keypress事件~(经本人测试确实如此)
示例http://vivasky.com/labs/jsfocus/js_eventTests.html

 

8,xml http request的简单泛化封装

 

代码
function XHR() {
try {return new XMLHttpRequest();} /* Most contemporary browsers */
catch (error) {};
try {return new ActiveXObject("Msxml2.XMLHTTP");} /* IE */
catch (error) {};
try {return new ActiveXObject("Microsoft.XMLHTTP");} /* IE5.5 and below? */
catch (error) {};

return null;
};

 

 


关于xml http request的更多信息,可以访问示例http://vivasky.com/labs/jsfocus/js_xhr.html

9,Recognizing arrays can be tricky, since its type is "object". You can use instanceof Array, but that only works for arrays that were created in your own window ― others will use the Array prototype from other windows, and instanceof will return false. A cheap trick is to convert the constructor property to a string, and see whether that contains "function Array".
如何识别一个对象是否数组?
直接使用instanceof Array具有不稳定因素。对于在子窗体创建的数组,在父窗体内使用instanceof Array会返回false...   
可通将此对象的构造器函数转化成字符串,看是否含有"function Array"..

var x=[];
console.log(x
instanceof Array);
console.log(x.constructor.toString())
alert(
/^\s*function Array/.test(x.constructor.toString()));

 

 

 

10,There is a keyword named with. I've never actually used this in a real program, but I have seen other people use it, so it is useful to know what it is. Code using with looks like this:

var scope = "outside";
var object = {name: "Ignatius", scope: "inside"};
with(object) {
  print("Name == ", name, ", scope == ", scope);
  name = "Raoul";
  var newVariable = 49;
}
show(object.name);
show(newVariable);
关键字with,我也从来没用过。。。

作者: Mamboer 发表于 2010-12-17 09:38 原文链接

推荐.NET配套的通用数据层ORM框架:CYQ.Data 通用数据层框架
新浪微博粉丝精灵,刷粉丝、刷评论、刷转发、企业商家微博营销必备工具"