我是怎麼寫JavaScript框架的（一）

以前大三的時候寫的乙個小框架，仿jquery鏈式結構，純屬練手，大牛勿噴。當時還把jq的原始碼全部列印下來（因為在電腦上看不方便做筆記），7600+行**，300+頁a4紙，對照著看別人是怎麼寫的。還好乙個長我一屆的學長當時比較閒，我說我想讀jq**，他也沒讀過，就找來上兩屆的學長以前練手寫的小框架進行學習。可惜只找到了壓縮混淆後的**，對於乙個渣渣來說，閱讀起來很困難。在他的指點下，我大致了解了原理，並開始著手自己寫。現在陸續有學弟找我要這個**。雖然現在覺得寫得一塌糊塗，但是，可能對於和我當時一樣摸不著邊的人來說，可能會有幫助。我就打算慢慢解析我是怎麼寫的，並穿插講解我對jq（2.0版）寫法的理解。其實源**裡我都寫有注釋，我也是靠這些注釋回憶我當時是怎麼想的。可能會有很多不好的地方，輕噴~ 罒ω罒

我給庫起名oct.js，是因為這個是在企鵝實習生應聘失敗後為10月校招而寫。紀念那個稚嫩的我。

全部**，看這裡看這裡~(￣▽￣)~*　

配合使用文件看**更容易理解

為了防止和別的庫的衝突，用閉包把整個框架安全地保護好。我們待會的**都寫在裡面。這裡建立乙個全域性變數"window.o"，就是在window物件裡加個o，它等價於 "oct"，相當於jquery、jquery這樣的別稱，意味著以後用oct()或o()來進行操作。把window.o寫成window.$，那就和jq的$呼叫用法一樣。window.o返回乙個octobj物件，這很重要。

(function() ; 
// 帥氣地定義乙個版本
oct.version = "1.0"; 
})();

jq的流行，我想是因為它很方便吧，乙個選擇器就可以接著寫一連串的方法。鏈式結構就是在每個方法結束時返回乙個物件進行下乙個方法的操作。後面會通過**說明

選擇器非常重要。jq特別把選擇器部分剝離出乙個庫sizzle.js。現在的jq內部也是呼叫jq裡面的sizzle。「選擇器」三個字寫得簡單，**寫起來就很有學問，sizzle.js這種高大上的我就不說了。我這裡簡單實現一些功能：選擇class/id/標籤。

首先，把上面的octobj物件骨架搭建起來。包含selector, root_id, tag三個引數。selector就是你想要找的東西，root_id是你想要找的東西的上級的id，tag是你要指定返回某種標籤。

var octobj = function(selector, root_id, tag) ;

定義一些引數

// args: 儲存root_id的子標籤 
// type: 型別標記，id("#"), class(".") 或者 tag("&。 tag也加標記是為了**方便
// eles: 臨時的，儲存`selector`變數裡"# . &"標記後面的字串
// selector_exp: 用來匹配標籤的正則規則
var agrs, type, eles; 
var selector_exp = /^(?:#(\w-_)+|\.(\w-_)+|(\w)+)$/; 
// this.elements: 儲存函式結束後返回物件
this.elements = ;
// 防止以下情況: $(""), $(null), $(undefined), $(false)
if (!selector)

接下來處理有沒有指定root_id、tag的情況，

if (root_id)  else 
tag = tag || "*";
if (tag !== "*")

進入核心部分。分兩種情況，能支援queryselector()方法的「高階」瀏覽器和不能支援的「低端」瀏覽器。先是能支援queryselector的，就很簡單了：

if (document.queryselectorall) }}

不能支援queryselector的，先來設定一些引數：

// 處理類似jq $('.a .b')的情況
selector = selector.replace(/^\s+/, "").split(/\s+/);
// 如果不指明 "root_id" 和 "tag", "args" 就儲存所有的標籤
args = root_id.getelementsbytagname(tag);
// 通過符號標記判斷是class/id/tag
type = selector[0].charat(0);
// 所要選取的目標的字串
eles = selector[0].slice(1);

處理選擇class的情況。有文章指出for in的效率不高，我本來是用for處理的，但是出現問題，因為會把方法一起選進來。jq用了for in，感覺有了標桿，我就全部改用for in了。

if (type === ".") }}
}}

處理選擇id的情況：

else if (type === "#") }}
}}

處理選擇標籤的情況：

else if (type === "&") }}
}

return this;

全部**

1.通過 id 選擇.

o("#buddy")

2.通過 class 選擇.

oct(".buddy")

3.選擇所有 div.

o("&div") // also o("&div"), o("&div")

4.選擇 .buddy 裡的.

o(".buddy", null, "&p")

5.選擇#dad下的.buddy

o(".buddy", "#dad")

laker's blo

我是怎麼寫JavaScript框架的（一）

我現在怎麼寫部落格筆記？

我是怎麼了？

產品設計體會（6028）我是怎麼寫樣章的

我是怎麼寫JavaScript框架的（一）

我現在怎麼寫部落格筆記？

我是怎麼了？

產品設計體會（6028）我是怎麼寫樣章的

相關推薦