前端 JS 设计模式之面向对象

快来打我* 2023-02-15 14:58 67阅读 0赞

#### 一、面向对象概念 ####

1.  面向对象分为两部分，类就是模板，对象就是实例。
2.  面向对象的简单实例，代码如下所示：

class People { 
        constructor(name, age) { 
            this.name = name
            this.age = age
        }
        eat() { 
            alert(`${ this.name} eat something`)
        }
        speak() { 
            alert(`My name is ${ this.name}, age ${ this.age}`)
        }
    }
    
    let zhang = new People('zhang', 20)
    zhang.eat()
    zhang.speak()
    
    let wang = new People('wang', 21)
    wang.eat()
    wang.speak()

#### 二、面向对象的三要素 ####

1.  面向对象的三要素，**继承、封装和多态**，如下所示：

*  继承，子类基础父类
 *  封装，数据的权限和保密
 *  多态，同一接口不同实现

1.  继承，`People` 是父类，公共的，不仅仅服务于 `Student`，继承可将公共方法抽离出来，提高复用，减少冗余。
2.  封装，`public` 是完全开放， `protected` 是对子类开放，`private` 是对自己开放，`ES6` 尚不支持。
3.  封装，减少耦合，不该露的不外露，利于数据、接口的权限管理，`ES6` 目前不支持，一般认为 \_ 开头的属性是 `private`。
4.  多态，同一个接口，不同表现，`JS` 应用极少，需要结合 `java` 等语言的接口、重写和重载等功能。
5.  多态，保持子类的开放性和灵活性，面向接口编程，`JS` 引用少，了解即可。
6.  继承的代码示例，如下所示：

//父类
    class People { 
        constructor(name, age) { 
            this.name = name
            this.age = age
        }
        eat() { 
            alert(`${ this.name} eat something`)
        }
        speak() { 
            alert(`My name is ${ this.name}, age ${ this.age}`)
        }
    }
    
    // 子类继承父类
    class Student extends People { 
        constructor(name, age, number) { 
            super(name, age)
            this.number = number
        }
        study() { 
            alert(`${ this.name} study`)
        }
    }
    
    let xiaoming = new Student('xiaoming', 10, 'A1')
    xiaoming.study()
    console.log(xiaoming.number)
    let xiaohong = new Student('xiaohong', 11, 'A2')
    xiaohong.study()

1.  封装的代码示例，如下所示：

class People { 
        constructor(name) { 
            this.name = name
        }
        saySomething() { 
    
        }
    }
    class A extends People { 
        constructor(name) { 
            super(name)
        }
        saySomething() { 
            alert('I am A')
        }
    }
    class B extends People { 
        constructor(name) { 
            super(name)
        }
        saySomething() { 
            alert('I am B')
        }
    }
    let a = new A('a')
    a.saySomething()
    let b = new B('b')
    b.saySomething()

#### 三、应用示例 ####

1.  `JS` 的应用举例，`jQuery` 是一个 `class`，`$('p')` 是 `jQuery` 的一个实例。
2.  应用的举例，代码如下所示：

class jQuery { 
        constructor(selector) { 
            let slice = Array.prototype.slice
            let dom = slice.call(document.querySelectorAll(selector))
            let len = dom ? dom.length : 0
            for (let i = 0; i < len; i++) { 
                this[i] = dom[i]
            }
            this.length = len
            this.selector = selector || ''
        }
        append(node) { 
    
        }
        addClass(name) { 
    
        }
        html(data) { 
    
        }
        // 此处省略若干 API
    }
    
    
    window.$ = function (selector) { 
        // 工厂模式
        return new jQuery(selector)
    }
    
    // 测试代码
    var $p = $('p')
    console.log($p)
    console.log($p.addClass)

#### 四、面向对象的总结 ####

1.  使用面向对象的原因，如下所示：

*  程序执行：顺序、判断、循环，结构化
 *  面向对象，数据结构化
 *  对于计算机，结构化的才是最简单的
 *  编程应该简单和抽象。

1.  `UML` 类图，如下所示：

*  `Unified Modeling`，统一建模语言
 *  类图，`UML` 包含多种图，比如类图
 *  关系，主要讲解泛化和关联
 *  演示，代码和类图的结合

1.  类与类之间的关系，泛化表示继承，关联表示引用。