序言

? ? ?1.ExtJs是一套很好的后臺框架。現在很流行的，我們要會。

? ? ? ? 2.這是我寫ExtJs的第一篇，以后會寫很多直到把這框架運用的爐火純青，走火入魔。

ExtJs中的命名空間

? ? ? ? ? ? 我是做.net的，這命名空間名字一樣，功能也一樣，都是對項目中類進行有效的管理，區分類的作用域。他們的層次結構都是使用“.”來劃分的。只不過定義的時候不一樣。Ext是通過namespace（）方法來定義的。（這里我先不展示，例子中我會用到的）

Javascript中的類定義

? ? ? 1.JavaScript是個基于原型鏈繼承的語言，沒有類的概念。而且JavaScript語言特點就是松散和自由，實現一個同樣的功能，可以有很多種方式，但是如果放任它的松散和自由，就很難維護和重用代碼。

? ? ? 2.面向對象編程絕大部分都是基于類的。然而讓extjs實現oop機制，既能做到既有面向對象編程的規范性，又能做到JavaScript的靈活性。不是不可能，你一定要了解js中的prototype。? ? ??

//假設我們定義一個Person類，因為js中沒有類概念Person = function () {this.head = 1;this.legs = 2;this.sex="or";}Person.prototype ={say: function () {alert("I'm a person , I have " + this.head + " head and " + this.legs + " lesgs .");},run: function () {alert("I can fly ,because I have " + this.head + " head");},saySex:function(){alert("I'm a "+this.sex);}//下面是還可以繼續寫方法的}var person = new Person();alert(person.head); //結果：1person.say(person.head, person.legs); //結果：I'm a person , I have 1 head and 2 lesgs .person.run(this.head); //結果：I can fly ,because I have 1 head

? ? ? ? ?prototype是js中一個非常重要的功能。能動態的為對象添加任何新方法。ExtJs就是基于prototype實現OOP的。

ExtJs 中的 OOP

? ? ?既然是面向對象的設計思想，那么就會有，繼承、多態、封裝。

? ? ?ExtJs是用javascript封裝起來的一個后臺應用框架，我們先看一下extJs是怎么實現oop的。

? ? ?1、命名空間，public，private。? ? ? ??

//js中的 命名空間，public，privateExt.namespace("com.zlh");com.zlh.seeInfo = function () {//私有成員var name = "zhanglonghao";//私有方法say = function () { alert(" I'm zhanglonghao . "); }//私有方法sayEgg = function () { alert(" You are a bad egg ! "); }//共有方法 return {//這里面可以訪問到 say（）， name//共有成員sayHello: function () { alert(" Hellow everyone . do you know " + name + " ?"); },//共有成員run: function () { alert(" I want to fly higher . "); }};};com.zlh.seeInfo.prototype.age = 24;//這里訪問不到 name， say();var zlh = new com.zlh.seeInfo();zlh.sayHello();zlh.run();

?? ? ? ? ??2、js實現類的繼承? ? ? ? ?

//假設我們定義一個Person類，因為js中沒有類概念Person = function () {this.head = 1;this.legs = 2;this.sex="or";}Person.prototype ={say: function () {alert("I'm a person , I have " + this.head + " head and " + this.legs + " lesgs .");},run: function () {alert("I can fly ,because I have " + this.head + " head");},saySex:function(){alert("I'm a "+this.sex);}//下面是還可以繼續寫方法的}//類的繼承var extend = function (p, c) {c.prototype = p.prototype;}Man = function () {this.sex = "Man";}extend(Person, Man);var gc = new Man();gc.saySex(this.sex);

?? ? ? ? 3、extjs實現類的繼承??

//js中的 命名空間，public，privateExt.namespace("com.zlh");com.zlh.seeInfo = function () {//私有成員var name = "zhanglonghao";//私有方法say = function () { alert(" I'm zhanglonghao . "); }//私有方法sayEgg = function () { alert(" You are a bad egg ! "); }//共有方法 return {//這里面可以訪問到 say（）， name//共有成員sayHello: function () { alert(" Hellow everyone . do you know " + name + " ?"); },//共有成員run: function () { alert(" I want to fly higher . "); }};};com.zlh.seeInfo.prototype.age = 24; //love子類繼承自父類seeInfoExt.extend(com.zlh.love, com.zlh.seeInfo, {//新方法loveYou: function () {alert(" You , my love ! ");},//重寫方法say: function () {alert(" I love you !");}});var ejc = new com.zlh.love();ejc.say();ejc.loveYou();alert(ejc.age); //這里是24alert(ejc.name); //這里是undefind

配置（Config）選項?

?? ? ?在Extjs中初始化對象時，大量的使用啦Config這個參數，而Config是一個json對象，為Extjs立下啦不少悍馬功勞。

? ? ?假設有一個Blog類，有標題和作者兩個屬性，并通過構造函數為屬性初始化。? ? ? ? ??

Blog = function (title, author) {this.title = title;this.author = author;}var Blog = new Blog("Extjs-OOP", "張龍豪");alert(Blog.title+" , 這篇博文的作者是："+Blog.author+"。感謝閱讀。");

? ? ? ? 上面這段代碼的數據我們用json代替。? ? ? ? ?

Blog = function (config) {this.title = config.title;this.author = config.author;}var Blog = new Blog({title:"Extjs-OOP", author:"張龍豪"});alert(Blog.title+" , 這篇博文的作者是："+Blog.author+"。感謝閱讀。");

? ? ? ?下面看看Extjs的實現方式

Blog = function (config) {Ext.apply(this,config);}var Blog = new Blog({title:"Extjs-OOP", author:"張龍豪"});alert(Blog.title+" , 這篇博文的作者是："+Blog.author+"。感謝閱讀。");

? ? ? Extjs定義的apply這個方法，作用是將第二個參數的成員賦值給第一個參數，這樣代碼寫起來就方便，簡便多啦。

Ext.apply()和Ext.applyIf()

? ? 上面我們已經看過apply(obj,config)的功能啦，applyIf(obj,config)的功能跟apply(obj,config)的功能一樣，也有不一樣的。

? ? ?apply是將config和obj參數的同名屬性值覆蓋，并將config中的其它屬性添加到obj中。

? ? ?apply是將config中的屬性添加到obj中，但obj參數原有的屬性值不變。（看下例子吧）

? ? ?apply(obj,config);

Blog = function (config) {this.title = "Extjs-OOP";Ext.apply(this,config);}var Blog = new Blog({ title: " Extjs4.*，開發實例。 ", author: "張龍豪" }); //輸出：Extjs-OOP，這博文的作者是：張龍豪.感謝閱讀。alert(Blog.title+" , 這篇博文的作者是："+Blog.author+"。感謝閱讀。");

? ? ? ? applyIf(obj,config);? ? ? ? ? ? ?

Blog = function (config) {this.title = "Extjs-OOP";Ext.applyIf(this,config);}var Blog = new Blog({ title: " Extjs4.*，開發實例 ", author: "張龍豪" }); //輸出：Extjs-OOP，這博文的作者是：張龍豪.感謝閱讀。alert(Blog.title+" , 這篇博文的作者是："+Blog.author+"。感謝閱讀。");

? ? ? ? ? ? ? ?

這篇博客是學習extjs的一些基礎知識普及。看似無關實際很重要。我用的是Extjs4.2。文章js引用：ext-all.js。

本文參考資料：李贊紅老師的 《輕松搞定ExtJs》

? ? ? ? ??

轉載于:https://www.cnblogs.com/hpx2020/p/10867605.html

總結

以上是生活随笔為你收集整理的ExtJS面向对象的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。