写在前面
针对JS的设计模式讲解文集终于来了，提到设计模式，大家一定是陌生而又熟悉，陌生是因为你不会，熟悉是因为你常听，或者面试的时候被问到过，一提到“手写一个发布订阅模式”就头疼，你看到“这是一个工厂模式”就犯困，是的，如果你从事前端行业多于3年，设计模式会经常出现在你身边，如果你想跨越到高级工程师的行列，那么设计模式你不得不会，你不能再提到设计模式就头疼，而你常见的一些资料又多是一些针对java后端的设计模式，前端看了也看不太懂，光看概念不实践又容易忘，本文集教程，将针对javaScript结合我在学习中的经验总结，对设计模式做一个尽可能详细的讲解，让前端也能轻松学习设计模式，当然了，本文不是针对小白的，需要你有一定的编程基础，你至少需要具备下面的知识，如果不会，可以看我之前的一系列文章，或者自己去学习一下
- ES6编程基础
- node 和 npm 搭建基础
- webpack基本知识
想要学习设计模式，面向对象是第一步，那么我们先针对面向对象开始走入设计模式的世界吧！
面向对象
为了能结合一些概念去实践，我们需要搭建一个可以运行ES6的环境，然后去实践一下面向对象的编程
环境搭建
因为我们是基于ES6去讲的，我们需要搭建一个webpack的打包环境
npm初始化:
npm init -y
安装Webapck
yarn add webpack webpack-cli -D
安装webpack-dev-server html-webpack-plugin
yarn add webpack-dev-server html-webpack-plugin
安装babel兼容ES6
yarn add babel-loader @babel/preset-env @babel-core babel-polyfill -D
文件目录如下
|--src
|--index.js
|--webpack.config.js
|--.babelrc
webpack.config.js
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
mode: 'development',
entry: './src/index.js',
devServer: {
contentBase: './release',
open: true,
port: 9999
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader',
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: './index.html'
})
],
output: {
path: path.resolve(__dirname, 'release'),
filename: 'bundle.js'
}
}
.babelrc
{
"presets": [
[
"@babel/preset-env", {
"targets": {
"edge": "17",
"firefox": "60",
"chrome": "67",
"safari": "11.1",
"ie": "10"
},
"corejs": "2",
"useBuiltIns": "usage"
}
]
]
}
上面我们简单搭建了一个webpack打包环境，如果对webpack打包环境搭建有问题的，可以看我前面的文集,搭建完成后，大家可以通过在index.js中加入一些ES6的语法，然后启动项目看看是否能正常打包。
什么是面向对象
现在有些前端同学，平时工作中都是在使用一些框架或者写一些js业务，对于面向对象的概念可能没有太多的了解，这里我们尽可能简单的讲解一下面向对象的概念，让大家对面向对象有一个初步的了解
面向对象实际上就两个概念，一个是类，一个是实例
- 类，相当于一个模板，我们可以通过这几个模板实例化很多对象，就像这边这样，我们可以创建一个类，他就像模板一样，通过new实例化来得到结构一致的对象
class Person {
constructor (name) {
this.name = name
}
getName() {
console.log(this.name)
}
}
const p1 = new Person('lee')
const p2 = new Person('zhang')
这一点，就像是ES5的构造函数一样。
- 对象，对象就是我们通过new一个类，得到的实例，就像下面这样
const p1 = new Person('lee')
const p2 = new Person('zhang')
大家可以在我们搭建的环境中，写一下上面的代码感受一下。
class Person {
constructor (name) {
this.name = name
}
getName() {
console.log(this.name)
}
}
const p1 = new Person('lee')
const p2 = new Person('zhang')
console.log(p1)
console.log(p2)
看到下面这样的结果
这节的知识比较基础，关注一下吧，后面我们将由此对设计模式展开深入的讲解
网友评论