Javascript框架思想

js的學習中，我們總是借鑑或使用jqury，這時候學習前端的工程師們，就想自己封裝乙個，但是封裝屬於自己的框架，確實不太容易，所以，jqury使我們很好的乙個範本，所以，我i門來研究一下jqury的框架思想，同時自己也可以模仿封裝。下面我們學習，封裝選擇器的思想。

首先js中的選擇器有 id選擇器，類（class）選擇器和標籤選擇器。然而在使用id選擇器document.getelementbyid()和標籤選擇器時document.getelementsbytagname()

，這兩個屬性並沒有問題，然而類選擇器 document.getelementsbyclassname()，但是類選擇器並不是所有瀏覽器相容，也就是說具有相容性，所以需要單獨對他做處理；首先我們封裝乙個可以得到id選擇器的方法：

function 
getid
(idname
) return 
result
;}

標籤選擇器的封裝：

//
標籤function 
gettags
(tagname
) ;

最後這句**的意思就是：將得到標籤陣列的每乙個元素新增到result這個物件陣列中；

result
.push.(
result
,document.
getelementsbytagname
(tagname
));

接下來我們展示類選擇器的封裝：

var 
support = 
;

function 
getclass
(classname
) else }}
}return 
result
;};

看的出來，類選擇器比較複雜，因為需要相容瀏覽器，看起來比較複雜，接下來，我們就進行分解：

首先我們定義了乙個

var 
support = 
;

這句**的作用是，我們預設瀏覽器都不相容document.getelementsclassname()這個方法，如果瀏覽器相容的話，那麼直接進行

result
.push.(
result
,document.
getelementsbyclassname
(classname
));

如果不相容的話，那麼我們就需要對他做出相容處理，首先我們使用了之前封裝好的 gettag（）方法；使用「*」萬用字元，得到了頁面上所有的標籤元素，將返回的陣列進行迴圈遍歷，

var 
tags 
= gettags
("*"
);

此時我們得到了頁面上每乙個標籤元素，通過判斷標籤classname屬性，也就是說我們要找到標籤中有 class=「」的元素，

classname；如果存在的話，那麼我們將對他做出前後新增空格的操作：


var 
changename 
= " " 
+ tagclassname 
+ " "
;//" content c1 c2 "
var 
chageparam 
= " " 
+ classname 
+ " "
;//" content "

為什麼要這樣做呢？這只是其中乙個簡單的方法而已，當然也有其他的方法；我們將所要找的類名與遍歷出來的每乙個具有類屬性的進行比較，是否出現在遍歷出來的元素中，我們需要利用charat(),判斷是否查詢得到，


if (
changename
.charat
(chageparam 
>= 
0))

以上，我們封裝了所有的選擇器，但是並不完美，但是我們此時想要達到的效果輸入隨意的選擇器，就可以進行匹配.

很明顯我們需要多各個選擇器進行判斷，id選擇器是#開頭，類選擇器是 "."(點)開頭，所以我們需要判斷使用者輸入的字串特徵就可以呼叫先關的方法，但我們要注意的是，輸入的是string字串，下面我們進行封裝：

function 
$get
(selector
) else if 
(selector
.charat(0
) === 
".") 
else 
}return 
result
;}

有的同學已經看到，輸入的字串使用了slice（）方法，提取字串需要的部分，因為此時我們不需要#和點；

以上**，我們進行了選擇器的封裝；有很多的不足，例如要進行查詢指定元素下的選擇器，選擇器的分組和層次，

我們都沒有完成，後續我們將對他進行再次的優化。