從零開始學_JavaScript_系列（21）——dojo(8)（手把手教你封裝一個widget）

（73）封裝一個widget

醒目：必須在web環境下使用，無論是python的web.py或者是通過http通路網站環境，都可以，但純本地是不可行的。

首先，什麼是widget？

簡單來說，就是一個dom結點，比如像這樣：

為什麼需要widget呢？

很簡單，比如，我們想在這樣一個地方：

添加很多個上面那個dom結點，比如像這樣。

或者在很多地方添加這一個dom結點。

解決辦法①：

我們可以這麼直接把他寫在HTML裡；

優點：

①複制粘貼到所有需要他的地方，非常簡單

缺點：

①假如這個結點非常的複雜，可能還有一些事件（比如點選後彈一個彈窗什麼的），我們要ctrl + c、ctrl + v很多次；

②假如産品經理突然說，讓我們把這個改一下吧，是以我們可能需要在很多地方進行修改（但也有可能忘記把某個地方的改掉）；

解決辦法②：

封裝一個widget

①上面的缺點都不是問題了；

①假如這個結點很簡單（比如就上面一行），那麼這麼寫反而複雜了。

封裝方法：

①基礎是上面的類的繼承，我們需要繼承一個類，這個類就是widget的基礎類；

類："dijit/_WidgetBase"

②其次，我們需要一個模闆類，這個模闆做什麼用的呢，很簡單，是幫我們省去重複工作的，我們使用這個類，于是就可以省去重複寫建立dom結點的工作了，隻需要修改模闆内的東西即可。

③為了說的更簡單點，我給一個基礎類聲明，其建立方式是類的封裝（具體見之前的71）；

代碼如下：

define引入的第一個插件是聲明類；

第二個插件是widget；

第三個插件是模闆類；

第四個是模闆（指向一個html）；

第五個是on，用于綁定觸發事件的

同樣，為了簡單說明，有以下前提：

建立的檔案和dojo檔案夾、dijit檔案夾等在同一個根目錄下，包括：

《1》調用類的html檔案；

《2》類的聲明的js檔案；

《3》類的模闆檔案；

④首先建立一個test.html檔案，這個html檔案是調用類的html檔案；

我們還需要建立一個類檔案test.js，這個js檔案聲明一個類；

我們最後建立一個模闆檔案template.html，這個檔案作為模闆；

⑤首先給出模闆檔案的html内容：

其中：

data-dojo-attach-point：可以通過這個屬性找到該結點，可以了解為id一樣的東西，同一個模闆檔案内不能重複；

class就是其類，就像正常的div的class屬性一樣；

${name}：在js檔案裡，可以通過某個變量來控制他，可以了解為，那個變量的值就是${name}顯示的東西

⑥接下來給出js檔案：

我簡單解釋一下這個js檔案：

《1》aEvent是這個widget綁定的一個方法，凡是使用這個widget的地方，都會自動綁定這個事件。之是以能自動綁定，是通過postCreate這個方法調用的原因。

《2》postCreate是建立widget必然會被執行的函數，不需要我們手動調用，這個函數是通過遞歸被執行的（總之知道他肯定會被執行就是了）；

他是建立widget被執行的一系列的函數之一，準确的說是倒數第二個，倒數第一個是startup，一般是被手動調用的；

《3》這個widget展現出來的作用是。挂載某一個html的dom結點之上，然後點選文字部分的時候，會觸發一個事件，而這個事件的效果是增加一行文字，文字内容就是innerHTML裡面添加的内容。這個事件可以被無限次觸發；

⑦最後給出test.html檔案的内容：

我調用這個widget的方法很簡單，require一個test（實際是test.js那個檔案），然後在回調函數傳參給他，然後new一個test（就是建立一個widget），但這個widget放在哪裡呢？很簡單，test的第二個參數就是widget被放置的地方（因為id="base"是相符的）。

最後：

因為某些人可能沒法建立web環境，是以給一個示例位址：

http://www.jianwangsan.cn/test.html

ps：這是我的個人網站，理論上來說，應該是沒有毒的吧。。。。