在網(wǎng)頁(yè)開發(fā)中，我們經(jīng)常會(huì)使用已有的開源或他人封裝好的JavaScript組件來(lái)節(jié)省開發(fā)成本和提高工作效率。但其實(shí)我們自己也可以封裝自己的JavaScript組件，以方便我們和同事后續(xù)直接使用。 新建

在網(wǎng)頁(yè)開發(fā)中，我們經(jīng)常會(huì)使用已有的開源或他人封裝好的JavaScript組件來(lái)節(jié)省開發(fā)成本和提高工作效率。但其實(shí)我們自己也可以封裝自己的JavaScript組件，以方便我們和同事后續(xù)直接使用。

新建測(cè)試頁(yè)面

首先我們需要新建一個(gè)測(cè)試頁(yè)面，用來(lái)測(cè)試我們封裝的JavaScript組件代碼。在頁(yè)面中添加三個(gè)div塊，后面會(huì)使用封裝的組件代碼來(lái)操作這三個(gè)塊。

封裝JavaScript組件

重點(diǎn)是JavaScript組件的封裝。下面是一個(gè)簡(jiǎn)單的演示封裝組件的例子，結(jié)構(gòu)一樣，只寫了兩個(gè)簡(jiǎn)單的測(cè)試方法。在實(shí)際封裝組件中，可以根據(jù)需求添加更多的方法。

添加樣式和測(cè)試效果

為了演示測(cè)試效果，給這三個(gè)塊分別添加不同的樣式。點(diǎn)擊測(cè)試塊1和測(cè)試塊2，顏色會(huì)分別改變，表明上面封裝的方法是正?？梢允褂玫?。點(diǎn)擊隱藏測(cè)試塊，測(cè)試hide方法是否可以正常使用。點(diǎn)擊后，塊正常隱藏。

完整的測(cè)試代碼

以下是完整的測(cè)試代碼：

    
測(cè)試Js封裝組件
    
測(cè)試塊1
    
測(cè)試塊2
    
點(diǎn)擊隱藏

通過(guò)復(fù)制上述代碼并添加自己的封裝方法，我們就可以編寫自己的封裝組件了。