Javascript框架思想

2021-07-12 02:21:58 字數 2492 閱讀 1323

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()方法,提取字串需要的部分,因為此時我們不需要#和點;

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

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

Javascript框架思想

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

JavaScript框架思想3

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

JavaScript框架思想2

封裝類 相容處理 function getclasses classname parent else return result 封裝類結束 中也給大家作出了詳細注釋,getclasses selector,parent 方法變化並不大,只是在得到所有標籤的時候使用了 1 獲取所有元素 docume...