ExtJS物件導向

張龍豪發表於2013-08-26
JS物件

序言

     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);  //結果：1
        person.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，private
        Ext.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，private
        Ext.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子類繼承自父類seeInfo
        Ext.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);  //這裡是24
       alert(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》

          

 

相關文章