序言

? ? ?1.ExtJs是一套很好的后臺(tái)框架。現(xiàn)在很流行的，我們要會(huì)。

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

ExtJs中的命名空間

? ? ? ? ? ? 我是做.net的，這命名空間名字一樣，功能也一樣，都是對(duì)項(xiàng)目中類進(jìn)行有效的管理，區(qū)分類的作用域。他們的層次結(jié)構(gòu)都是使用“.”來劃分的。只不過定義的時(shí)候不一樣。Ext是通過namespace（）方法來定義的。（這里我先不展示，例子中我會(huì)用到的）

Javascript中的類定義

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

? ? ? 2.面向?qū)ο缶幊探^大部分都是基于類的。然而讓extjs實(shí)現(xiàn)oop機(jī)制，既能做到既有面向?qū)ο缶幊痰囊?guī)范性，又能做到JavaScript的靈活性。不是不可能，你一定要了解js中的prototype。? ? ??

//假設(shè)我們定義一個(gè)Person類，因?yàn)閖s中沒有類概念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);}//下面是還可以繼續(xù)寫方法的}var person = new Person();alert(person.head); //結(jié)果：1person.say(person.head, person.legs); //結(jié)果：I'm a person , I have 1 head and 2 lesgs .person.run(this.head); //結(jié)果：I can fly ,because I have 1 head

? ? ? ? ?prototype是js中一個(gè)非常重要的功能。能動(dòng)態(tài)的為對(duì)象添加任何新方法。ExtJs就是基于prototype實(shí)現(xiàn)OOP的。

ExtJs 中的 OOP

? ? ?既然是面向?qū)ο蟮脑O(shè)計(jì)思想，那么就會(huì)有，繼承、多態(tài)、封裝。

? ? ?ExtJs是用javascript封裝起來的一個(gè)后臺(tái)應(yīng)用框架，我們先看一下extJs是怎么實(shí)現(xiàn)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實(shí)現(xiàn)類的繼承? ? ? ? ?

//假設(shè)我們定義一個(gè)Person類，因?yàn)閖s中沒有類概念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);}//下面是還可以繼續(xù)寫方法的}//類的繼承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實(shí)現(xiàn)類的繼承??

//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）選項(xiàng)?

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

? ? ?假設(shè)有一個(gè)Blog類，有標(biāo)題和作者兩個(gè)屬性，并通過構(gòu)造函數(shù)為屬性初始化。? ? ? ? ??

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

? ? ? ? 上面這段代碼的數(shù)據(jù)我們用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的實(shí)現(xiàn)方式

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

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

Ext.apply()和Ext.applyIf()

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

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

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

? ? ?apply(obj,config);

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

? ? ? ? ? ? ? ?

這篇博客是學(xué)習(xí)extjs的一些基礎(chǔ)知識(shí)普及?？此茻o關(guān)實(shí)際很重要。我用的是Extjs4.2。文章js引用：ext-all.js。

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

? ? ? ? ??

轉(zhuǎn)載于:https://www.cnblogs.com/hpx2020/p/10867605.html

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。