Javascript 设计模式 js设计模式应用级讲解

设计能力，是成为高级前端、成为技术负责人的基础能力，为什么后端开发可以轻而易举的成为技术带头人，因为后端语言大部分是基于面向对象，而面向对象就离不开设计和设计模式

首先npm init一路回车新建webpack.dev.config.js，修改package.json文件，安装webpack-dev-server可以帮助你在代码发生变化后自动编译代码

修改package.json文件

 "scripts": {"dev": "webpack-dev-server --config ./webpack.dev.config.js --mode development"},

webpack.dev.config.js

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'}]}
}

package.json 依据上面的方式，安装以下依赖

{"name": "es6","version": "1.0.0","description": "","main": "index.js","scripts": {"dev": "webpack-dev-server --config ./webpack.dev.config.js --mode development"},"author": "","license": "ISC","devDependencies": {"babel-core": "^6.26.3","babel-loader": "^7.1.4","babel-plugin-transform-decorators-legacy": "^1.3.4","babel-polyfill": "^6.26.0","babel-preset-es2015": "^6.24.1","babel-preset-latest": "^6.24.1","html-webpack-plugin": "^3.2.0","webpack": "^4.8.3","webpack-cli": "^2.1.3","webpack-dev-server": "^3.1.4"},"dependencies": {"javascript-state-machine": "^3.0.1","jquery": "^3.3.1"}
}

面向对象三要素：封装、多态、继承，子类继承父类，封装对数据的权限和保密，多态，同一个接口不同的实现，不从事后台开发很难真正理解这几个概念。为什么要用面向对象，因为它可以让数据结构化，类其实相当于模板，通过这个类可以实例化出很多对象，下面的例子用到了继承，公用类people，只有学生student有学号但学生也有people的一些方法，其实就是提取公共部分做到代码的通用性。学会画UML类图，有个在线地址processon.com

class People {constructor(name, age) {this.name = namethis.age = age}eat() {alert(`${this.name} eat something`)}speak() {alert(`My name is ${this.name}, age ${this.age}`)}
}class Student extends People {     //继承关键字extendsconstructor(name, age, number) {super(name, age)  //super 传给父类执行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()

关于封装，public完全开发、protected对子类开放、private对自己开放，目前es6还不支持。js的高级ts支持，其实jQuery也是一个类，它的源码就是面向对象的思路

class jQuery {constructor(selector) {let slice = Array.prototype.slicelet dom = slice.call(document.querySelectorAll(selector))let len = dom ? dom.length : 0for (let i = 0; i < len; i++) {this[i] = dom[i]}this.length = lenthis.selector = selector || ''}append(node) {}addClass(name) {}html(data) {}// 此处省略若干 API
}
window.$ = function (selector) {return new jQuery(selector)
}

泛化指的就是继承，关联指的是引用，看下面的图示，A、B都有多态的行为就是它们可以灵活处理自己的事情，通过定义house与people建立关联，在people中引入

设计原则，了解五大设计原则，也就是什么是设计，设计模式从哪里来，推荐一本书UNIXLinux设计哲学，明白一个概念，设计和模式是分开的

下面是两道面试题考察设计能力

class Car {constructor(number, name) {this.number = numberthis.name = name}
}
class Kuaiche extends Car {constructor(number, name) {super(number, name)this.price = 1}
}
class Zhuanche extends Car {constructor(number, name) {super(number, name)this.price = 2}
}class Trip {constructor(car) {this.car = car}start() {console.log(`行程开始，名称: ${this.car.name}, 车牌号: ${this.car.price}`)}end() {console.log('行程结束，价格: ' + (this.car.price * 5))}
}let car = new Kuaiche(100, '桑塔纳')
let trip = new Trip(car)
trip.start()
trip.end()

// 车
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.placeplace.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 = 0this.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 设计模式 js设计模式应用级讲解相关推荐

Javascript常用的设计模式详解
Javascript常用的设计模式详解阅读目录一:理解工厂模式二:理解单体模式三:理解模块模式四:理解代理模式五:理解职责链模式六:命令模式的理解: 七:模板方法模式八:理解javas ...
js observer 添加_简单了解4种JS设计模式
阅读本文约需要5分钟大家好,我是你们的导师,我每天都会在这里给大家分享一些干货内容(当然了,周末也要允许老师休息一下哈).上次老师跟大家分享了15款有用前端开发的ST插件的知识,今天跟大家分享下4种 ...
JS设计模式之Module（模块）模式、Revealing Module（揭示模块）模式
Module(模块)模式概念 Module模式最初被定义为一种在传统软件工程中为类提供私有和共有封装的方法. 通过这种方式,能够使一个单独的对象拥有共有/私有方法和变量,从而屏蔽来自全局作用局的特殊 ...
javascript常见的设计模式
为什么80%的码农都做不了架构师?>>> <Practical Common Lisp>的作者 Peter Seibel 曾说,如果你需要一种模式,那一定是哪里出了 ...
JavaScript 中的设计模式
目录 1. 单例模式 2. 策略模式 3. 代理模式 4. 装饰者模式 5. 组合模式 6. 工厂模式 7. 访问者模式 8. 发布订阅模式 9. 观察者模式 10. 参考链接设计模式(Design ...
useRef与JS设计模式学习(一)
useRef与JS设计模式学习(一) useRef const refContainer = useRef(initialValue); 使用useRef Hook,你可以轻松的获取到dom的ref. ...
JS设计模式--组合模式
JS设计模式–组合模式昨天学习了白贺翔老师的JS组合模式,现在把我学到的分享出来叭O(∩_∩)O,直接看下面代码 <!DOCTYPE html> <html lang=" ...
js设计模式笔记小结
JS 设计模式面向对象搭建开发环境 npm / webapck / webpack-dev-server / babel babel-core babel-loader babel-polyfil ...
理解JavaScript中部分设计模式
理解JavaScript中部分设计模式什么是设计模式在软件工程中,设计模式是软件设计中常见问题可重用的方案.设计模式代表着经验丰富的软件开发人员使用的最佳实践.设计模式可以被认为是编程模板. 为什 ...

Javascript 设计模式 js设计模式应用级讲解

Javascript 设计模式 js设计模式应用级讲解相关推荐

最新文章

热门文章

Javascript 设计模式 js设计模式 应用级讲解

Javascript 设计模式 js设计模式 应用级讲解相关推荐

最新文章

热门文章

Javascript 设计模式 js设计模式应用级讲解

Javascript 设计模式 js设计模式应用级讲解相关推荐