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

迷南。 2022-08-22 11:28 143阅读 0赞

**（73）封装一个widget**

**醒目：必须在web环境下使用，无论是python的web.py或者是通过http访问网站环境，都可以，但纯本地是不可行的。**

首先，什么是widget？

简单来说，就是一个dom结点，比如像这样：

<div>
        这是一个dom结点
    </div>

为什么需要widget呢？

很简单，比如，我们想在这样一个地方：

添加很多个上面那个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内容：

其中：

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：这是我的个人网站，理论上来说，应该是没有毒的吧。。。。