javascript设计模式学习之路

2019-07-13 admin

概念

,具有相同或相似属性或方法的对象的抽象就是类。例如:人都有姓名、年龄,都会吃饭、说话,其中姓名、年龄就是人这个类的属性,吃饭、说话就是人这个类的方法。 对象,类的具体实现就是对象。例如,小明这个人就可以认为是人这个类的具体实现。

clipboard.png

// 类
class Person {
  constructor(name, age) {
    this.name = name // 属性 姓名
    this.age = age // 属性 年龄
  }
  // 方法 吃饭
  eat() {
    alert(`${this.name} eat something.`)
  }
  // 方法 说话
  speak() {
    alert(`My name is ${this.name}, my age is ${this.age}.`)
  }
}

// 对象 Person的具体实现
const xiaoming = new Person('xiaoming', 10)
xiaoming.eat()
xiaoming.speak()

三要素

继承,子类可以继承父类的属性和方法。例如,学生是人类的一种,具有人类的所有特性,也可以有自己的特性,可以认为学生继承了人这个父类。

clipboard.png

class Person {
  constructor(name, age) {
    this.name = name
    this.age = age
  }
  eat() {
    alert(`${this.name} eat something.`)
  }
  speak() {
    alert(`My name is ${this.name}, my age is ${this.age}.`)
  }
}

// Student 继承了 Person,具有 Person 的所有属性,并且有自己的特有属性
class Student extends Person {
  constructor(name, age, no) {
    super(name, age)
    this.no = no // 学生可以有学号属性
  }
  // 学生可以学习
  study() {
    alert(`${this.name} study something.`)
  }
}

const xiaoming = new Student('xiaoming', 10, '10010')
xiaoming.study()

封装,类的属性具有访问权限。说到封装不得不说public、protected、private三个关键字,其中public关键字修饰的属性表示公有的属性,可以随便访问,protected关键字修饰的属性表示子类内部可以访问,private关键字修饰的属性只能在类内部访问,外部无法访问(图中+表示共有属性、#表示子类可以访问、-表示私有属性,由于 javascript 不支持这三种修饰符,所以此处用 typescript 演示,了解即可)。

clipboard.png

class Person {
  public name // 公有属性,可以随便访问
  public age
  protected weight // 子类内部可以访问,外部无法访问
  constructor(name, age) {
    this.name = name
    this.age = age
    this.weight = 120
  }
  eat() {
    console.log(`${this.name} eat something.`)
  }
  speak() {
    console.log(`My name is ${this.name}, age is ${this.age}.`)
  }
}

class Student extends Person {
  private grilfriend // 私有属性,只有在 Student 类内部才可以访问
  constructor(name, age) {
    super(name, age)
    this.grilfriend = 'xiaoli'
  }
  study() {
    alert(`${this.name} study.`)
  }
  getWeight() {
    alert(`weight ${this.weight}.`) // protected 修饰的属性子类内部可以访问
  }
}

let xiaoming = new Student('xiaoming', 10)
xiaoming.getWeight()
alert(xiaoming.name)
// alert(xiaoming.weight) // 报错
// alert(xiaoming.grilfriend) // 报错

多态,子类既可以继承父类的属性和方法,也可以有自己的特性。学生是人类的一种,除了具有人类的所有特性之外,还可以有自己独特的特性,例如学生可以进行学习这个动作。

clipboard.png

class Person {
  constructor(name) {
    this.name = name
  }
  saySomething() {}
}

class A extends Person {
  constructor(name) {
    super(name)
  }
  saySomething() {
    alert('This is A.')
  }
}

class B extends Person {
  constructor(name) {
    super(name)
  }
  saySomething() {
    alert('This is B.')
  }
}

五大设计原则

单一职责原则,应该有且只有一个引起变更的原因,一个程序只做一件事情,如果功能过于复杂,就要拆开,每部分保持独立。 开放封闭原则,一个软件的实体,比如模块、类、对象应该对扩展开放,对修改封闭,增加新需求时要增加代码而不是修改代码。 里氏置换原则现的地方,子类就可以出现,且替换成子类也不会产生任何错误或者异常。 接口独立原则接口,不要建立臃肿庞大的接口。即接口尽量细化,同时接口中的方法尽量少。 依赖倒置原则,面向接口编程,模块间的依赖关系通过接口和抽象类产生,实体类之间不直接发生依赖关系。 最少知识原则统提供一个简单的入口,访问者或者客户不用了解系统内部的实现细节,只要懂得如何调用就好。

工厂模式

定义一个创建对象的工厂,将创建者和构造函数分离,创建者不用关心具体构造函数的实现,符合开放封闭原则和最少知识原则。

clipboard.png

class Product {
  constructor(name) {
    this.name = name
  }
  init() {
    console.log('init.')
  }
  fn() {
    console.log('fn.')
  }
}

class Creator {
  create(name) {
    return new Product(name)
  }
}

const creator = new Creator()
const obj = creator.create('obj')
obj.init()
obj.fn()

单例模式

系统中被唯一使用,一个类只有一个示例,例如:

clipboard.png

class SingleObject {
  constructor() {}
  init() {
    console.log('init...')
  }
}

SingleObject.getInstance = (function() {
  let instance = null
  return function() {
    if (!instance) {
      instance = new SingleObject()
    }
    return instance
  }
})()

const obj1 = SingleObject.getInstance()
obj1.init()
const obj2 = SingleObject.getInstance()
obj2.init()
console.log(obj1 === obj2)

[转载]原文链接:https://segmentfault.com/a/1190000019747785

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-69587.html

文章标题:javascript设计模式学习之路

相关文章
JavaScript常用特效chm下载
下载地址:JavaScript常用特效chm下载 对了,如果打开空白,在手册上右键属性解除锁定即可。 ...
2015-11-12
JavaScript教程:JS中的原型
Keith Peters 几年前发表的一篇博文,关于学习没有“new”的世界,其中解释了使用原型继承代替构造函数。两者都是纯粹的原型编码。 标准方法(The Standard Way) 一直以来,我们学习的在 JavaScript 里创建对...
2015-11-12
javascript是什么意思
avaScript是Netscape开发的一个对象脚本语言,它使用在世界各地数以百万计的网页和服务器应用程序上。 网景的JavaScript是ecma - 262版的标准脚本语言,和公布的标准只有轻微的差异。 与广为流行的错误理解相反,Ja...
2015-11-12
21天学通javascript
简介: 本书是Javascript入门教程。Javascript是Web开发中应用最早、发展最成熟、用户最多的脚本语言。其语法简洁,代码可读性在众多脚本语言中最好,它在使用时不用考虑数据类型,是真正意义上的动态语言。本书总分为四篇,共21章...
2015-11-16
Node.js学习(1)----HTTP服务器与客户端
Node.js 标准库提供了 http 模块,其中封装了一个高效的 HTTP 服务器和一个简易的HTTP 客户端。http.Server 是一个基于事件的 HTTP 服务器,它的核心由 Node.js 下层 C++部分实现,而接口由 Jav...
2015-11-12
JavaScript的组成
一个完整的JavaScript由3个部分组成:核心(ECMAScript) 文档对象模型(DOM) 浏览器对象模型(BOM) ECMAScript 描述了该语言的语法和基本对象 ; DOM 描述了处理网页内容的方法和接口 ; BOM 描...
2015-11-12
javaScript+turn.js实现图书翻页效果实例代码
为了实现图书翻页的效果我们在网上可以看到很多教程 在这里推荐turn.js 网上的turn.js 有api 不过是英文的  很多人看起来不方便 .关于代码也是奇形怪状在这里我将详细讲解如何使用turn.js实现翻页效果 ,本篇文章只是讲解 ...
2017-03-16
JavaScript 事件流、事件处理程序及事件对象总结
JS与HTML之间的交互通过事件实现。事件就是文档或浏览器窗口中发生的一些特定的交互瞬间。可以使用监听器(或处理程序)来预定事件,以便事件发生时执行相应的代码。这种在传统软件工程中被称为观察员模式,支持页面的行为与页面的外观之间的松散耦合。...
2017-04-05
JavaScript变量的声明
声明变量 变量在脚本中的首次亮相是在其声明中。 在变量首次出现时将会在内存中设置它,因此您稍后可在脚本中引用它。 应在使用变量之前先声明变量。 可以使用 var 关键字实现此目的。 <span id=“mt9” class=“sent...
2015-11-12
jQuery中DOM树操作之使用反向插入方法实例分析
本文实例讲述了jQuery中DOM树操作之使用反向插入方法。分享给大家供大家参考。具体分析如下: 使用反向插入方法 这里我们先把创建的内容插人到元素前面,然后再把同一个元素插人到文档 中的另一个位置。通常,当在jQuery中操作元素时,利用...
2015-11-13
回到顶部