JS设计模式，从写好代码到做好架构设计。
设计模式：设计和模式，从设计过渡到模式，写好代码的同时，也要做好设计。
设计模式：从“设计”到“模式”，提升自己的设计和架构能力

设计模式参考资料
https://github.com/xingbofeng/JavaScript-design-patterns
设计模式.png

追求一件事最快最省时间的解决方法，也就是最佳实践
设计模式就相当于武功秘籍里面的招式，是前人总结出来的最佳实践

融会贯通、心领神会，随心所欲,遇到合适的场景使用合适的招式，才是正道

面向对象，以原型为基础，并拥有动态数据类型
函数式编程
工厂模式、单例模式、发布订阅模式

基础知识，比如 this、闭包与高阶函数等相关
面向对象风格相关的继承等

5大设计原则

项目技术负责人，设计能力是必要基础；从写好代码，到做好设计，设计模式是必经之路。

不要用概念来纸上谈兵，得真正的把代码写下来。
理解什么是设计？
5大设计原则分析和代码演示

image.png

如何理解设计模式

画 UML图写demo代码
明白每个设计的道理和用意

举例，生活中容易理解的例子，结合实际应用场景讲解该设计模式如何使用！
常用设计模式要知道实现思路，所有设计模式都要知道应用场景

自己写代码时，要多思考，刻意训练，前期尽量模仿；
提升面向对象编程和代码设计能力

学习方式

先基础在动手练习，先“设计”后“模式”
重点：常用的设计模式及使用场景

用到的技术

  • 面向对象：继承，封装，多态
  • UML类图
  • ES6：class面向对象的语法
  • 使用 webpack & babel编译ES6

1.jpg

1 webpack环境搭建

  1. npm init
  2. webpack
  3. babel

2.jpg

  1. // 初始化 package.json
  2. npm init -y
  4. // 安装 webpack
  5. npm install webpack webpack-cli webpack-dev-server html-webpack-plugin --save-dev
  6.     webpack
  7.   webpack-cli
  8.   webpack-dev-server
  9.   html-webpack-plugin
  11. // 安装 babel7
  12. npm i babel-core babel-loader@7 babel-polyfill babel-preset-es2015 babel-preset-latest --save-dev
  13.   babel-core
  14.   babel-loader
  15.   babel-polyfill
  16.   babel-preset-es2015 @babel/preset-env
  17.   babel-preset-latest
  19. // 安装 babel8.0
  20. npm install babel-loader @babel/core @babel/preset-env -D 
  22. babel-preset-env 功能类似 babel-preset-latest；
  23.     优点：它会根据目标环境选择不支持的新特性来转译
  26. // package.json script 设置 npm run dev 命令行
  27. "scripts": {
  28.   // "dev": "webpack --config ./webpack.dev.config.js --mode development"
  29.     // 安装 webpack-dev-server后的命令
  30.   "dev": "webpack-dev-server --config ./webpack.dev.config.js --mode development",
  31.   }

webpack.dev.config.js 配置

  1. const path = require('path')
  2. const htmlWebpackPlugin = require('html-webpack-plugin')
  5. module.exports = {
  6.   entry: './src/index.js', // 入口
  7.   // 出口
  8.   output: {
  9.     path: __dirname,
  10.     filename: './dist/bundle.js'
  11.     // path: path.resolve(__dirname, './dist'),
  12.     // filename: 'js[name].js'
  13.   },
  15.   // 模板插件，自动加载模板
  16.   plugins: [
  17.       new htmlWebpackPlugin({
  18.           template: './index.html'
  19.       })
  20.   ],
  22.   // 服务器
  23.   devServer: {
  24.       // 指定根目录
  25.       contentBase: path.join(__dirname, './dist'),
  26.       open: true, // 自动打开浏览器
  27.       port: 3200 // 端口
  28.   },
  30.   // 模块
  31.   module: {
  32.       rules: [
  33.           // babel解析 ES6
  34.           {
  35.               test: /\.js$/,
  36.               exclude: /(node_modules)/,
  37.               loader: 'babel-loader'
  38.           }
  39.       ]
  40.   }
  41. }

根目录 .babelrc 配置

  1. {
  2.     "presets": ["@babel/preset-env"],
  3.     "plugins": []
  4. }

2 面向对象

面向对象：数据的结构化
1.jpg
3.jpg

面向对象的特点

  • 封装
  • 继承
  • 多态

封装：

数据的权限和保密
public 完全开放
protected 对子类开放
private 对自己开放

封装的好处：

减少耦合，不该外露的不外露
利于数据，接口的权限管理
_ 约定：下划线开头的属性为私有属性 private

多态：

保持子类的开放性和灵活性
面向接口编程
同一个接口不同的实现；定义一个接口，在子类中实现不同的功能
需要结合 java等语言的接口，重写，重载等功能

继承：

子类 extends 父类
将公共方法抽离出来，提高复用，减少冗余
子类 super 会把 constructor 指向父类，继承父类

面向对象，将零散的数据结构化；
浏览器加载网页，加载的流，一堆字符串；数据结构化的意义，面向对象