JavaScript

Dmitry Baranovskiy是何許人也？他是目前世界最優秀的JS開源圖形庫Raphaël的作者，還做了許多JS遊戲自娛，是JS界頂尖高手之一。以下五道題是放於他的部落格上，直到另一個它們被另一個JS高手Nicholas C. Zakas（Yahoo!首頁首席前端工程師）提到，才迅速在網路蔓延開去。大家先試著自己做一下，想不明白才看解析吧。 if (!("a" in window)) { var a = 1; } alert(a); var a =

bind函數，顧名思義，用於為調用函數綁定一個範圍，因為this很容易跟丟它原來所在的範圍，直接指向頂層的window對象。具體結論可參見我另一篇博文《javascript的動態this與動態綁定》。本文專註設計一個無侵入的綁定函數。window.name = "the window object"function scopeTest() { return this.name}// calling the function in global scope:scopeTest()// ->

觀察者模式又稱發布-訂閱(Publish/Subscribe)模式、模型-視圖（Model/View）模式、源-監聽器（Source/Listener）模式或從屬者（Dependents）模式。觀察者模式定義了一種一對多的依賴關係，讓多個觀察者對象同時監聽一個主題對象。這個主題對象在狀態上發生變化時，會通知所有觀察者，使它們能夠自動更新自己。下面拿老外的例子改一改，練練手。 var dom = { each : function(obj,fn,score){

這部分說一下最近非常流行的事件代理。事件代理的實現簡單來說，是把事件綁定到目標元素的祖先元素上，然後通過冒泡或捕獲得到事件來源，然後再判定事件來源是否等於目標元素再執行回呼函數。由於對目標元素的判定有時非常模糊，因此通過判定即可調用回呼函數，這樣，我們就達到一個監聽器為許多事件來源服務的目的。對於效能一向非常不怎麼樣的IE6來說，實在幫了一個大忙。假如，有一個無序列表，點擊彈出它的innerHTML，如果按事件綁定的做法，代碼大概是這樣： var addEvent =

上次說到我們在無菌環境中設計了一個事件代理函數，但效能是個問題，解決它我們需要緩衝節點集合，發現節點集合不足以應對新情況時，再替換這個節點集合，重新開始匹配。下面是新的方案： var delegate = function(selector,type,callback){ var els = $(selector); addEvent(document,type,function(e){ var flag = true;

緩衝系統我以前在部落格寫過了，此後我對javascript的哲學發生很大的改變。以前是盡量避免對原型進行擴充的，但反過來一想，有什麼關係？除非是傻子或特別菜的人才會混用多個庫，能混用庫的人也只有高手才能避免命名衝突的尷尬。十大類庫中，前面幾個都是對原型進行瘋狂擴充的。像mootools，代碼不多，但能實在比jQuery多許多的功能。這就得益於原型擴充帶來的代碼量的減少。當然，我們還是要避免對Object進行擴充，這個真的是牽一髮動全身。在我們開始時先列出一些要用到的工具（突然想起烹飪節目中的材料

模仿jQuery，設計了一個緩衝系統。像jQuery.data這樣的東西，Prototype與mootools也有，目的都是用來輔助事件系統，用來緩衝其中產生的資料，而非緩衝普通函數上次計算的結果。Prototype利用了它的Hash類，mootools沒細看，它內部好像用來緩衝uuid。一個共識是，為頁面用到的元素設定uuid非常有用，要尋找元素時，可以避免重複尋找，也可以用於與事件回呼函數相綁定。由於uuid目前只有IE支援，它叫做uniqueID，格式為ms__id\d+，後面的數字也有名

這主要用於選取器過濾重複元素時用的。涉及三種可能的手段：sourceIndex，uniqueID與自訂的uuid。sourceIndex 擷取元素節點在頁面的出現順序，即為其在document.all集合中的索引號。由於要準確擷取先後位置，如果在其前面插入一個元素節點，那麼它的位置就要加一。換言之，它是動態分配的，每次都要重複計算。注意，IE only，唯讀。uniqueID 也是一個IE

模仿jQuey，建立幾個包裹節點的方法，發現jQuery的方法很低效啊，下一次他又可以說這幾個方法可以提升了多少多少了。原理基本是這樣，如果傳入的是字串，那麼讓它們變成一個元素節點，不過這元素節點也可以有許多層，在最內層把要包裹的元素放進。把字串變成元素節點的方法有如下幾個。1，createElement，IE可以連元素屬性也一起建立，但只能建立一層。2，innerHTML，不過需要對原來的字串進行處理，IE與FF都有許多意想不到的預設行為，可以為你多加一點東西或少加一點東西。3，createC

第一題 (function(){ return typeof arguments; })();//問自動執行函數會返回什麼值 // 就是考Arguments對象的typeof // 看平時用firebug多不多了……第二題 var f = function g(){ return 23; }; typeof g();//問最後一行的執行結果 //根據標準，命名函數運算式的函數名只對函數體內可見//因此報錯第三題 (function(x){ delete

綜觀一個系統的發展，無非是發現一個問題就把它獨立出來解決掉，因此它的所有模組（或者分支）其實針對獨立的問題，這樣我們對這些問題若有什麼更好的解決方案，替換相應的模組便是，要不代碼混雜在一起沒法看了。上一部分就提到了，attachEvent的事件列隊出了些問題，我們要手動構建列隊了。所謂列隊就是有先有後的問題，因此DE大神搞了一個全域的uuid，分配給每個回呼函數。但要注意，每個回調所針對的事件來源與事件類型，因此這不可能一個數組搞定。看：el.attachEvent("onmouseenter"

我們知道，javascript在執行期時是由內到外執行指令碼的，那麼離我們的指令碼最遠的全域對象，很可能要跨越幾層範圍才能訪問到它。不過在IE中，從最內層到最外層要花的時間比其他多出很多。加之，javascript是一種膠水語言，它必須要調用DOM對能完成我們大多數選擇。最著名的就是選擇元素（document.getElementById,document.getElementsByTagName,docuemnt.evaluate,document.querySelector），建立元素（do

這可能是最被忽略的文檔操作之一，這都怪微軟的不作為與W3C的無能，搞到大家只知道appendChild與insertBefore。後來爆出appendChild在IE有bug，好了，以後只用insertBefore了。現在jQuery興起後，無數趕鴨子上架的javascript素人連基本API也不學了，直接上手append， preppend， before， after與replaceWith，這比較悲哀……好了，我們先來看w3c的替換節點方法吧。replacedNode =

滾輪事件是一個非常有用的事件，在翻頁或放大時，通常都用到它。但它在各瀏覽器中實現相容是相對比較困難的，號稱最標準的FF，用了一個私人實現DOMMouseScroll，而使用mousewheel的其他瀏覽器或多或少有點bug。我們先看各瀏覽器對它的支援程度吧。

最近一直為此頭痛，姑且把我能想到的東西都寫出來吧。由於不是簡單把頁面上手寫的script轉為javascript添加，我們需要考慮的東西主要有兩個：載入的順序，載入前後指令碼的運作。先說第一個，假如我們已有一載入機制了，要載入一個新模組，當然新模組是在另一個JS檔案中。這時，我們可以描述為：loader --->

一個完整的事件系統，通常存在以下三個角色：事件對象，用於儲存事件的狀態。事件來源對象，當前事件在操作的對象，如元素節點，文檔對象，window對象，XMLHttpRequest對象等。事件監聽器，當一個事件來源產生一個事件對象時，它會調用相應的回呼函數進行操作。在IE中，事件對象恒為全域屬性window.event的分身。在w3c沒有把其DOM 模型引入網頁時，netscape與微軟已經逼不及待到快他們熟悉的語言中把相關的DOM模型搞進來了。這其實也怪javascript之父忙於把抄襲其他語言，

一個人學許多東西，不等於他會很多東西，學了也會忘的，學了也不等於會運用，這時我們應該整一個很複雜的東西出來，那麼就知道自己到底去到什麼程度。基於這樣的理由，我開始搞架構了，像我群裡面的許多人那樣，因此請不要感到驚奇或敬佩什麼的。我們總是免不了造輪子，前人走過路，我們也不得不走，只不過懷著不同的目的與心情。我也沒有自大到想去挑戰這個挑戰那個，僅僅是想自食其力，或許其最好的結果是拿來與友人切磋切磋。於是掂量一下，總結如下，如果有好心人能迷津指點最好不過。首先要模組化。像jQuery那樣內部看起來亂成

var result = [10] + 1;console.log(result)"101"存在運算子"+"，意味著將[10]轉化為一個值，相當於調用其valueOf()方法，而Array的valueOf相當於其toStringvar result = ['a', 'b', 'c'] + "";console.log(result)"a,b,c"與一個Null

經幾天思考，想到一個叫“檔案與模組”的問題。我們的模組肯定寫在一個JS檔案中，這些模組又可以分為核心模組與外圍模組。核心模組當然寫在主檔案中，它應該包含最重要的邏輯，載入器，列隊，命名空間構造器等等。但如果一個檔案只存在一個模組這也太浪費了，而且會導致請求法過多，因此出現多個模組“共生”於一個檔案的情況。在主檔案的那些非核心模組，我稱之為內圍模組。其他內圍與外圍沒有什麼區別，只是所在檔案不同而已。不地為了方便起見，內圍模組不要依賴外圍模組！但我們用script標籤引用JS檔案時，它就嘩啦啦地執行

jQuery有關事件綁定的函數太豐富了，今天由於某需求，需要一種每次點擊觸發不同的回呼函數的效果，因此瞄一瞄jQuery的API，發現toggle正是我要的，於是也給我架構添一個。但jQuery的實現太複雜了，閉包套嵌過多，我換另一種思路輕鬆實現了它。下面是jQuery的實現： //===============代理函數=============== proxy: function( fn, proxy, thisObject ) { if (