（73）封装一个widget
醒目：必须在web环境下使用，无论是python的web.py或者是通过http访问网站环境，都可以，但纯本地是不可行的。
首先，什么是widget？
简单来说，就是一个dom结点，比如像这样：
<div> 这是一个dom结点 </div>
为什么需要widget呢？
很简单，比如，我们想在这样一个地方：
<div class="nodes"> </div>
添加很多个上面那个dom结点，比如像这样。
<div class="nodes"> <div> 这是一个dom结点 </div> <div> 这是一个dom结点 </div> </div>
或者在很多地方添加这一个dom结点。
解决办法①：
我们可以这么直接把他写在HTML里；
优点：
①复制粘贴到所有需要他的地方，非常简单
缺点：
①假如这个结点非常的复杂，可能还有一些事件（比如点击后弹一个弹窗什么的），我们要ctrl + c、ctrl + v很多次；
②假如产品经理突然说，让我们把这个改一下吧，因此我们可能需要在很多地方进行修改（但也有可能忘记把某个地方的改掉）；
解决办法②：
封装一个widget
优点：
①上面的缺点都不是问题了；
缺点：
①假如这个结点很简单（比如就上面一行），那么这么写反而复杂了。
封装方法：
①基础是上面的类的继承，我们需要继承一个类，这个类就是widget的基础类；
类："dijit/_WidgetBase"
②其次，我们需要一个模板类，这个模板做什么用的呢，很简单，是帮我们省去重复工作的，我们使用这个类，于是就可以省去重复写创建dom结点的工作了，只需要修改模板内的东西即可。
③为了说的更简单点，我给一个基础类声明，其创建方式是类的封装（具体见之前的71）；
代码如下：
define([ "dojo/_base/declare", "dijit/_WidgetBase", "dijit/_TemplatedMixin", "dojo/text!template.html"], function (declare, _WidgetBase, _TemplatedMixin, template) { return declare('template', [_WidgetBase, _TemplatedMixin], { name: "这是一个模板的文件", //替换模板内的${name}位置 baseClass: "templateClass", //模板的根div的css类 templateString: template, //这个template就是模板的内容，通常这么写就没错了 postCreate: function () { //渲染模板，还有给他加事件就放在这一步了 this.inherited(arguments); } }); });
define引入的第一个插件是声明类；
第二个插件是widget；
第三个插件是模板类；
第四个是模板（指向一个html）；
第五个是on，用于绑定触发事件的
同样，为了简单说明，有以下前提：
新建的文件和dojo文件夹、dijit文件夹等在同一个根目录下，包括：
《1》调用类的html文件；
《2》类的声明的js文件；
《3》类的模板文件；
④首先创建一个test.html文件，这个html文件是调用类的html文件；
我们还需要创建一个类文件test.js，这个js文件声明一个类；
我们最后创建一个模板文件template.html，这个文件作为模板；
⑤首先给出模板文件的html内容：
<div> <div data-dojo-attach-point="node" class="node"> ${name} </div> </div>
其中：
data-dojo-attach-point：可以通过这个属性找到该结点，可以理解为id一样的东西，同一个模板文件内不能重复；
class就是其类，就像正常的div的class属性一样；
${name}：在js文件里，可以通过某个变量来控制他，可以理解为，那个变量的值就是${name}显示的东西
⑥接下来给出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: "这是一个模板的文件", //替换模板内的${name}位置 baseClass: "templateClass", //模板的根div的css类 templateString: template, //这个template就是模板的内容，通常这么写就没错了 postCreate: function () { //渲染模板，还有给他加事件就放在这一步了 this.inherited(arguments); this.aEvent(); }, aEvent: function () { var self = this; on(this.node, "click", function () { self.node.innerHTML += "<br>——添加了一些内容"; }) } }); });
我简单解释一下这个js文件：
《1》aEvent是这个widget绑定的一个方法，凡是使用这个widget的地方，都会自动绑定这个事件。之所以能自动绑定，是通过postCreate这个方法调用的原因。
《2》postCreate是创建widget必然会被执行的函数，不需要我们手动调用，这个函数是通过递归被执行的（总之知道他肯定会被执行就是了）；
他是创建widget被执行的一系列的函数之一，准确的说是倒数第二个，倒数第一个是startup，一般是被手动调用的；
《3》这个widget展现出来的作用是。挂载某一个html的dom结点之上，然后点击文字部分的时候，会触发一个事件，而这个事件的效果是增加一行文字，文字内容就是innerHTML里面添加的内容。这个事件可以被无限次触发；
⑦最后给出test.html文件的内容：
<!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>
我调用这个widget的方法很简单，require一个test（实际是test.js那个文件），然后在回调函数传参给他，然后new一个test（就是创建一个widget），但这个widget放在哪里呢？很简单，test的第二个参数就是widget被放置的地方（因为id="base"是相符的）。
最后：
因为某些人可能没法创建web环境，因此给一个示例地址：
http://www.jianwangsan.cn/test.html
ps：这是我的个人网站，理论上来说，应该是没有毒的吧。。。。
![[版本更新] PolarDB-X V2.4 列存引擎开源正式发布](https://ucc.alicdn.com/pic/developer-ecology/nmwxanvmfezte_85c4d30b1404479b982cc86614e8edfb.png?x-oss-process=image/resize,h_160,m_lfit)
