搭建开发环境

初始化npm环境，npm init

第一，下载安装 nodejs ，完成后运行node -v和npm -v测试。第二，找到一个目录，运行npm init初始化（一路回车，然后会生成package.json文件），然后目录下创建src文件夹。第三，创建src/index.js，写一句 JS 代码，等待使用

安装 webpack

先安装 webpack 相关插件

npm install webpack webpack-cli --save-dev

然后在根目录创建webpack.dev.config.js，内容如下

module.exports = {
    entry: './src/index.js',
    output: {
        path: __dirname,
        filename: './release/bundle.js'  // release 会自动创建
    }
}

修改package.json的scripts

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

然后控制台运行npm run dev，可以看到生成了release/bundle.js

启动服务

安装插件npm install webpack-dev-server html-webpack-plugin --save-dev ，然后根目录创建index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <p>前端设计模式</p>
</body>
</html>

修改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   // 端口
    }
}

再次修改package.json的scripts

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

然后再运行npm run dev，可以看到浏览器自动打开。并且，你修改src/index.js的源码，浏览器会自动刷新。

babel 解析 ES6

安装插件

npm install babel-core babel-loader babel-polyfill babel-preset-es2015 babel-preset-latest --save-dev

创建.babelrc文件，内容如

{
    "presets": ["es2015", "latest"],
    "plugins": []
}

修改webpack.dev.config.js文件内容，增加module

module: {
    rules: [{
        test: /\.js?$/,
        exclude: /(node_modules)/,
        loader: 'babel-loader'
    }]
}

然后修改src/index.js，写点 ES6 的语法，：

class Person {
    constructor(name) {
        this.name = name
    }
    getName() {
        return this.name
    }
}

let p = new Person('双越老师')
console.log(p.getName())

如然后运行npm run dev，即可看到效果。

结束。

代码如下

//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"
  }
}

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

//.babelrc
{
    "presets": ["es2015", "latest"],
    "plugins": ["transform-decorators-legacy"]
}

什么是面向对象

面向对象，Object Oritented（简称 OO）是一种目前主流的编程思想，也是学习设计模式的前提，因为设计模式就是基于面向对象思想的。

概念

首先要有一个模板，然后通过模板可创建若干个实例，实例有属性和方法。看演示：

// 类，即模板
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()

三要素

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

继承

子类继承父类的一些东西，子类的公共内容抽象到父类中，避免代码的冗余

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

上述代码中，

People是父类，是一种公共的抽离，不仅仅服务于Student
继承的意义就在于将底层的、公共的属性抽离出来，单独存放，提高复用，极少冗余

封装

封装特性涉及到几个关键字，用于规定属性或者方法的开放程度

public 开放性访问
protected 只有继承的子类可访问
private 只有自身可访问

这是 java 中最基本的知识，不过在 ES6 中不支持，而在 typescript 是支持的。以下代码可在 www.typescriptlang.org/play/ 在线测试

// ts 代码，放在在线解析器中解析为 es5
class People {
    name
    age
    protected weight  // 定义 protected 属性
    constructor(name, age) {
        this.name = name
        this.age = age
        this.weight = 120
    }
    eat() {
        alert(`${this.name} eat something`)
    }
    speak() {
        alert(`My name is ${this.name}, age ${this.age}`)
    }
}

class Student extends People {
    number
    private girlfriend  // 定义 private 属性
    constructor(name, age, number) {
        super(name, age)
        this.number = number
        this.girlfriend = 'xiaoli'
    }
    study() {
        alert(`${this.name} study`)
    }
    getWeight() { 
        alert(`${this.weight}`)
    }
}

let xiaoming = new Student('xiaoming', 10, 'A1')
xiaoming.getWeight()
// console.log(xiaoming.girlfriend) // 注意，编译时会报错，直接会编译不通过！！！

减少耦合，不该外露的不外露
利于数据、接口的权限管理

ES6 中不支持怎么办？一般有一个不成为的约定，即以_开头的属性或者方法，都是私有的，其他的都是开放的，这样即可按照约定分开public和private。另外，如果 ES6 要实现绝对的“私有”，就得用闭包了，但是闭包不会自动清理内存的，这一点就不如private专业了。再继续思考一下，如果非要做成这种强制性的 private 效果，该怎么办？

用闭包，但问题是：
- 理解复杂，学习成本高，不够简单
- 不符合面向对象思想，因为闭包的数据不是对象的某个属性
- 无法清理内存

多态

同一个接口，不同表现（定义了一个接口，在子类中实现不同功能） JS应用极少需要结合java等语言的接口、重写、重载等功能

多态即执行同样的方法，不同对象会有不同表现。前端用的比较少，因为这个特性一般要结合接口、重载、重写等 java 的特性去使用。举个例子说明：

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

用 js 只能简单演示，但是无法 100% 体现这种特性，用 java 的接口是最好的体现方式（如下两点）。但是 js 无法体现，也就说明平时用不到，也就不详细追究了。

类必须实现接口的方法
可以定义接口类型的变量，面向接口编程

多态的好处：保持子类的开放性和灵活性，面向接口编程。

应用场景

jQuery是一个class $('p')是jQuery的一个实例

jQuery 是面向对象的典型代表，执行$('p')其实就是创建了一个实例，可以模拟一下 jQuery 的源码。

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)

另外，React 和 vue 中用到的组件，也是面向对象的实例。面向对象无处不在，当你需要设计、开发一个功能的时候，一定要考虑面向对象。

为何要用面向对象

程序执行：顺序、判断、循环 --- 结构化
面向对象 --- 数据结构化
对于计算机，结构化的才是最简单的
编程应该简单&抽象（抽象完以后才能简单，简单的前提是抽象好）

经过半个多世纪发展，现在程序执行上抽象出了三种执行方式 —— 顺序、判断、循环 ，你不要以为这是理所当然本来就有的，它是经过长久摸索才出来的。例如之前还有 goto 语句，后来因为过于繁琐复杂，渐渐不再支持了。

列举这个例子的用意是为了说明，编程应该变得简单、有规律、结构化，而不是复杂、无章可循。程序中的数据也一样，也应该是结构化的、有规律的，因此就有了面向对象。这句话如果你现在看不明白，不着急，后面的课程根据实例慢慢消化。

数据结构化的重要性：如 babel 解析 JS ，vue 解析模板，所以的编译行为，都需要将字符串转化为 AST（抽象语法树，结构化数据），再执行接下来操作。

无论你理解与否，都要记住“编程应该简单 & 抽象”，这两个词看似矛盾，却目的一样。无论是面向对象还是设计模式，都是为了这个目的。

最后引用刘慈欣《球状闪电》中的一句话 —— 早期的人们之所以没有实现计算机，不是因为他们想的不够复杂，而是因为想的不够简单，其实就 0 1 两个数而已。

其他

关于 typescript 的补充：

强类型语言，类型判断
属性判断，JS 中是大坑
vue 源码用了 flow 做类型判断
做大型项目，多人协作，需要严格的标准规定，推荐使用 ts ；做小型临时性项目，不推荐

UML类图

介绍

UML - Unified Modeling Language - 统一建模语言，软件工程（不仅是编程）中的任何设计都可以用它来表述，包含：

Unified Modeling Language - 统一建模语言类图，UML包含很多种图，和本课相关的是类图关系，主要泛化和关联演示，代码和类图结合

用例图
类图
对象图
顺序图
协作图
状态图
活动图
组件图
配置图

描述面向对象，重点介绍类图。画图工具：

www.processon.com/
office visio

类图

在这里插入图片描述根据上一节的 demo 画图演示

几种关系

泛化表示继承
实现
关联表示引用
聚合
组合
依赖

（画图演示）

demo

将之前的一个示例代码换成 UML 类图

class People {
    constructor(name,house) {
        this.name = name
        this.house = house
    }
    saySomething() {

    }
}
class A extends People {
    constructor(name,house) {
        super(name,house)
    }
    saySomething() {
        alert('I am A')
    }
}
class B extends People {
    constructor(name,house) {
        super(name,house)
    }
    saySomething() {
        alert('I am B')
    }
}
class House {
    constructor(city) {
        this.city = city
    }
    showCity() {
        alert(`house in ${this.city}`)
    }
}
//测试
let aHouse = new House('北京')
let a = new A('aaa',aHouse)
console.log(a) //a 有房子
let b = new B('bbb')
console.log(b) //b 无房子

在这里插入图片描述

UML 图的学习刚刚开始，以后每讲到一个重要的设计模式，都会画它的 UML 图，并写代码。

总结

类图，属性、方法关系，泛化、关联示例演示后面学习设计模式，会继续画UML类图

总结

搭建开发环境：npm init、webpack、babel 面向对象：概念、三要素、应用举例、意义、是设计模式的基础 UML类图：类图、关系、示例

工作中，每次新项目或者新功能开发之前，都建议先画好 UML 图，和同事一起确认评审。

（二）面向对象