十、类

·  阅读 69
十、类

可读性:★★★★✰ 理解难度:★★★✰✰

概述

前面讨论了很多关于代码语句以及函数的相关内容,但是,除非我们将注意力放到代码组织的更高层面,否则始终不能得到整洁的代码。

对于前端来说,class是es6 新增的语法,是基于原型机制的语法糖。class是为面向对象编程而生。所以它拥有OOP的特点:抽象封装、继承、多态。

一、类的组织

自上而下的顺序,如下:

静态变量

静态方法

构造函数

原型方法

class Person {
    static VAR1 = 'xxx'

    static staticMethod() {
        console.log(this.VAR1)
    }

    constructor(name, age) {
      this.name = name;
      this.age = age;
    }
  
    getName() {
      return this.name;
    }
}
复制代码

上面代码转化成es5代码:

function Person(name, age) {
    this.name = name;
    this.age = age;
}

Person.prototype.getName = function() {
    return this.name;
}
// 静态属性
Person.VAR1 = 'xxx'
// 静态方法
Person.staticMethod = function() { console.log(this.VAR1) }
复制代码

继承

class Child extends Person {
    constructor(name, age, toy) {
        // 调用父类的constructor(name, age)
        super(name, age);
        this.toy = toy;
    }
    
    playGame() {
        console.log(super.getName() + ' like ' + this.toy)
    }
}
复制代码

子类可以通过继承的方式,拥有父类的属性和方法,同时也可以在父类的基础上拓展自己的属性和方法。

super

super是在子类中使用的关键字,它可以作为对象方法使用。

super.png

二、类应该短小

类不应该拥有过多的权责。

我们应该能用大概25个单词来描述一个类,且不用if、and、or、but等词汇。

2.1 单一权责原则

每个达到一定规模的系统都包括大量逻辑和复杂性。问题是:你是想把工具归置到有许多抽屉,且每个抽屉中装有定义和标记良好的组件工具箱中,还是想要放到少数几个能随便把所有东西扔进去的抽屉中。

2.2 内聚

如果一个类中的每个变量都被每个方法所使用,则该类具有最大的内聚性。当然这是个极限情况。内聚性高,意味着类中的方法和变量互相依赖、互相结合成一个逻辑整体。

2.3 拆分成短小的类

冗长的类的极限情况就好比,前端编译过后的代码,完全没有可读性。

而拆分过后的类,将比原有代码更长,但比原来拥有更强的可读性,那是因为:

  1. 重构后的程序采用了更长、更有描述性的变量名
  2. 重构后的程序将函数和类声明当做是给代码添加注释的一种手段
  3. 我们采用了空格和格式技巧让程序更可读。

三、开闭原则

只要是面向对象编程,在开发时都会强调开闭原则。开闭原则是最基础的设计原则,其它的五个设计原则都是开闭原则的具体形态。简单来说就是:对扩展开放,对修改关闭。

详细描述可以参考这篇文章:六大设计原则之开闭原则

四、总结

复杂系统的构筑离不开抽象的概念,抽象概念的体现又与面向对象的编程思想密切相关,那么类就是一个个抽象对象的具体形态。所以设计得完善的类,能让整个系统有序清晰。

本文参考《代码整洁之道》(Robert C. Martin著,韩磊译)。

浙江大华技术股份有限公司-软研-智慧城市产品研发部招聘高级前端,欢迎来撩,有意向可发送简历到chen_zhen@dahuatech.com,长期有效

上一篇:九、单元测试

下一篇:十一、系统

分类:
前端
标签:
分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改