zoukankan      html  css  js  c++  java
  • ExtJS面向对象

    序言

         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》

  • 相关阅读:
    git 仓库过大,clone不下来的解决办法
    vue项目使用elementUI pagination 实现前端分页
    Element中 Table表格数据居中显示设置
    css实现鼠标悬浮图片放大
    vue中配置开发环境、测试环境、生产环境
    vue中@keyup.enter没有作用
    LambdaToSql(轻量级ORM) 入门篇 开源项目
    04.如何升级扩展以支持Visual Studio 2019
    03. 将pdb调试文件包含到.vsix包中
    02.vs插件 获取项目和解决方案路径
  • 原文地址:https://www.cnblogs.com/felix-/p/4325511.html
Copyright © 2011-2022 走看看