可参考:https://www.kancloud.cn/qeating/javascript-design/1555175
第1章 课程介绍
1、导学
设计模式:前端开发、客户端开发、后端开发=》高级工程师
如何成为一名合格工程师?懂代码,不懂设计?
一名合格工程师必备的条件:前端开发有一定的设计能力
论工程师的设计能力
- 3年工作经验,面试必考设计能力
- 成为项目技术负责人,设计能力是必要基础
- 从写好代码,到做好设计,设计模式是必经之路
前端学习设计模式的困惑
- 网上的资料都是针对Java等后端语言的
- 看懂概念,但是不知道怎么用,看完就忘
- 现在的JS框架,到底都用了哪些设计模式
课程概述
- 做什么?-讲解JS设计模式
- 哪些部分?-面向对象,设计原则,设计模式
- 技术?-面向对象,UML类图,ES6
知识点介绍
- 面向对象
- ES6 class语法
- 三要素
- UML类图
设计原则
- 何为设计?
- 5大设计原则
- 从设计到模式
设计模式
- 分优先级讲解
- 结合核心技术
- 结合框架应用
综合示例
- 设计方案
- 代码演示
- 设计模式对应
课程安排
- 面向对象
- 使用webpack和babel搭建ES6编译环境
- ES6 class面向对象的语法
- 面向对象三要素:继承 封装 多态
设计原则
- 通过《LINUX/UNIX设计哲学》理解何为设计
- 5大设计原则分析和理解,以及代码演示
- "设计模式"-->从"设计"到"模式"
设计模式
- 概述:创建型、结构型、行为型
- 常用设计模式,详细讲解,结合经典使用场景
- 非常用设计模式,理解概念,示例演示
- 有主有次,掌握重点
综合示例
- 用jQuery实现一个简单的购物车
- 设计分析,画UML类图
- 代码演示
- 总结使用的7种设计模式
讲授方式
- 先基础后实践,先"设计"后"模式"
- 重点、常用的设计模式,配合经典使用场景
- 综合示例,演示设计模式如何使用
- 用JS的方式讲解面向对象和设计模式
课程收获
- 面向对象思想,UML类图
- 5大设计原则,23中设计模式
- 能应对前端面试中相关的面试题
- 提升个人设计能力
学习前提
- 了解面向对象,能熟练使用jQuery或类似工具库
- 有ES6语法基础,用过nodejs和npm环境
- 了解vue和React(至少看过文档,做过demo)
重点提示
- 本章讲解设计模式,不是实战项目也不是源码分析
- 23中设计模式不是都常用,分清主次
- 设计模式在JS和Java中的讲解方式有区别
- 不适合刚入门编程的同学,参考上文的学习前提
第2章 面向对象
- 面向对象
- 搭建开发环境
- 什么是面向对象
- UML类图
- 总结
1、搭建开发环境
- 初始化npm环境
- 安装webpack
- 安装webpack-dev-server
- 安装babel
node -v #v6.2.2+
npm -v #3.9.5
# 在文件夹mypro下初始化项目
npm init #一路回车/yes
mkdir src
touch src/index.js
vim index.js
alert(100);
# 安装依赖
# https://npm.taobao.org/
npm install webpack webpack-cli --save-dev --registry=https://registry.npm.taobao.org
# 在mypro下
touch webpack.dev.config.js
module.exports = {
entry: './src/index.js',
output: {
path: __dirname,
filename: './release/bundle.js'
}
}
# package.json下 scripts里新增
"dev": "webpack --config ./webpack.dev.config.js --mode development"
# 运行
npm run dev
npm install webpack webpack-dev-server html-webpack-plugin --save-dev --registry=https://registry.npm.taobao.org
# 在mypro下
touch 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'
},
plugins: [
new HtmlWebpackPlugin({
template: './index.html'
})
],
devServer: {
contentBase: path.join(__dirname,'./release'), // 根目录
open: true, // 自动打开浏览器
port: 9000
}
}
npm run dev
若出现Error: Cannot find module 'webpack-cli/bin/config-yargs'
可降低webpack-cli的版本为 "^3.3.12":npm i webpack-cli@3.3.12 -D
npm install babel-core babel-loader babel-polyfill babel-preset-es2015 babel-preset-latest --save-dev --registry=https://registry.npm.taobao.org
# 在mypro下
touch .babelrc
{
"presets":["es2015","latest"],
"plugins":[]
}
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',
},
module:{
rules:[{
test: /\.js?$/,
exclude: /(node_modules)/,
loader:'babel-loader'
}]
},
plugins: [
new HtmlWebpackPlugin({
template: './index.html'
})
],
devServer: {
contentBase: path.join(__dirname,'./release'),
open: true,
port: 9001
}
}
# 编辑 src/index.js
class Person{
constructor(name){
this.name = name
}
getName(){
return this.name
}
}
let p = new Person('xiaoming')
alert(p.getName());
若出现
ERROR in ./src/index.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
Error: Plugin/Preset files are not allowed to export objects, only functions.
回退低版本:
npm install -D babel-loader@7 babel-core babel-preset-env
2、什么是面向对象
- 概念
- 三要素:继承 封装 多态
- JS的应用举例
- 面向对象的意义
概念-类
// 类,即模板
# 编辑 src/index.js
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', 20)
wang.eat()
wang.speak()
三要素
- 继承,子类继承父类
- 封装,数据的权限和保密
- 多态,同一接口不同实现
三要素-继承
- People是父类,公共的,不仅仅服务于Student
- 继承可将公共方法抽离出来,提高复用,减少冗余
// 父类
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)
xiaoming.eat()
let xiaohong = new Student('xiaohong', 10, 'A2')
xiaohong.study()
xiaohong.speak()
PS:《React技术栈仿大众点评WebApp》
三要素-封装
- public 完全开放
- protected 对子类开放
- private 对自己开放
- (ES6尚不支持,可以用typescript来演示):http://www.typescriptlang.org/play/
三要素-封装-总结
- 减少耦合,不该外露的不外露
- 利于数据、接口的权限管理
- ES6目前不支持,一般认为_开头的属性是private
// 父类
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) // 注意,编译时会报错,直接会编译不通过!!!
三要素-多态
- 同一个接口,不同 表现
- JS应用极少
- 需要结合java等语言的接口、重写、重载等功能
三要素-多态-总结
- 保持子类的开发性和灵活性
- 面向接口编程
- (JS引用极少,了解即可)
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()
3、JS应用举例
- jQuery是一个class
- $('p')是jQuery的一个实例
# src/index.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(node) {
}
// 此处省略若干API
}
window.$ = function(selector){
return new jQuery(selector)
}
var $p = $('p')
console.log($p)
console.log($p.addClass)
# index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>前端设计模式</title>
</head>
<body>
<p>前端设计模式</p>
<p>前端设计模式</p>
<p>前端设计模式</p>
</body>
</html>
《松本行弘的程序世界》
为何使用面向对象?
- 程序执行:顺序、判断、循环--结构化
- 面向对象--数据结构化
- 对于计算机,结构化的才是最简单的
- 编程应该 简单&抽象
总结:
- 概念及Demo
- 三要素:继承 封装 多态,以及演示
- jQuery的应用示例
- 意义:数据结构化
4、UML类图
- Unified Modeling Language 统一建模语言
- 类图,UML包含很多种图,和本课相关的是类图
- 关系,主要讲解泛化和关联
- 演示,代码和类图结合
画图工具
- MS Office visio
- https://www.processon.com/:新建-类图
类图
// 类,即模板
# 编辑 src/index.js
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 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类图
面向对象-总结
- 搭建开发环境:npm init、webpack、babel
- 面向对象:概念、三要素、应用举例、意义
- UML类图:类图、关系、示例
第3章 设计原则
1、介绍
- 设计原则
- 何为设计?
- 五大设计原则
- 从设计到模式
- 介绍23种设计模式
何为设计?
- 描述
- 结合《UNIX/LINUX设计哲学》
描述
- 即按照哪一种思路或者标准来实现功能
- 功能相同,可以有不同设计方案来实现
- 伴随着需求增加,设计的作用才能体现出来
《UNIX/LINUX设计哲学》
- 准则1: 小即是美
- 准则2: 让每个程序只做好一件事
- 准则3: 快速建立原型
- 准则4: 舍弃高效率而取可移植性
- 准则5: 采用纯文本来存储数据
- 准则6: 充分利用软件的杠杆效应(软件复用)
- 准则7: 使用shell脚本来提高杠杆效应和可移植性
- 准则8: 避免强制性的用户界面
- 准则9: 让每个程序都成为过滤器
《UNIX/LINUX设计哲学》- 小准则
- 小准则:允许用户定制环境
- 小准则:尽量使操作系统内核小而轻量化
- 小准则:使用小写字母并尽量简短
- 小准则:沉默是金
- 小准则:各部分之和大于整体
- 小准则:寻求90%的解决方案
演示:沉默是金 + 让每个程序都成为过滤器
ls
ls | grep *.json
ls | grep *.json | grep 'package'
ls | grep *.json | grep 'package1' # 若是返回 no file , 命令 wc -l 就不会显示0
ls | grep *.json | grep 'package1' | wc -l
总结
- 设计的作用
- 《UNIX/LINUX设计哲学》原则
2、设计原则-5大原则
- S - 单一职责原则
- O - 开放封闭原则
- L - 李氏置换原则
- I - 接口独立原则
- D - 依赖倒置原则
S - 单一职责原则(