`

Base.js 库 实现 JS 的对象化编程

    博客分类:
  • JS
阅读更多

最近在研究JS的面向对象编程。

由于JS使用Function的概念来代替Class,往往使用这种方式来定义一个对象:

 

   function JSClass()
   {

    //成员变量
    this.m_Text = 'division element';
    this.m_Element = document.createElement('DIV');
    this.m_Element.innerHTML = this.m_Text;
   
    this.m_Element.attachEvent('onclick', this.ToString);
   }


   //成员方法 
   JSClass.prototype.Render = function()
   {
    document.body.appendChild(this.m_Element);
   }    

   JSClass.prototype.ToString = function()
   {
    alert(this.m_Text);
   };

 

   var jc = new JSClass();
   jc.Render();
   jc.ToString();

 

后来找到:

很多的JS项目中使用了这种方式来实现

引入一个老外牛人叫做(dean.edwards)开发的基类: base.js

然后,就可以更加面向对象的方式编写JS的class类了,还支持扩展等。

按照他的说法,写此基类的目的就是:

 

  • I want to easily create classes without the MyClass.prototype cruft
  • I want method overriding with intuitive access to the overridden method (like Java’s super)
  • I want to avoid calling a class’ constructor function during the prototyping phase
  • I want to easily add static (class) properties and methods
  • I want to achieve the above without resorting to global functions to build prototype chains
  • I want to achieve the above without affecting Object.prototype
  •  

    基本的使用方法就是:

     

    var Animal = Base.extend({
      constructor: function(name) {
        this.name = name;
      },
      
      name: "",
      
      eat: function() {
        this.say("Yum!");
      },
      
      say: function(message) {
        alert(this.name + ": " + message);
      }
    });

     

    成员变量和方法的创建都比原来简单吧。

     

    使用就是这样:

    new Animal("cats").say("fish");

    如果

     ani = new Animal();

    那么ani.name 就是 undefined 了

     

     

    继承:

     

    var Cat = Animal.extend({
      eat: function(food) {
        if (food instanceof Mouse) this.base();
        else this.say("Yuk! I only eat mice.");
      }
    });

     

    可见,在子类中,使用this.base的方式来调用super中的同名方法。

     

    更多的使用方法可以搜索这个作者的博客。

     

    附上我的测试代码

     

    分享到:
    评论

    相关推荐

      ext-base.js

      2. **类系统**:EXT使用面向对象的编程方式,"ext-base.js"中包含了类的创建、继承和实例化等机制,使得开发者可以方便地创建自定义组件。 3. **事件系统**:EXT的事件模型是其交互性的重要组成部分,"ext-base.js...

      JS仿Base.js实现的继承示例

      Base.js是一个流行的JavaScript基础类库,它提供了一套基础的类继承实现方式,让开发者可以很轻松地在JavaScript中实现面向对象编程。通过仿Base.js的继承方式,可以让开发者更加深入理解JavaScript的原型链继承、...

      javascript.base

      "js.base.4.object.pptx"将详细介绍JavaScript的对象。在JavaScript中,一切都是对象,对象是键值对的集合。理解对象的创建、属性访问、原型链以及对象的继承机制对于理解和使用JavaScript至关重要。 "js.base.5....

      prototype.js中文手册

      Prototype.js 是一个开源JavaScript库,由Sam Stephenson于2005年创建,主要用于简化DOM(文档对象模型)操作,增强JavaScript的面向对象编程能力,以及提供实用的函数扩展。它在Web开发中扮演着重要的角色,尤其在...

      prototype.js开发笔记.pdf

      Prototype.js是一个JavaScript库,由Sam Stephenson编写,用于简化JavaScript编程,提供了许多有用的函数和方法,以帮助开发者快速构建Web应用程序。下面是Prototype.js的开发笔记,涵盖了该库的使用指南、Ajax对象...

      Js base

      【标题】"Js base"指的是JavaScript的基础知识,它涵盖了JavaScript语言的核心概念,是所有JavaScript开发者必须掌握的基础。JavaScript是一种广泛用于网页和网络应用的脚本语言,它在浏览器端运行,为网页添加交互...

      讲解JavaScript的面向对象的编程

      本人在带学生使用EXT框架时,我发现学生阅读Ext的sample代码有问题,特别是对JavaScript的面向对象编程的书写方式不熟悉,于是,写了四个sample来说明它现代JS编程的对类的定义方式、类继承的方式,以及怎样发展到...

      Classify.js:用于经典对象继承的 JavaScript 库

      在JavaScript中,对象继承是面向对象编程的一个核心概念,它允许创建新的对象基于已存在的对象,从而实现代码复用和结构化编程。`Classify.js`是一个专为JavaScript设计的库,旨在提供一种简洁、强大且灵活的方式来...

      H3C.TS.Base.Core.rar

      12. **Blazor**:ASP.NET Core的Web UI框架,使用C#构建客户端Web应用,无需JavaScript,实现前后端同构。 综上所述,"H3C.TS.Base.Core.rar"这个压缩文件可能包含的是一份关于如何使用C# Core进行开发的教学材料或...

      djs-base-shwi:使用javascript(类)的简单discord.js库

      标题“djs-base-shwi:使用javascript(类)的简单discord.js库”指出这是一个基于JavaScript的库,特别的是,它利用了面向对象编程中的类特性,为开发人员提供了一种简化的方式来与Discord应用接口交互。"djs-base-...

      javascript面向对象编程代码.docx

      JavaScript是一种基于原型的面向对象编程语言,它支持类的继承、封装和多态等面向对象特性,但实现方式与传统的类式语言(如Java或C++)有所不同。在JavaScript中,对象是通过函数来创建的,函数即为构造函数。下面...

      JsStringTool_more_platform.js.zip

      在实际开发中,`JsStringTool_more_platform.js`这个文件应当被引入到项目中,通过实例化工具类对象并调用其提供的方法来实现字符串的国际化和多平台适配。使用这个工具类,开发者可以避免手动处理字符串格式化和...

      vue.js实现图片文件批量上传代码.zip

      Vue.js 是一款流行的前端JavaScript框架,它以组件化开发、易用性和高性能著称。在Vue.js中实现图片文件的批量上传,涉及到多个关键知识点,包括文件API的使用、事件监听、状态管理以及与服务器的交互。下面我们将...

      JSON,Base64.zip

      `JSON.parse()`用于将JSON字符串转化为JavaScript对象,而`JSON.stringify()`则是将JavaScript对象转化为JSON字符串。 综上所述,JSON和Base64在Web开发中扮演着重要的角色。JSON提供了高效的数据交换格式,Base64...

      Base_js

      "Base_js"这个标题可能指的是一个基础的JavaScript库或者教程,旨在帮助开发者构建Web应用程序。HTML(HyperText Markup Language)是网页内容的主要结构语言,与JavaScript紧密配合,实现交互性和动态功能。 ...

      base64序列化字符串

      在编程中,我们通常使用特定的库或函数来实现Base64的序列化。例如,在Python中,我们可以使用`base64`模块的`b64encode()`函数将字节对象转换为Base64字符串: ```python import base64 binary_data = b'\x01\x02...

      jsdebug库 zip

      `Json.js`可能是一个JSON(JavaScript对象表示法)处理的模块,它可能提供了JSON格式的序列化和反序列化功能,方便数据交换和存储。 `md5.js`和`base64.js`是关于数据编码的工具。MD5是一种广泛使用的哈希函数,...

      H5+JS页面直接查看PDF文件

      4. **初始化PDF.js**:在JavaScript中设置PDF.js的全局配置,并加载PDF数据。 ```javascript PDFJS.getDocument(blobUrl).then(function(pdf) { // pdf是PDF文档的Promise对象,可以获取PDF的页数等信息 }); ``` ...

      js在线阅读pdf(电脑端)

      JavaScript(简称JS)是一种广泛用于Web开发的轻量级编程语言,它在浏览器环境中执行,为用户提供动态交互体验。在本文中,我们将深入探讨如何利用JS实现在线阅读PDF文档的功能,特别是针对电脑端的优化。 在线阅读...

    Global site tag (gtag.js) - Google Analytics