Kendo UI开发教程:使用Kendo UI库实现对象的继承

转帖|使用教程|编辑:龚雪|2016-10-19 09:19:14.000|阅读 244 次

概述:Kendo UI不仅仅提供了一些好看的UI组件,而且也提供一个JavaScript构建对象,实现继承的方法,其形式接近于C++、Java的类继承方法。

相关链接:

JavaScript也是一种面向对象的开发语言,但和C++,Java,C#所不同的是,它的对象不是基于类(Class),而是基于对象原型(ProtoType),因此对于来自C++、Java等背景的程序员,初次接触到JavaScript的面向对象的开发时,开始会有些不适应。而JavaScript语言本身也非常灵活,实现面向对象的方法也很多,不同的框架使用的方法也不同。

对于JavaScript的面向对象的方法和C++、Java面向对象的不同点。举个简单的类比,使用C++、Java来建房,是先有蓝图(Class),然后根据这个蓝图(Class)来建房(对象)。而JavaScript是直接建个房(Object)。如果要将个新房,就参考这个建好的房作为原型(prototype),然后复制一个对象。

Kendo UI不仅仅提供了一些好看的UI组件,而且也提供一个JavaScript构建对象,实现继承的方法,其形式接近于C++、Java的类继承方法。

使用kendo.Class.extend创建对象

首先可以创建一个新对象(注意JavaScript中没有类的概念),可以通过kendo.Class.extend 来定义。

var person = kendo.Class.extend({});

上面代码创建一个Person对象,但没有定义Person对象任何属性和方法。下面可以为Person定义一些属性和方法(函数),可以通过对象字面量的方法来定义,Javascript对象的属性或方法都是以Key:value的形式来定义。也使用this来引用对象的方法或属性。

var Person = kendo.Class.extend({
firstName: ‘Not Set’,
lastName: ‘Not Set’,
isAPrettyCoolPerson: false,
sayHello: function() {
alert(“Hello! I’m “ + this.firstName + ” “ + this.lastName);
}
});

var person = new Person();
person.sayHello();
>Kendo UI开发教程

创建构造函数

也可以为对象添加一个构造函数,Kendo UI使用 init 来定义构造函数 ,这样在创建新对象时,可以通过构造函数来创建新的对象. 下面代码重新定义Person对象,并为其添加一个属性isAPrettyCoolPerson:

var Person = kendo.Class.extend({
firstName: ‘Not Set’,
lastName: ‘Not Set’,
isAPrettyCoolPerson: false,
init: function (firstName, lastName) {
if (firstName) this.firstName = firstName;
if (lastName) this.lastName = lastName;
},

sayHello: function () {
alert(“Hello! I’m “ + this.firstName + ” “ + this.lastName);
}

});

var person = new Person(“John”, “Bristowe”);
person.isAPrettyCoolPerson = true;
person.sayHello();

我们使用这个对象,创建一个名为John、Bristowe的Person,并把它的isAPrettyCoolPerson属性设为True。

>Kendo UI开发教程

创建一个派生对象

现在我们可以创建Person对象的一个派生对象Parent、Parent对象继承Person对象 ,然后我们创建一个Dad对象。

var person = new Person(“John”, “Bristowe”);
person.isAPrettyCoolPerson = true;

var Parent = Person.extend({
firstName: ‘Mark’,
lastName: ‘Holland’
});

var myDad = new Parent();
myDad.isAPrettyCoolPerson = true;

myDad.sayHello();
alert(myDad.isAPrettyCoolPerson);
>Kendo UI开发教程

我们再创建一个Child对象,继承自Parent,要注意的是isCoolPerson 属性。想想它的值是真还是假呢?

var Child = Parent.extend({});
var me = new Child();
me.firstName = “Burke”;
me.sayHello();
alert(me.isAPrettyCoolPerson);
>Kendo UI开发教程

可以看到me的isAPrettyCoolPerson的值为false, 没有因为myDad的isAPrettyCoolPerson为True而变为true, 这些因为Child继承自Parent、Parent缺省的isAPrettyCoolPerson为false, myDad修改的只是某个特定的实例的值,没有修改作为原型的对象(Parent)的属性。

本文转载自Kendo UI中文网
购买正版授权的朋友可以点击"咨询在线客服"哦~~~
慧都特邀Kendo UI原厂开发工程师举行线上公开课,使用该控件的朋友千万别错过哦>>查看详情

kendo ui 公开课



标签:JavaScript HTML5.NET跨平台UI界面KendoUIHTML5/JS

本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处,尊重他人劳动成果

文章转载自:慧都控件网

登录慧都网发表评论登录


慧都网友 2016-10-19 09:24:01.000
0

非常详细的教程介绍,代码都非常详细,感谢分享!


为你推荐

  • 推荐视频
  • 推荐活动
  • 推荐产品
  • 推荐文章
  • 慧都慧问
title
相关厂商
相关产品
Kendo UI Web

运用JavaScript和HTML5就能快速创建性能最优的Web应用程序

Kendo UI Mobile

使用HTML5和JavaScript快速开发跨平台原生移动应用程序的移动应用程序框架

Kendo UI DataViz

跨平台跨设备的数据可视化组件

Kendo UI Core

Kendo UI Core是Kendo UI的开源免费版,是HTML5构架下的用于网络和移动开发的工具。

Kendo UI

全新升级的Kendo UI,是创建数据丰富的Web应用程序的最完整UI库。

在线客服 在线QQ 电话咨询
400-700-1020
反馈
在线客服系统
live chat