从零开始学_JavaScript_系列(21)——dojo(8)(手把手教你封装一个widget)-阿里云开发者社区

开发者社区> 开发与运维> 正文

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

简介: (73)封装一个widget 醒目:必须在web环境下使用,无论是python的web.py或者是通过http访问网站环境,都可以,但纯本地是不可行的。   首先,什么是widget? 简单来说,就是一个dom结点,比如像这样: <div>     这是一个dom结点 </div>   为什么需要widget呢? 很简单,比如,我们想在这样一个地方:

(73)封装一个widget

醒目:必须在web环境下使用,无论是pythonweb.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:这是我的个人网站,理论上来说,应该是没有毒的吧。。。。

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

分享:
开发与运维
使用钉钉扫一扫加入圈子
+ 订阅

集结各类场景实战经验,助你开发运维畅行无忧

其他文章