javascript
从零开始学_JavaScript_系列（21）——dojo(8)（手把手教你封装一个widget）
（73）封裝一個(gè)widget
醒目：必須在web環(huán)境下使用，無(wú)論是python的web.py或者是通過(guò)http訪問(wèn)網(wǎng)站環(huán)境，都可以，但純本地是不可行的。
?
首先，什么是widget？
簡(jiǎn)單來(lái)說(shuō)，就是一個(gè)dom結(jié)點(diǎn)，比如像這樣：
<div>這是一個(gè)dom結(jié)點(diǎn) </div>?
為什么需要widget呢？
很簡(jiǎn)單，比如，我們想在這樣一個(gè)地方：
<div class="nodes"></div>?
添加很多個(gè)上面那個(gè)dom結(jié)點(diǎn)，比如像這樣。
<div class="nodes"><div>這是一個(gè)dom結(jié)點(diǎn)</div><div>這是一個(gè)dom結(jié)點(diǎn)</div> </div>?
或者在很多地方添加這一個(gè)dom結(jié)點(diǎn)。
?
解決辦法①：
我們可以這么直接把他寫在HTML里；
?
優(yōu)點(diǎn)：
①?gòu)?fù)制粘貼到所有需要他的地方，非常簡(jiǎn)單
?
缺點(diǎn)：
①假如這個(gè)結(jié)點(diǎn)非常的復(fù)雜，可能還有一些事件（比如點(diǎn)擊后彈一個(gè)彈窗什么的），我們要ctrl + c、ctrl + v很多次；
②假如產(chǎn)品經(jīng)理突然說(shuō)，讓我們把這個(gè)改一下吧，因此我們可能需要在很多地方進(jìn)行修改（但也有可能忘記把某個(gè)地方的改掉）；
?
解決辦法②：
封裝一個(gè)widget
?
優(yōu)點(diǎn)：
①上面的缺點(diǎn)都不是問(wèn)題了；
?
缺點(diǎn)：
①假如這個(gè)結(jié)點(diǎn)很簡(jiǎn)單（比如就上面一行），那么這么寫反而復(fù)雜了。
?
?
封裝方法：
①基礎(chǔ)是上面的類的繼承，我們需要繼承一個(gè)類，這個(gè)類就是widget的基礎(chǔ)類；
類："dijit/_WidgetBase"
?
②其次，我們需要一個(gè)模板類，這個(gè)模板做什么用的呢，很簡(jiǎn)單，是幫我們省去重復(fù)工作的，我們使用這個(gè)類，于是就可以省去重復(fù)寫創(chuàng)建dom結(jié)點(diǎn)的工作了，只需要修改模板內(nèi)的東西即可。
?
③為了說(shuō)的更簡(jiǎn)單點(diǎn)，我給一個(gè)基礎(chǔ)類聲明，其創(chuàng)建方式是類的封裝（具體見之前的71）；
代碼如下：
define(["dojo/_base/declare","dijit/_WidgetBase","dijit/_TemplatedMixin","dojo/text!template.html"], function (declare, _WidgetBase, _TemplatedMixin, template) {return declare('template', [_WidgetBase, _TemplatedMixin], {name: "這是一個(gè)模板的文件",? //替換模板內(nèi)的${name}位置baseClass: "templateClass",? //模板的根div的css類templateString: template,?? //這個(gè)template就是模板的內(nèi)容，通常這么寫就沒錯(cuò)了postCreate: function () {?? //渲染模板，還有給他加事件就放在這一步了this.inherited(arguments); }}); });?
define引入的第一個(gè)插件是聲明類；
第二個(gè)插件是widget；
第三個(gè)插件是模板類；
第四個(gè)是模板（指向一個(gè)html）；
第五個(gè)是on，用于綁定觸發(fā)事件的
?
同樣，為了簡(jiǎn)單說(shuō)明，有以下前提：
新建的文件和dojo文件夾、dijit文件夾等在同一個(gè)根目錄下，包括：
《1》調(diào)用類的html文件；
《2》類的聲明的js文件；
《3》類的模板文件；
?
④首先創(chuàng)建一個(gè)test.html文件，這個(gè)html文件是調(diào)用類的html文件；
我們還需要?jiǎng)?chuàng)建一個(gè)類文件test.js，這個(gè)js文件聲明一個(gè)類；
我們最后創(chuàng)建一個(gè)模板文件template.html，這個(gè)文件作為模板；
?
⑤首先給出模板文件的html內(nèi)容：
<div><div data-dojo-attach-point="node" class="node">${name}</div> </div>?
其中：
data-dojo-attach-point：可以通過(guò)這個(gè)屬性找到該結(jié)點(diǎn)，可以理解為id一樣的東西，同一個(gè)模板文件內(nèi)不能重復(fù)；
class就是其類，就像正常的div的class屬性一樣；
${name}：在js文件里，可以通過(guò)某個(gè)變量來(lái)控制他，可以理解為，那個(gè)變量的值就是${name}顯示的東西
?
⑥接下來(lái)給出js文件：
define(["dojo/_base/declare","dijit/_WidgetBase","dijit/_TemplatedMixin","dojo/text!template.html","dojo/on"], function (declare, _WidgetBase, _TemplatedMixin, template, on) {return declare('template', [_WidgetBase, _TemplatedMixin], {name: "這是一個(gè)模板的文件",? //替換模板內(nèi)的${name}位置baseClass: "templateClass",? //模板的根div的css類templateString: template,?? //這個(gè)template就是模板的內(nèi)容，通常這么寫就沒錯(cuò)了postCreate: function () {?? //渲染模板，還有給他加事件就放在這一步了this.inherited(arguments);this.aEvent();},aEvent: function () {var self = this;on(this.node, "click", function () {self.node.innerHTML += "<br>——添加了一些內(nèi)容";})}}); });?
我簡(jiǎn)單解釋一下這個(gè)js文件：
《1》aEvent是這個(gè)widget綁定的一個(gè)方法，凡是使用這個(gè)widget的地方，都會(huì)自動(dòng)綁定這個(gè)事件。之所以能自動(dòng)綁定，是通過(guò)postCreate這個(gè)方法調(diào)用的原因。
?
《2》postCreate是創(chuàng)建widget必然會(huì)被執(zhí)行的函數(shù)，不需要我們手動(dòng)調(diào)用，這個(gè)函數(shù)是通過(guò)遞歸被執(zhí)行的（總之知道他肯定會(huì)被執(zhí)行就是了）；
他是創(chuàng)建widget被執(zhí)行的一系列的函數(shù)之一，準(zhǔn)確的說(shuō)是倒數(shù)第二個(gè)，倒數(shù)第一個(gè)是startup，一般是被手動(dòng)調(diào)用的；
?
《3》這個(gè)widget展現(xiàn)出來(lái)的作用是。掛載某一個(gè)html的dom結(jié)點(diǎn)之上，然后點(diǎn)擊文字部分的時(shí)候，會(huì)觸發(fā)一個(gè)事件，而這個(gè)事件的效果是增加一行文字，文字內(nèi)容就是innerHTML里面添加的內(nèi)容。這個(gè)事件可以被無(wú)限次觸發(fā)；
?
⑦最后給出test.html文件的內(nèi)容：
<!DOCTYPE html> <html> <head><meta charset="utf-8"> </head> <script>var dojoConfig = {async: true}</script> <script src="dojo/dojo.js"></script> <script>require(["test"], function (test) {var te = new test({}, "base");}) </script> <style>.node {border: 1px solid #ccc;} </style> <body> <div id="base"></div> </body> </html>?
我調(diào)用這個(gè)widget的方法很簡(jiǎn)單，require一個(gè)test（實(shí)際是test.js那個(gè)文件），然后在回調(diào)函數(shù)傳參給他，然后new一個(gè)test（就是創(chuàng)建一個(gè)widget），但這個(gè)widget放在哪里呢？很簡(jiǎn)單，test的第二個(gè)參數(shù)就是widget被放置的地方（因?yàn)閕d="base"是相符的）。
?
?
最后：
因?yàn)槟承┤丝赡軟]法創(chuàng)建web環(huán)境，因此給一個(gè)示例地址：
http://www.jianwangsan.cn/test.html
ps：這是我的個(gè)人網(wǎng)站，理論上來(lái)說(shuō)，應(yīng)該是沒有毒的吧。。。。
總結(jié)
以上是生活随笔為你收集整理的从零开始学_JavaScript_系列（21）——dojo(8)（手把手教你封装一个widget）的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： redis memcache 性能比较
- 下一篇： 深入理解javascript原型和闭包