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

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

新建測試頁面

首先我們需要新建一個測試頁面，用來測試我們封裝的JavaScript組件代碼。在頁面中添加三個div塊，后面會使用封裝的組件代碼來操作這三個塊。

封裝JavaScript組件

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

添加樣式和測試效果

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

完整的測試代碼

以下是完整的測試代碼：

    
測試Js封裝組件
    
測試塊1
    
測試塊2
    
點擊隱藏

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