首頁 > 開發者 > JavaScript
朋友推薦的一本書(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另類地將這個eventObject Storage Service在全域變數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，我也從來沒用過。。。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
