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

（73）封装一个widget

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

 

首先，什么是widget？

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

 div 

    这是一个dom结点

 /div 

 

为什么需要widget呢？

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

 div 

 /div 

 

添加很多个上面那个dom结点，比如像这样。

 div 

    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" 

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

JS查漏补缺——JavaScript的继承实现 JS查漏补缺系列是我在学习JS高级语法时做的笔记，通过实践费曼学习法进一步加深自己对其的理解，也希望别人能通过我的笔记能学习到相关的知识点。这一次我们来了解JavaScript的继承实现
Javascript前端开发：阿里JS面试题让你深入了解原型与继承 题目如下: var F = function(){} Object.prototype.a = function(){ console.log( a() ) Function.prototype.b = function(){ console.log( b() ) var f = new F() F.a() F.b() f.a() f.b() 主要考查的技术点: 1.、原型与原型链 2、实例对象、构造函数、Object、 Function的关系 F是个构造函数，而f是构造函数F的一个实例。
//下面的m1和m2就组成了一个模块 //缺点： 污染 了全局变量，无法保证不与其他模块发生变量名冲突，而且模块成员之间看不出直接关系。