js面向对象 learning extjs 中文

这些年来，我们越来越重视基于浏览器到web应用。而大多数浏览器都内置了javascript，所以它成了事实上的页面客户端脚本标准。

自IE6以后，Microsoft发展自己的标准，更倾向于支持Jscript而不是javascript。然而IE占有市场的绝大份额，这就产生了一些问题。W3C创建了DOM的一些标准，像Mozilla,Opera都支持，只有IE迟迟没有向这些标准靠拢。这就给客户端开发者造成很多困扰，不得不创建跨浏览器的应用。Netscape和IE的浏览器大战已经持续了好几个版本了，都慢慢倾向于发展自己的标准，这对跨浏览器开发是很大的挑战。这导致了开发者更愿意用基本的表单校验和图片来处理而不愿花时间和力气去做麻烦的跨浏览器客户端。

当进入了Web2.0时代，ajax成了个热门词。Ajax 其实也不是什么新技术，熟知的javascript的开发者希望利用它来创建更加动态的，交互性更强的富客户端应用。

当对前台页面脚本编程的兴趣卷土重来时，依然存在着跨浏览器的问题。因此出现一些跨浏览器的javascript包，像Dojo,Prototype,Yahoo UI等等，他们充满了活力，期望解决先前跨浏览器令人头疼的问题。这些包的开发者，与javascript一起共同前进，javascript也发展成了可以面向对象编程。这使得我们可以创建对象，可以扩展代码，可以重复利用代码。当然我们所谓的面向对象，是借助了javascript的prototype编程模式的。

 

利用Extjs来面向对象编程

Extjs是javascript面向编程的一个很好的例子。Ext js的包是很容易扩展的。我们可以根据自己的需要,在已有对象的基础上继承和扩展对象，不需要从头写起。

 

继承

为了能更好的知道我们可以做什么，我们要先知道面向对象编程的一个重要概念：继承。

当我们要创建自己的控件时，我们可以继承Extjs已有的控件，然后扩展我们需要的属性，复写已有的函数。

这样说可能有点混乱，因为有点复杂。不过我们可以来看一个简单的例子。假设我们在为某个公司做一个客户管理应用，该公司有销售人员，他们有着客户和联系方式。公司有卖主，也有联系方式。我们的这个例子里需要3个简单的类，其实都是人。

Salesperson

ClientContact

VendorContact

这些人的对象可以共用一些基本的属性和方法，因为每个人都有姓名，email地址，电话号码和通信地址。我们可以用一张图更清晰的分析这个类。

人这个对象有4个属性：name,emailAddress,phoneNumber和address.同时address 这个属性本身也是个对象。有简单的方法如get和set来设置和获取属性值。

每个对象有区分的id,如salesPersonID,clientContactID或vendorContactID.

注意到我们的SalesPerson 类中并无关于人的任何属性和方法。因为SalePerson继承了Person对象。Person 里的所有属性和方法也成了SalesPerson的一部分。现在我们可以创建SalesPerson.

var sp = new SalesPerson();

你可以给sp一个名字

sp.setName(“guoyiqi”);

你不必通过对象（SalesPerson）的父类(Person)去调用方法和属性，因为通过继承，SalesPerson就是一个Person.。

 

 

接下来我们看下覆写。

通过继承，父类的属性和方法子类都可以拥有。但有时子类的方法和父类的方法有所不同。比如：Person类有个validate()方法，用来校验属性值并返回错误信息。在SalesPerson对象里，还有其他属性要校验，这时你就要覆写已有的方法。

validate: function() {

// Some validation code here

}

在这个例子里，所有的属性都要校验，所以我们可以这样写：

validate: function() {

var errorArr = ourObjects.salesperson.superclass.validate.

call(this);

// The salesperson specific validate stuff, appending the errorArr

return errorArr;

}

这就是基本的面向对象编程了，如果懂了我们就可以用Extjs来创建我们自己的类了。

 

当然我们还要了解一下其他面向对象的词：

Package,包，一些相关的类我们可以放在一个包里。例如，Ext.data包就是用来处理不同种类的data Stores,readers和records。Ext.grid包包括了不同的表格控件和选择方法。Ext.form包包括了form的不同表单项属性。

 

Class,类，定义了对象的属性和方法，我们先前的例子，Person和SalesPerson就都是类对象，而且应该放到一个包里。

 

Namespaces,命名空间，类是包的一部分，包也有自己的命名空间。Namespaces 包含了逻辑上成组的包和类。例如，extjs 包含在Ext这个命名空间里。命名空间已.隔开，如Ext.grid,Ext.form,Ext.data都是命名空间。

 

我们了解了这些基本概念后，就可以把它们应用到我们自定义的Extjs控件中了。