JavaScript

觀察者模式又稱發布-訂閱(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進行擴充，這個真的是牽一髮動全身。在我們開始時先列出一些要用到的工具（突然想起烹飪節目中的材料

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

滾輪事件是一個非常有用的事件，在翻頁或放大時，通常都用到它。但它在各瀏覽器中實現相容是相對比較困難的，號稱最標準的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 (

在我《惰性函數》一文引起一些爭議，有人總是把惰性函數與緩衝函數（Memoization）混為一談。雖然都是緩衝了結果，但最大的區別是一個改寫函數本身，一個沒有。那我就說一下緩衝函數吧。簡而言之，就是把上次運算的結果放到一個數組或對象中。拿什麼做實驗好呢？就拿那個Fibonacci數列吧，估計IE6會比較嗆，一般5秒運算不了就假死了。我們先看消耗時間，再看結果。一直接用遞迴實現： function fib(n){ if (n == 0 || n == 1)

週末料理をしていて足を切ってしまいました。agoです。以前Perlは書いていたんですが、その頃以下の記事を読んで非常に感銘を受けました。Perlプログラマのレベル10 - Perlプログラミング救命病棟より - naoyaのはてなダイアリー當時あまりコミュニティとのつきあいがなかったので、「自分のスキルの絶対位置」、「次のレベルへ行くために必要なもの」を知ることで非常に安心感を感じた記憶があります。いま確認したところ、「JavaScriptプログラマのレベル10」はないようなので書いてみました。

綜合眾人的意見，此版本做了許多改進，如對注釋抽取的最佳化，增加對script標籤的支援，即時性的測試等等。// dom.abut v2 (annotations-based unit testing by 司徒正美)// http://www.cnblogs.com/rubylouvre/archive/2010/11/08/1868638.html(function(){ //ecma262新擴充 if(!Object.keys){ var _dontEnum =

REPL(Read Eval Print Loop)是一種非常有用的工具，能讓我們即時運行代碼得到結果。雖然相比於firebug的控制台來說，這簡直不值一提，但在個人部落格中提供示範時它還是比較有用。下面是它的所有代碼，包括html。<textarea style="width:100%" onkeyup=" this.rows=(function(t){ for (var i=0,h=1;i<t.length;i++) if (t.charAt(i) == '\n') h+

// by 司徒正美 http://www.cnblogs.com/rubylouvre/ var native_random = Math.random; Math.random = function(min, max, exact) { if (arguments.length === 0) { return native_random(); } else if (arguments.length === 1) {

本版本主要是對原模板系統進行提速，去掉消耗巨大的輔助函數。本來想用它與John Resig的 Micro-Templating比較一下速度，發現對方無法處理複雜的模板，殘念。 //司徒正美 javascript template - http://www.cnblogs.com/rubylouvre/ - MIT Licensed (function () { if(!String.prototype.trim){

為公司起草的javascript編程規範，參考了網上的許多資料，尤其是google的規範。現在放出來，希望能拋磚引玉，大家多提寶貴意見。本規範是針對javascript函數式編程風格與公司嚴重依賴於jQuery進行編碼的現實制定出來。禁止使用eval，with與caller(ecma262 v5 的use strict要求)。eval只允許在加密時機器產生。聲明變數必須加上 var

本版本增添了局部模板功能，並且允許主模板調用局部模板，局部模組調用局部模組，並去掉onsite變數，不再提供解析成畢的文檔片段給使用者。它使用雙重緩衝，一是緩衝那些通過同步請求得到的文本而成的數組，一是整體解析完畢得到的模板函數。模板函數是通過數組元素拼湊動成解析而成的，這是大大提高了效率。不過由於新功能的加入，雖然動用了新的構築演算法也比不上v2的構築速度了……有人說不要使用<%與%>做界定符，這個問題我在v1版本已經提出過了，這些都是可以自訂的。本文的例子將示範一下如何使用Dja