JavaScript框架思想3

2021-07-15 11:05:21 字數 1380 閱讀 3240

我們首先分析分組選擇器，看到分組選擇器的形式，我們是不是特別想把他變成乙個陣列，因為這樣就可以迴圈遍歷每乙個出來，然後就可以進行選取，很明顯他是乙個字串，這是後我們就要利用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

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

Javascript框架思想

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

Javascript框架思想

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