JavaScript框架思想3

在前邊幾篇文章中，我們封裝了基本的選擇器通過$get（selecteor，parent）選取指定元素下的選擇器，但是並不完美，作為乙個追求完美的前段開發工程師加上與之俱來的強迫症，這些**功能，怎麼能滿足呢，下面，我們又要把這些**進行公升級，就像lol，大家都懂得哦；那麼首先我們來分析情況，引數selector會有很多的形式，比如：「div，#header，.content,input

」，或者「div form input」又或者 "div span，p .content",我們依次給他們起名為：分組選擇器，層次選擇器，分組加層次選擇器.

我們首先分析分組選擇器，看到分組選擇器的形式，我們是不是特別想把他變成乙個陣列，因為這樣就可以迴圈遍歷每乙個出來，然後就可以進行選取，很明顯他是乙個字串，這是後我們就要利用js中字串提供的api，split（）方法完美解決了我們的難題，使用切割字串的發法，返回乙個陣列，就可以得到自己想要的：

var 
groups
=selector
.split
(","
);//
返回乙個陣列

是不是很完美，這個時候我們就可以迴圈遍歷，但是我們不使用for（）迴圈，使用自己封裝的，這樣的才顯得不是很low，開玩笑了了，使用自己封裝的，只是更加法方便，提高效能。這是自己分改裝的each方法：

function 
each
(arr,fn
)};}

function 
$group
(selector
,parent
));}
return 
result
;}

至此，我們完成了分組選擇器的封裝。接下裡來，我們分析層次選擇器。

層次選擇器的形式「#box .content span」，也就是說，我們要尋找的是id是box下的類名是content 下的 span元素，content是box的下一級，box是content的父級，content是span的父級，我們每次所要查詢的元素都是在父級元素下所要查詢的結果，簡單的舉個例子，使用$get（）方法找到box後，content的父級元素就是box；**參考：

function 
$level
(selector
,parent))}
return 
singleresult
;}

還有一點要注意，就是宣告singleresult的時候，不能放在each（）函式中，以為此時武打記錄到值，如果你放到了each函式中，第一次迴圈，記錄了

singleresult的值，第二次迴圈的時候，就會被重置，這點要注意。

最後我們就要封裝分組加層次選擇器，封裝了前面兩個，相信自己已經有了思路，我們只要清楚的分析執行過程，相信他不是難題，這裡我們直接貼出**，作出了注釋：

function 
$groupandlevel
(selector
,parent
)});
}return 
result;};
return 
$groupandlevel
;

同樣，我們將字串切割返回陣列，案後each迴圈，發現他是乙個層次選擇器，我們直接呼叫層次選擇器方法就可以，因為singlegroupresult此時不一定會有值，所以我們使用if判斷一下。

JavaScript框架思想3

JavaScript框架思想3

Javascript框架思想

Javascript框架思想

JavaScript框架思想3

JavaScript框架思想3

Javascript框架思想

Javascript框架思想

相關推薦