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)
随时随地看视频
