javascript 绘制uml_Javascript 设计模式之面向对象与 UML 类图

为什么要写 Javascript 设计模式小书

关于 Javascript 设计模式的文章与书有很多很多，我写这小书主要记录我的学习过程中的笔记和心得，便于自己查看，当然也想分享给走在前端路上的小伙伴(如果能帮到你一二，那也是极好的)。

小书中的每篇的篇幅都不是很长(单篇知识肯定没讲透)，只是尽所能使其简单和让自己整明白各个模式是怎么一回事(如果也有让你整明白，那就更好了)。来吧，

为什么要学设计(模式)

3 年工作经验，面试必考;

成为项目技术负责人，设计能力是必要基础;

从写好代码，到做好设计，设计模式是必经之路;

现实问题

网站资料针对 java 等后端语言比较多;

看懂概念，不知道怎么用，看完就忘;

现在的js框架(react、vue等)，都用了哪些设计模式;

搭建开发环境

准备工作

# 项目初始化

npm init -y

# 新建开发目录src

mkdir src

# 安装webpack

npm install webpack-cli webpack --save-dev

# 安装babel

npm install babel-loader babel-core babel-preset-env html-webpack-plugin babel-plugin-transform-decorators-legacy -D

# 安装开发服务环境

npm install webpack-dev-server -D

# 新建配置webpack

touch webpack.dev.config.js

复制代码

编写 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: 3000, // 端口

historyApiFallback: true

},

module: {

rules: [

{

test: /\.js?$/,

exclude: /(node_modules)/,

loader: 'babel-loader'

}

]

}

}

复制代码

编辑 package.json，在 script 添加 dev 任务

{