从零开始学_JavaScript_系列（21）——dojo(8)（手把手教你封装一个widget）

（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>