Dojo学习笔记(三):类化JavaScript

dojo/_base/declare模块是Dojo Toolkit中创建类的基础。declare支持多重继承,这使得开发者能够编写更加灵活的代码并避免代码多次重写。Dojo.Dijit和Dojox模块都使用declare,在这篇文章中,你就知道为什么你也要这样做了。

准备学习

在开始学习这篇文章前,请确保你复习过 模块定义 这篇文章了。

Dojo类的基本创建

declare函数是在dojo/_base/declare模块中定义的,函数接受三个参数:className,superClass和properties。

ClassName

className参数代表要创建类的名称和命名空间。命名的类都放置在全局作用域内,className也可以通过命名空间代表继承链。

命名类:

// Create a new class named "mynamespace.MyClass"
declare("mynamespace.MyClass", null, {// Custom properties and methods here});

命名类mynamespace.MyClass现在可以在应用的全局范围内使用了。

类只有在要被Dojo parser使用的情况下才能被命名,其他的类可以忽略className这一参数。

匿名类

// Create a scoped, anonymous class
var MyClass = declare(null, {// Custom properties and methods here});

myClass现在就可以在作用域内被使用了。

SuperClass(es)

SuperClass参数值可以为空,可以是一个类,也可以使类的集合。如果一个新类继承至多个类,那么类集合中的第一个类是基础模型,剩下的类都是混合类。

不继承的类

var MyClass = declare(null, {// Custom properties and methods here});

null代表这个类不继承至任何类。

一个类继承自另一个类

var MySubClass = declare(MyClass, {// MySubClass now has all of MyClass's properties and methods// These properties and methods override parent's});

新的类MySubClass将继承MyClass的属性和方法。稍后我们讨论如何通过第三个参数来重写父类的属性或方法。

继承自多个类

var MyMultiSubClass = declare([MySubClass,MyOtherClass,MyMixinClass
],{// MyMultiSubClass now has all of the properties and methods from:// MySubClass, MyOtherClass, and MyMixinClass});

一个类数组就代表类是多重继承,父类的属性和方法将继承给子类,类数组的第一个类作为子类的基础模板,其他的类将混合进去。

如果一个属性或方法在多个父类中出现,那么子类将继承最后一个类的属性或方法。

属性和方法对象

declare的最后一个参数是一个对象,这个对象的作用是在新类中重写父类的同名属性或同名方法。

自定义属性和方法

// Class with custom properties and methods
var MyClass = declare(MyParentClass, {// Any propertymyProperty1: 12,// AnothermyOtherProperty: "Hello",// A methodmyMethod: function(){// Perform any functionality herereturn result;}
});

举例:类的创建和继承

以下的代码创建了一个窗口小部件并继承自dijit/form/Button:

define(["dojo/_base/declare","dijit/form/Button"
], function(declare, Button){return declare("mynamespace.Button", Button, {label: "My Button",onClick: function(evt){console.log("I was clicked!");this.inherited(arguments);}});
});

从以上的代码片段可以得出结论:

  1. 类名叫mynamespace.Button
  2. 这个类可以在全局作用域内,通过mynamespace.Button或者模块的返回值被调用。
  3. 这个类继承自dijit/form/Button。
  4. 这个类自定义了一些属性和方法。

接下来让我们通过构造函数来深入学习类的创建。

构造函数

  类中最特殊的函数之一就是构造函数。当类初始化时,构造函数就会被触发并在新的对象中运行。这就意味着this关键字指向的是新的实例,而不是原来的类。构造函数也可以接受一些初始化参数。

// Create a new class
var Twitter = declare(null, {// The default usernameusername: "defaultUser",// The constructorconstructor: function(args){declare.safeMixin(this,args);}
});

  创建一个实例

var myInstance = new Twitter();

  在初始化实例的时候如果不指定username,那么实例将采用"defaultUser"作为实例名。为了使用safeMixin的方法,传入一个username参数:

var myInstance = new Twitter({username: "sitepen"
});

  现在新的实例就用sitepen作为username了。

继承

  如上所述,继承就是新的实例将复制declare的第二个参数中的父类的属性和方法,如下所示:

// Define class A
var A = declare(null, {// A few properties...propertyA: "Yes",propertyB: 2
});// Define class B
var B = declare(A, {// A few properties...propertyA: "Maybe",propertyB: 1,propertyC: true
});// Define class C
var C = declare([mynamespace.A, mynamespace.B], {// A few properties...propertyA: "No",propertyB: 99,propertyD: false
});

类的新实例的属性如下:

// Create an instance
var instance = new C();// instance.propertyA = "No" // overridden by B, then by C
// instance.propertyB = 99 // overridden by B, then by C
// instance.propertyC = true // kept from B
// instance.propertyD = false // created by C

  设置和重写数字,字符串和布尔型变量是线性的。在使用数组和对象的时候就要留意它们的作用域。在return中定义的数组或对象会被所有对象的实例所共享。在构造函数中定义的数组和对象就只是各个实例所拥有的了。可以参考 dojo/_base/declare 获取更多相关的信息。

this.inherited

  尽管完全重写方法是很有用的,但有时候一个继承链上的每个构造函数都会运行以保护它原始的功能。这时候就是this.inherited(argumengs)申明出场的时候了。this.inherited(argumengs)申明会调用父类中同名方法。如下所示:

// Define class A
var A = declare(null, {myMethod: function(){console.log("Hello!");}
});// Define class B
var B = declare(A, {myMethod: function(){// Call A's myMethodthis.inherited(arguments); // arguments provided to A's myMethodconsole.log("World!");}
});// Create an instance of B
var myB = new B();
myB.myMethod();// Would output:
//      Hello!
//      World!

  this.inherited方法可以任何时候在子类的代码中调用。有时候你需要在子类中函数的中间或尾部调用inherited(),还有,你不能再构造函数中调用它。

结论

  在Dojo Toolkit中declare函数式是创建模块化和可重用类的关键。declare允许通过多个类和对个属性方法来实现类的多重继承。可喜的是,declaer是很容易学习的,它允许开发者避免重复写同样的代码。

dojo/_base/declare

  想要进一步学习declare和类的创建?那就查看下面的资源:

  1. dojo.declare
  2. dojo.mixin Reference Guide
  3. Writing Your Own Widget

本系列文章翻译至Dojo官网,旨在学习Dojo并提高英语阅读能力,有翻译错误的地方请多指正!谢谢

转载于:https://www.cnblogs.com/ruowind/archive/2013/02/04/2892055.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/461363.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

联想ThinkCentre M8400t-n000等高配电脑重装成xp蓝屏0xc000007b代码

联想ThinkCentre M8400t-n000等高配电脑重装成xp蓝屏0xc000007b代码配置方法:开机进入bios设置界面 ,然后把那个硬盘接口从SATA设置成IDE模式。SATA比IDE高级,具有更高的硬盘传输速度,但是早先XP出的时候还不支持SATA&…

Linux进程编程4——父子进程对文件的操作

以下内容源于网络资源的学习与整理,如有侵权请告知删除。 1、子进程继承父进程中打开的文件 (1)上下文:父进程先用open打开一个文件得到fd,然后再fork创建子进程,之后在父子进程中各自write向fd中写入内容。…

BIOS误删win10引导 delete boot option如何恢复

BIOS误删win10引导 delete boot option如何恢复 其他系统也可以用来参考,解决只是将原来的配置加回去而已 倒了血霉 说个原则,希望大家在发现错误之后第一时间是保护现场不要乱动,如果在百度或别的地方找到了解决方案,先百度一下这个解决方案是否可行,不然不要轻易尝试,这些解决…

fir fpga 不同截止频率_一种新的FIR滤波器系数量化方法

相对于模拟滤波器,数字滤波器具有高精度、高可靠性、可编程改变滤波特性、便于集成等一系列优点,并且理论上可实现近似理想频率特性的滤波性能。经典的数字滤波器主要包括有限脉冲响应(Finite Impulse Response,FIR)滤波器和无限脉冲响应(Inf…

How to: Build a Client Application

转载于:http://msdn.microsoft.com/en-us/library/y6dc64f2(vvs.80).aspx 转载于:https://www.cnblogs.com/aran/archive/2013/02/22/2922438.html

Linux文件和目录权限

前言文件系统权限可以用‘ll’或者‘ls -l’查看第一位表示文件类型,后面9位三三一组分别表示属主,属组,其他用户权限其中r对文件表示可读权限,如cat,tail,more,less等对目录表示可以使用ls命令…

Linux进程编程3——守护进程

以下内容源于网络资源的学习与整理,如有侵权请告知删除。 一、守护进程介绍 1、进程查看命令ps ps -ajx偏向显示各种有关的ID号;ps -aux偏向显示进程各种占用资源 2、(用于向进程发送信号的)指令kill “kill -信号编号 进程ID”&a…

JSONObject,JSONArray,对象,数组互相转化

json类型对象转化成对象类型 JSONObject.toJavaObject(jsonObj, Object.class)json类型对象转化为List类型 JSONArray.parseArray(JSONObject.toJSONString(object, Object.class))对象转化成String类型的Json数据 JSONObject.toJSONString(object)转载于:https://www.cnblogs.…

pandas用众数填充缺失值_python数据分析包|Pandas-02之缺失值(NA)处理

本篇详解pandas中缺失值(Missing data handling)处理常用操作。缺失值处理常用于数据分析数据清洗阶段;Pandas中将如下类型定义为缺失值:NaN: ‘’, ‘#N/A’, ‘#N/A N/A’, ‘#NA’, ‘-1.#IND’, ‘-1.#QNAN’,‘-NaN’, ‘-na…

知识点滴:持久层,DAO,API,DAL,BLL,DLL,csproj,sln

知识点滴:持久层,DAO,API,DAL,BLL,DLL,csproj,sln 摘自: http://www.cnblogs.com/niuniu1985/archive/2009/12/10/1620918.html 知识点滴:持久层,DAO&#xf…

系统设计学习

2019独角兽企业重金招聘Python工程师标准>>> 这里原帖地址: http://www.mitbbs.com/article_t/JobHunting/32492515.html 以下为转载内容 我是分割线 稍微总结一下1. 入门级的news feedhttp://www.quora.com/What-are-best-practices-for-building-somethttp://w…

Linux进程编程5——进程间通信(IPC)概述

以下内容源于网络资源的学习与整理,如有侵权请告知删除。 1、为什么需要进程间通信? (1)进程间通信(IPC) 指的是2个任意进程之间的通信。(2)同一个进程在一个地址空间中 同一个进程…

编码 括号_Java编码规范整理汇总

来源:博学谷 作者:照照在Java的入门过程中,我们首先要养成一个良好的编写代码习惯。那么,了解清楚Java的编码规范就显得尤为必要了。编码格式不仅仅是美不美观的问题。这里我们可以试想一下,如果在Java开发中编码不规范…

rabbitmq消息队列,消息发送失败,消息持久化,消费者处理失败相关

转&#xff1a;https://blog.csdn.net/u014373554/article/details/92686063 项目是使用springboot项目开发的&#xff0c;前是代码实现&#xff0c;后面有分析发送消息失败、消息持久化、消费者失败处理方法和发送消息解决方法及手动确认的模式 先引入pom.xml <!--rabbitmq…

人的幸福感取决于什么

1988年4月&#xff0c;霍华德金森24岁&#xff0c;是美国哥伦比亚大学的哲学系博士。他毕业论文的课题是《人的幸福感取决于什么》。为了完成这一课题&#xff0c;他向市民随机派发出了一万份问卷。问卷中&#xff0c;有详细的个人资料登记&#xff0c;还有五个选项&#xff1a…

基于nginx实现缓存功能及uptream模块详细使用方法

基于nginx实现缓存功能及uptream模块详细使用方法一般情况下&#xff0c;前端使用nginx做代理或7层负载并向后实现varish/squid做cache server的效果要好的多nginx与squid做缓存比较nginx比squid有着巨大的优势表现在&#xff1a;nginx是异步假如后端的web服务器&#xff0c;当…

linux中的信号1——进程如何处理信号?

以下内容源于朱有鹏嵌入式课程的学习与整理&#xff0c;如有侵权请告知删除。 一、信号概述 1、信号是内容受限的一种异步通信机制 &#xff08;1&#xff09;信号的目的&#xff1a;用来进程间通信&#xff08;IPC&#xff09;、进程和内核间的通信。 &#xff08;2&#xff…

单片机oled显示浮点数函数_问中文编程在单片机上实现一个电子时钟,总共有几步?...

首先介绍开发一下语言&#xff1a;mcuScript&#xff0c;他是一个支持同时支持中文编程和英文编程的弱数据类型的脚本语言。相关介绍可参考前面的两篇文章:彭贞&#xff1a;mcuScript一个洋名字的中文(汉语)编程语言&#xff0c;初体验​zhuanlan.zhihu.com彭贞&#xff1a;mcu…

RabbitMQ的消息确认机制

转&#xff1a;https://www.toutiao.com/a6583957771840913934/?tt_frommobile_qq&utm_campaignclient_share&timestamp1532999387&appnews_article&utm_sourcemobile_qq&iid39062783162&utm_mediumtoutiao_android 一&#xff1a;确认种类 RabbitMQ的…

杂记-字符串的字节长度

JS对字符串字节长度处理&#xff1a; String.prototype.gblen function () { var len 0; for (var i 0; i < this.length; i) { if (this.charCodeAt(i) > 127 || this.charCodeAt(i) 94) { len 2; } else { len; …