javascript设计模式之入门

webpack环境

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
    entry: './src/index.js',
    output: {
 path: __dirname,
 filename: './release/bundle.js'  // release 会自动创建
    },
    plugins: [
 new HtmlWebpackPlugin({
     template: './index.html'  // bundle.js 会自动注入
 })
    ],
    devServer: {
 contentbase: path.join(__dirname, "./release"),  // 根目录
 open: true,  // 自动打开浏览器
 port: 9000,   // 端口
 proxy: {
     '/api/*': {
  target: 'http://localhost:8880'
     }
 }
    },
    module: {
 rules: [{
     test: /.js?$/,
     exclude: /(node_modules)/,
     loader: 'babel-loader'
 }]
    }
}

面向对象

类
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()

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

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)
}

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()

设计模式
《UNIX/LINUX设计哲学》
准则1：小即是美

准则2：让每个程序只做好一件事

准则3：快速建立原型

准则4：舍弃高效率而取可移植性

准则5：采用纯文本来存储数据

准则6：充分利用软件的杠杆效应（软件复用）

准则7：使用shell 脚本来提高杠杆效应和可移植性

准则8：避免强制性的用户界面

准则9：让每个程序都称为过滤器

小准则：允许用户定制环境

小准则：尽量使操作系统内核小而轻量化

小准则：使用小写字母并尽量简短

小准则：沉默是金

小准则：各部分之和大于整体

小准则：寻求90%的解决方案

五大设计原则 SOLID
S-单一职责原则（Single Responsibility Principle）
一个程序只做好一件事

如果功能过于复杂就拆分开，每个部分保持独立

O-开放封闭原则（Open Close Principle）
扩展开放，修改封闭

增加需求时，扩展新代码，而非修改已有代码

L-李氏置换原则（Liskov Substitution Principle）
子类能覆盖父类

所有父类出现的地方子类都能出现

JS中使用较少（弱类型&继承使用较少）

I-接口独立原则（Interface Segregation Principle）
保持接口的单一独立，避免现“胖接口

JS中没有接口（typescript例外），使用较少

类似于单一职责原则，这里更关注接口

D-依赖倒置原则（Dependence Inversion Principle）
面向接口编程，依赖于抽象，依赖于接口，不依赖具体实现

使用方只关注接口而不关注具体类的实现

JS中使用较少（没有接口&弱类型）

迪米特法则（Demeter Principle）
迪米特法则也叫最少知识原则,含义是一个对象应该对其他对象有最少的了解,这个应该很好理解,就是降低各模块之间的耦合

23种设计模式
创建型
工厂模式（工厂方法模式，抽象工厂模式，建造者模式）

单例模式

原型模式

结构型
适配器模式

装饰器模式

代理模式

外观模式

桥接模式

组合模式

享元模式

行为型
策略模式

迭代器模式

模板方法模式

职责连模式

观察者模式

命令模式

备忘录模式

中介者模式

状态模式

解释器模式

访问者模式

面试题

打车时，可以打专车或者快车。任何车都有车牌号和名称。
不同车价格不同，快车每公里1元，专车每公里2元。
行程开始时，显示车辆信息
行程结束时，显示打车金额（假定行程就5公里）
- 画出UML类图
- 用ES6语法写出该示例

某停车场，分3层，每层100车位
每个车位都能监控到车辆的驶入和离开
车辆进入前，显示每层的空余车位数量
车辆进入时，摄像头可识别车牌号和时间
车辆出来时，出口显示器显示车牌号和停车时长

// 车
class Car {
    constructor(num) {
 this.num = num
    }
}

// 入口摄像头
class Camera {
    shot(car) {
 return {
     num: car.num,
     inTime: Date.now()
 }
    }
}

// 出口显示器
class Screen {
    show(car, inTime) {
 console.log('车牌号', car.num)
 console.log('停车时间', Date.now() - inTime)
    }
}

// 停车场
class Park {
    constructor(floors) {
 this.floors = floors || []
 this.camera = new Camera()
 this.screen = new Screen()
 this.carList = {}
    }
    in(car) {
 // 获取摄像头的信息：号码 时间
 const info = this.camera.shot(car)
 // 停到某个车位
 const i = parseInt(Math.random() * 100 % 100)
 const place = this.floors[0].places[i]
 place.in()
 info.place = place
 // 记录信息
 this.carList[car.num] = info
    }
    out(car) {
 // 获取信息
 const info = this.carList[car.num]
 const place = info.place
 place.out()

 // 显示时间
 this.screen.show(car, info.inTime)

 // 删除信息存储
 delete this.carList[car.num]
    }
    emptyNum() {
 return this.floors.map(floor => {
     return `${floor.index} 层还有 ${floor.emptyPlaceNum()} 个车位`
 }).join('n')
    }
}

// 层
class Floor {
    constructor(index, places) {
 this.index = index
 this.places = places || []
    }
    emptyPlaceNum() {
 let num = 0
 this.places.forEach(p => {
     if (p.empty) {
  num = num + 1
     }
 })
 return num
    }
}

// 车位
class Place {
    constructor() {
 this.empty = true
    }
    in() {
 this.empty = false
    }
    out() {
 this.empty = true
    }
}

// 测试代码------------------------------
// 初始化停车场
const floors = []
for (let i = 0; i < 3; i++) {
    const places = []
    for (let j = 0; j < 100; j++) {
 places[j] = new Place()
    }
    floors[i] = new Floor(i + 1, places)
}
const park = new Park(floors)

// 初始化车辆
const car1 = new Car('A1')
const car2 = new Car('A2')
const car3 = new Car('A3')

console.log('第一辆车进入')
console.log(park.emptyNum())
park.in(car1)
console.log('第二辆车进入')
console.log(park.emptyNum())
park.in(car2)
console.log('第一辆车离开')
park.out(car1)
console.log('第二辆车离开')
park.out(car2)

console.log('第三辆车进入')
console.log(park.emptyNum())
park.in(car3)
console.log('第三辆车离开')
park.out(car3)

javascript设计模式之入门

JavaScript相关栏目本月热门文章