JavaScript面向对象 “四段式”类设计方法

为儿讨公道234

为儿讨公道234

2016-02-19 20:30

图老师小编精心整理的JavaScript面向对象 “四段式”类设计方法希望大家喜欢,觉得好的亲们记得收藏起来哦!您的支持就是小编更新的动力~

引 

  近段时间做的两个小纯Js的小游戏 PuzzleGame / Tetris (开发中),对JavaScript的面向对象设计方法进行了不同的尝试。
在PuzzleGame的实践过程中,面向对象的设计方法遭到多次挫折,最终还是大部分函数式编程完成,夹杂了小部分面向对象方法。
而在Tetris的设计初始,偶遇《JavaScript王者归来》(月影 著),翻看了前面小部分内容,在第一个实例(计算器)中,看到了一种开放接口的简单方法,顿时解开了前阵子PuzzleGame实践过程中的困惑,一切豁然开朗。
于是我在设计Tetris的过程中结合自己的习惯形成了一种类设计的方法,确实在很大程度上提高了编码的效率,代码结构也更加清晰。

  现在跟大家分享这样一种简单的方法,我自称其为“四段式”类设计方法。希望对大家有帮助,如有错漏请大家批评指出~

(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/webkaifa/)

  四段式
 
  在介绍这样一种方法之前,需要首先申明的是,这样一种方法是我在自己实际实践中总结出的比较适用自己的一种方法,但是其中并没有考虑面向对象继承机制方面的问题。至少在我写的几百行代码的一个程序中,本身并不需要继承的机制,再应用这样一种方法时,我暂且狭隘的认为,继承在JavaScript这样一种脚本语言的日常应用中是比较少用的。如果希望应用继承机制,或许需要进行改进,这点我并没有进行尝试。

  接下来看一段简单的代码示例

function TestClass() {

(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/webkaifa/)

    // 第一段 变量声明
    var var1 = 1;
    var var2 = 2;
    var var3 = 3;
   
    // 第二段 初始化
    method1();
    method2();
   
    // 第三段 函数声明
    function method1() {
        alert(var1);
    };
   
    function method2() {
        alert(var2);
    };
   
    function method3() {
        alert(var3);
    };
   
    // 第四段 开放接口
    this.method1 = method1;
    this.method3 = method3;
   
    this.setVar1 = function(v) {
        var1 = v;
    };
    this.getVar1 = function() {
        return var1;
    };
   
};

  也许你已经一目了然了。没有什么惊艳的地方,但或许对你有帮助。

  如果你有兴趣继续看下去,我会对这所谓的“四段式”做进一步解释。

  第一段 变量声明
 
  变量声明采用一种“私有”变量的声明方法。为什么这样做?两个原因。

  第一,符合了面向对象封装的特性,类外部无法对其直接访问。

  第二,使用方便。不管在“私有”方法还是“公有”方法中,都可以方便地直接通过变量名调用变量。当然,前提是使用这样一种“四段式”类设计的方法:你必须将所有的方法写到构造函数中去。

  也许你还不明白第二点到底是什么样的好处。你有没有试过困惑于对变量要设计成公有还是私有的时候?你应该很明白,当我们用“私有”变量的方式声明时,我们可以在构造函数的任何位置直接用变量名进行调用,而当我们用“公有”变量的方式声明时,比如 this.var1 = 1,当你要在任何位置使用这样一个变量时,你必须使用this.var1,你不能省略前面的this.,这点颠覆了我们编写C++和Java的习惯。另外一个缺点,如果是用this指针,你还要小心地充分考虑上下文,防止误用this(当然这点可以通过在构造函数开始处通过声明一个变量引用this指针来解决,例如 var which = this,之后通过which调用this指针)。是不是觉得有点麻烦?

  当你想要从类外部调用变量的时候,可能不得已要用“公有”变量的方式声明变量,麻烦也就随之而来。

  而“四段式”设计,不用考虑以上问题,只要把所有的变量都用“私有”的方式声明就行。

  第二段 初始化
 
  这部分没有什么好说的,就是做一些类似在构造函数中应该做的初始化工作,可能是一到几段简单的代码,可能调用到一些方法。之所以放在靠前的位置是方便代码阅读者一眼就可以看到构造函数做了什么事。

  第三段 函数声明
 
  函数声明和变量声明部分有异曲同工之妙。也是采用所谓“私有”的方式声明所有的方法。好处与变量声明部分所述也基本一致。

  第四段 开放接口
   
  第四段是我认为最精致也最为核心的部分。我们在这部分开放我们需要从外部进行访问的方法和变量,以满足我们的设计需求。

  开放方法接口的方式很简单:使用一个同名的公有方法做一个私有方法的引用,即 this.methodName = methodName 。当然你可以使用另外的方法名,但是强烈建议使用同名的方式来引用。

  开放变量接口的方法,实际上是使用了JavaBean的风格,无需多做解释。你可能会问,为什么不用开放方法接口的方法?即直接用 this.varName = varName 的方式。 这是一个细节问题,很多时候,当我们的变量是一个对象类型时,它很可能会在某些时候会改变自身引用的对象,这时候this.varName仍然指向原始的对象,这时候会出现问题了。

   ok,就这样。请各位指教呵呵!

展开更多 50%)
分享

猜你喜欢

JavaScript面向对象 “四段式”类设计方法

Web开发
JavaScript面向对象 “四段式”类设计方法

JavaScript面向对象之方法重载

Web开发
JavaScript面向对象之方法重载

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

Javascript面向对象编程

Web开发
Javascript面向对象编程

javascript 的面向对象编程

电脑网络
javascript 的面向对象编程

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

JavaScript的面向对象(一)

Web开发
JavaScript的面向对象(一)

JavaScript的面向对象(二)

Web开发
JavaScript的面向对象(二)

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

关于Java编程语言中EJB最新技术的详细说明

关于Java编程语言中EJB最新技术的详细说明

JavaScript-给iframe里的内容定义样式

JavaScript-给iframe里的内容定义样式
下拉加载更多内容 ↓