ExtJS面向对象

Posted 周五, 10/21/2016 - 18:32 by admin

序言

  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》

作者: 默默淡然
原文: http://www.cnblogs.com/liangxiaofeng/p/5936270.html

  • 要发表评论，请先登录