基于继承的dojo小部件生命周期探究

最新推荐文章于 2020-10-21 13:56:02 发布
最新推荐文章于 2020-10-21 13:56:02 发布
阅读量2k 收藏 2
点赞数
文章标签： dojo function constructor module stylesheet 语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/iispring/article/details/8034041
版权

有时候我们会写一个基类dojo小部件用以实现一些通用的功能，然后让其他小部件继承该widget，有时候需要在父类和子类中的多个生命周期中写不同的代码以完成不同的功能，使得我对小部件的生命周期有点混乱，于是准备写一个简单的父子继承的小部件研究下其生命周期。

首先定义父类iSpring.widgets.father.Father，其模板文件很简单，如下所示：

<div style="color:blue;">内容</div>

父类的js代码如下：

dojo.provide("iSpring.widgets.father.Father");
dojo.require("dijit._Widget");
dojo.require("dijit._Templated");
dojo.require("dojo.cache");

dojo.declare("iSpring.widgets.father.Father",[dijit._Widget,dijit._Templated],{
    _module:"iSpring.widgets.father",
    templateString:dojo.cache("iSpring.widgets.father","templates/Father.html"),
    constructor:function(){
        console.log("Father.constructor");
    },

    postMixInProperties:function(){
        console.log("Father.postMixInProperties");
    },

    postCreate:function(){
        console.log("Father.postCreate");
    },

    startup:function(){
        console.log("Father.startup");
    }
});


然后写一个子类iSpring.widgets.son.Son继承自iSpring.widgets.father.Father，由于是继承了父类，所以就没有写Son小部件的模板文件，其js代码如下：

dojo.provide("iSpring.widgets.son.Son");
dojo.require("dijit._Widget");
dojo.require("dijit._Templated");
dojo.require("dojo.cache");
dojo.require("iSpring.widgets.father.Father");

dojo.declare("iSpring.widgets.son.Son",[iSpring.widgets.father.Father],{
    _module:"iSpring.widgets.son",

    constructor:function(){
        console.log("Son.constructor");
    },

    postMixInProperties:function(){
        console.log("Son.postMixInProperties");
    },

    postCreate:function(){
        console.log("Son.postCreate");
    },

    startup:function(){
        console.log("Son.startup");
    }
});

在网页中创建Son并显示的前端代码如下：

!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html"/>
    <meta name="charset" content="utf-8"/>
    <title></title>
    <script type="text/javascript">
        dojoConfig = {
            parseOnLoad:true,
            baseUrl:'./',
            modulePaths: { 'iSpring': 'iSpring' }
        };
    </script>
    <script type="text/javascript" src="http://localhost/jsapi28/"></script>
    <link type="text/css" rel="stylesheet" href="http://localhost/jsapi28/js/dojo/dijit/themes/claro/claro.css" />
    <script type="text/javascript">
        dojo.require("iSpring.widgets.son.Son");
        function init(){
            var son = new iSpring.widgets.son.Son();
            son.placeAt(dojo.body());
        }
        dojo.addOnLoad(init);
    </script>
</head>
<body class="claro">

</body>
</html>

通过localhost的方式打开网页可以看到控制台中的输出结果如下：

也就是会所首先调用了父类的构造函数，然后调用了子类的构造函数，没有调用父类的postMixInProperties以及postCreate，调用了子类的。


现在我们把子类js代码中的postMixInProperties函数删除，父类js代码不变，子类js代码变为如下：


dojo.provide("iSpring.widgets.son.Son");
dojo.require("dijit._Widget");
dojo.require("dijit._Templated");
dojo.require("dojo.cache");
dojo.require("iSpring.widgets.father.Father");

dojo.declare("iSpring.widgets.son.Son",[iSpring.widgets.father.Father],{
    _module:"iSpring.widgets.son",

    constructor:function(){
        console.log("Son.constructor");
    },
    postCreate:function(){
        console.log("Son.postCreate");
    },

    startup:function(){
        console.log("Son.startup");
    }
});

保存后刷新网页，控制台中的输出结果如下：


我们发现在分别调用了父类、子类的构造函数之后，紧接着调用了父类的postMixInProperties，然后调用的是子类的postCreate。



现在我们再把子类js代码中的postMinInProperties代码添加上，并在其中添加this.inherited(arumnets)语句，父类js代码不变，子类js代码变为如下：

dojo.provide("iSpring.widgets.son.Son");
dojo.require("dijit._Widget");
dojo.require("dijit._Templated");
dojo.require("dojo.cache");
dojo.require("iSpring.widgets.father.Father");

dojo.declare("iSpring.widgets.son.Son",[iSpring.widgets.father.Father],{
    _module:"iSpring.widgets.son",

    constructor:function(){
        console.log("Son.constructor");
    },

    postMixInProperties:function(){
        this.inherited(arguments);
        console.log("Son.postMixInProperties");
    },

    postCreate:function(){
        console.log("Son.postCreate");
    },

    startup:function(){
        console.log("Son.startup");
    }
});

保存后刷新网页，控制台中的输出结果如下：

可以发现，在分别调用了父类、子类的构造函数之后，又调用了父类、子类的postMixInProperties，最后调用的是子类的postCreate


最后，我们把子类js代码中的postMixInProperties和postCreate都删除，父类代码不变，子类的代码变为如下：

dojo.provide("iSpring.widgets.son.Son");
dojo.require("dijit._Widget");
dojo.require("dijit._Templated");
dojo.require("dojo.cache");
dojo.require("iSpring.widgets.father.Father");

dojo.declare("iSpring.widgets.son.Son",[iSpring.widgets.father.Father],{
    _module:"iSpring.widgets.son",

    constructor:function(){
        console.log("Son.constructor");
    },

    startup:function(){
        console.log("Son.startup");
    }
});

保存后刷新页面，在控制台中的输出结果如下：


发现在调用了父类、子类的构造函数之后，又调用了父类的postMixInProperties以及postCreate。


通过以上的实验，我们可以得知：基于继承的dojo小部件的生命周期类似于C#等高级语言中类的生命周期，首先要调用父类的构造函数，然后调用子类的构造函数，下面就进入了逐个事件点调用，如果对于某个事件点（比如postMixInProperties)，子类没有提供处理函数，就默认调用父类的处理函数，如果子类提供了处理函数，那么就会覆盖父类的同名方法，要想在该处理函数中调用父类的方法就要显式的调用this.inherited(arguments)语句。这样就完成了一个事件点的处理，然后继续以同样的方式处理下一个事件点（比如postCreate)。也就是说在基于继承的dojo小部件中，也存在类似于高级语言中的函数继承、函数覆盖重写等功能。

孙群
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Dojo 小部件开发演示
09-07
dojo dijit 小部件开发，将两个 Button 和一个 FilteringSelect 进行组合构成一个新的部件，便于开发部署，减少代码量.
Dojo Cache
robin xiong的专栏
04-09 1121
分析 Dojo 源代码时遇到 Cache, 以及pendingCacheInsert不
理解dojo.require机制
热门推荐
Dojo中文博客
10-12 3万+
Dojo 提供了一个非常强大的javascript控件库. 在使用dojo之前,用户基本上不需要具备任何基础知识. 你可以用script远程链接到dojo(dojo.js), 也可以把dojo.js下载到本地并用script标签加载.如果你不太了解dojo, 可以参考一下如下资料:Dojo 1.4 Cheat SheetDojo Base Source Tree (1.4.3)Dojo Reference Guide大体上,dojo.js和jquery.js 或者 prototype js, 里面有很
使用dojoConfig配置Dojo
rosten的专栏
10-23 1万+
dojoConfig对象(原来是djConfig)允许你设置toolkit各方面的选项值和默认行为。本教程我们将探索哪些是可以的和如何把dojoConfig用到你的代码中。 介绍 dojoConfig对象(在Dojo 1.6之前称为djConfig)是主要的配置Dojo途径，它被模块loader引用，也作为Dojo组件的全局选项。如果需要，它可以进一步被自定义应用程序配置点使用。
dojo的包加载机制
eric8376的专栏
11-11 546
1、前言   dojo利用ajax技术，基本实现的按需要下载js文件，估计与国内jsvm有类似功能（jsvm好久没关注了，不好乱说）。   a、类库开发人员可以在dojo基础上开发自己的javascript类库。（dojo提供的够多的了，并不断扩大）     b、可以按照每个页面的需要，加载有限的类库。   c、提供了很好的package机制。与java不同，采用dojo的包机制有一定写法要求
Dojo定义的生命周期
纪争光
03-23 5855
Dojo所开发的控件具有很强的内聚性和面向对象性。dojo的dijit._widget是dojo提供的图形界面组件库。     首先从dijit组件的核心类dijit._Widget开始。dijit._Widget是所以dijit组件的父类，dijit默认提供的组件和自己开发的组件都要继承此类。dijit._Widget提供了对组件生命周期的管理。dijit组件生命周期管理在实现的时候使
dojo生命周期
04-11
dojo 控件的应用似乎还没得到普及，好多资源都过时了，而且新的特性获得的资料大多都是英文。但是不变的是，dojo控件的构建生命周期。本文旨在帮助同学们了解dojo，帮助同学们为dojo的开发打下良好的基础。
widget:在 dojo 上测试小部件
06-15
小部件 在 dojo 上测试小部件 我不是从头开始创建的，它是在线版本的复制品 这仅用于培训目的
提高基于Dojo的Web2.0应用程序的性能
03-02
本文内容包括：Web2.0与Dojo介绍解决Dojo性能问题的常见技巧检测性能瓶颈的工具小结参考资料Web2.0应用程序最注重的一个方面就是用户体验，用户希望使用的是一个快速稳定的Web2.0应用。而基于Dojo的Web2.0应用经常...
dojo中类的声明与继承
shiyangxu的博客
08-14 799
在Dojo工具箱中，dojo/_base/declare模块是创建类的基础。declare允许开发者实现类多继承，从而创建有弹性的（灵活的）代码， 避免写重复的代码。 Dojo, Digit, Dojox模块都使用了declare。 1 语法 declare(className,superclass,props); 参数 类型 描述 className str...
DOJO组件生命周期（the life cycle of dojo widget）
小姜哥的技术博客
04-01 3549
<!-- @font-face {font-family:"Times New Roman"} @font-face {font-family:"宋体"} @font-face {font-family:"Garamond"} @font-face {font-family:"Symbol"} @font-face {font-family:"Arial"} @fo
Dojo小部件生命周期探究
孙群
09-30 3923
理解dojo小部件对于开发dojo的widget至关重要,dojo在绘制过程中主要存在以下几个过程： constructor->postMixInProperties->buildRendering/templateString/templatePath->postCreate->startup，为了探究各个过程，做了一个简单的widget，并且该widget包含子小部件。 以下是子小部件的模
正确解析Dojo的子小部件
孙群
09-30 4301
在创建自定义的dojo小部件的时候经常要使用模板文件，如果我们创建的小部件中内还有子小部件，那么我就需要在自定义的widget的模板文件中声明式的添加子小部件。下面我创建一个自定义的包含自小部件的widget。 创建的小部件比较简单，以下是小部件的模板文件： 按钮控件 以下是小部件的js代码： dojo.provide("iSpring.wi
从零开始学_JavaScript_系列（18）——dojo(7)（dojo中类的继承）
weixin_34060741的博客
05-20 105
关于声明及封装一个类，请查阅我的上一篇博客： http://blog.csdn.net/qq20004604/article/details/51456809 （72）继承一个类 在（71）的基础上，我们继续。 我们之前声明了一个类add，那么计算时，仅仅只有add显然是不够的。我们还需要minus（减去)。 那么我们重新建一个文件minus，然...
Dojo生命周期
YBZ_CSDN的博客
08-09 136
Dojo所开发的控件具有很强的内聚性和面向对象性。 dojo的dijit._widget是dojo提供的图形界面组件库。 首先从dijit组件的核心类dijit._Widget开始。dijit._Widget是所以dijit组件的父类，dijit默认提供的组件和自己开发的组件都要继承此类。dijit._Widget提供了对组件生命周期的管理。dijit组件生命周期管理在实现的时候使用了 template method设计方式。dijit._Widget的create（）方法定义了默认模版。开发人员也可以覆盖
【第一章：dojo 】4）单继承
沈荣荣的博客
08-03 470
我们要定义一个名为com.levinzhang.Employee 的类，继承自com.levinzhang.Person，并要添加名为workExperience的属性、重写getName方法等功能： dojo.declare("com.levinzhang.Employee", com.levinzhang.Person,{ workExperience:null, con
使用Dojo（一） widget的生命周期管理
生命就是一段不断积累的过程
05-30 334
最近在使用dojo作为项目系统前端开发的第三方库时，遇到了一些问题，由于之前只是单纯的拷贝代码，而未考虑到这些问题，现将这些问题记录下来，并结合DOJO库进行分析，以此系列作为记录，为今后的前端开发积累经验。       Q1、问题描述：       在创建了DOJO 的控件之后，例如统计图表，当更换统计图表中的数据源，重新生成图表的过程中，出现了第一次创建的图表仍存在，且覆盖住了后来生成的新
dojo继承
Zzzpiu的博客
10-21 170
在dojo工具箱中，dojo/_base/declare模块是创建类的基础。declare允许开发者实现类多继承，从而创建有弹性的(灵活的)代码，避免写重复的代码。Dojo，Digit，Dojox模块都使用了declare。 语法declare(classname，superclass，props)；1 参数解释：classname：类名，superclass：父类名，props：属性。注意：如...
dojo中类的继承
weixin_30715523的博客
08-09 77
类似于c# java等后台语言，在基于类的面向对象编程中，通常需要在子类中扩展某些父类的方法，这时可以在子类的方法中，先调用从父类继承的方法，然后再执行子类自定义的操作。凡是使用declare创建的类，可以使用一个特殊的inherited方法，在子类中调用父类中被覆盖的方法，也就是说，当在子类中的任何方法中调用this.inherited时，将调用父类中的同名方法。 例子： ...
dojo request get 接收 html
最新发布
06-06
require(["dojo/request"], function(request){ request.get("http://example.com/mypage.html", { handleAs: "text" }).then(function(response){ console.log(response); // 打印 HTML 响应 }, function...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值