JS框架的一些小總結

為了防止和別的庫的衝突，用閉包把整個框架安全地保護好。

我們待會的**都寫在裡面。這裡建立乙個全域性變數"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: 用來匹配標籤的正則規則
varagrs, type, eles; 
var selector_exp = /^(?:#(\w-_)+|\.(\w-_)+|(\w)+)$/; 
儲存函式結束後返回物件
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")

摘自：

JS框架的一些小總結

一些小總結

JS的一些小知識

很雜的一些小總結

JS框架的一些小總結

一些小總結

JS的一些小知識

很雜的一些小總結

相關推薦