JavaScript设计模式系统讲解与应用-笔记_javascript 设计模式系统讲解与应用课程-程序员宅基地

技术标签：前端

可参考：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 [email protected] -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 - 单一职责原则（

本文链接：https://blog.csdn.net/mysteryflower/article/details/117787376

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

图像处理——过程全解析，配图超详细！-程序员宅基地

文章浏览阅读1.4k次。点击上方“小白学视觉”，选择加"星标"或“置顶”重磅干货，第一时间送达摘自先进测控之家《长着眼睛的机械手》课题摘要——利用图像处理技术，在50*50CM的区域内识别出5枚硬币（硬币位置任意），并且控制机械手逐一拾取5枚硬币，然后把5枚硬币逐一叠放到指定位置（指定位置随机）。图像处理过程详解——LabVIEWVision Assistant硬币位置识别算法分析与设计硬币的识别是本系统软件设计最为关..._图像处理

[ MATLAB ] 傅里叶变换（三）：傅里叶变换_傅里叶变换可视化,plot3函数,matlab-程序员宅基地

文章浏览阅读774次，点赞35次，收藏25次。专题的前两篇文章（[ MATLAB ] 傅里叶变换（二）：傅里叶级数（复指数表示）），我们讨论了连续周期信号傅里叶级数的两种表示形式，初步建立了频谱的概念。然而，就实际经验而言，非周期信号才是主流。因此，这篇文章将讨论非周期连续信号的谱密度（通常简称为频谱），即大名鼎鼎的傅里叶变换FT，并用Matlab仿真加强理解。可以采用物理中的密度的方式类比谱密度的概念，从而理解傅里叶变换中谱密度的意义。不需要再执着于分量幅值的绝对大小，而是聚焦于相对大小。_傅里叶变换可视化,plot3函数,matlab

5G手机回归，鸿蒙份额激增，将进一步夯实三大操作系统的地位-程序员宅基地

文章浏览阅读360次，点赞8次，收藏8次。市调机构给出的数据指11月份华为手机在国内手机市场的份额达到14%，远超此前鸿蒙系统在国内手机操作系统8%的市场份额，这意味着随着华为5G手机的回归，鸿蒙系统的市占率将快速上涨。此前鸿蒙系统主要依靠华为手机的存量用户支持，在华为的推动下，诸多华为存量手机用户都转为了鸿蒙系统，这成为鸿蒙系统的第一批种子。随后华为在自己的穿戴设备、汽车等诸多产品上发展鸿蒙系统，还通过与美的等国内家电企业合作推广鸿蒙系...

openstack pike单机一键安装shell的方法（后期会转为python）-程序员宅基地

文章浏览阅读183次，点赞9次，收藏2次。#VM虚拟机8G内存，安装完毕，半个小时左右#在线安装#环境 centos 7.4.1708 x86_64#在线安装openstack pikePS: 排版问题，还在研究。wangleideMacBook-Pro:Downloads wanglei$ cat pike.install.sh#!/bin/sh# openstack pike 单机一键安装# 环..._ali-pike.repo

通过formData数据发送ajax请求-程序员宅基地

文章浏览阅读1.9k次。formData1.创建一个formData对象var fd = new FormData(‘form表单’);(创建formdtata对象的小括号里面，就是需要一个form表单dom对象)。2.往fd对象中添加对象fd.append(‘sex’,‘男’);3.formData里面就会有form表单中有name属性的这些标签的取值。//键值对形式console.log(fd.ge...

监控神器Prometheus，开箱即用！-程序员宅基地

文章浏览阅读244次。文章来源：【公众号：云加社区】‍目录简介整体生态工作原理Metric 指标PromQLGrafana 可视化监控告警简介Prometheus 是一个开源的完整监控解决方案，本文将从指标抓取到查询及可视化展示，以及最后的监控告警，对 Prometheus 做一个基本的认识。Prometheus 是古希腊神话里泰坦族的一名神明，名字的意思是“先见之明”，下图中是 Promet..._dtm prometheus

随便推点

自定义View实现仿朋友圈的图片查看器，缩放、双击、移动、回弹、下滑退出及动画等_imageview图片边界回弹-程序员宅基地

文章浏览阅读1.2k次。如需转载请注明出处！点击小图片转到图片查看的页面在Android开发中很常用到，抱着学习和分享的心态，在这里写下自己自定义的一个ImageView，可以实现类似微信朋友圈中查看图片的功能和效果。主要功能需求：1.缩放限制：自由缩放，有最大和最小的缩放限制 2居中显示：.若图片没充满整个ImageView，则缩放过程将图片居中 3.双击缩放：根据当前缩放的状态，双击放大两倍或缩小到原来 4.单指_imageview图片边界回弹

PreScan第二课：构建实验_prescan坐标系-程序员宅基地

文章浏览阅读5.5k次，点赞8次，收藏37次。为了自己和他人学习的需要，建了一个PreScan的QQ群：613469333（已满）/ 778225322（可加），加群前请私聊群主（QQ：2059799865）加入。群管理需要花费时间和精力，为了鼓励管理员和群成员积极互动，入群需交￥9.99的群费。目录1 Conventions坐标系统2 Roads3 Path&trajectories路径和轨迹3.1 Pat..._prescan坐标系

三分钟带你掌握 CSS3 的新属性_采用css转换,边框阴影等新特性完成css3偏光图像画廊设计-程序员宅基地

文章浏览阅读3.8w次，点赞9次，收藏10次。1. css3简介CSS 用于控制网页的样式和布局,CSS3 是最新的CSS标准,CSS3 完全向后兼容，因此您不必改变现有的设计。浏览器通常支持 CSS2,但是现在大部分浏览器也实现了css3的很多特性。CSS3 被划分为模块。其中最重要的 CSS3 模块包括：选择器框模型背景和边框文本效果2D/3D 转换动画多列布局用户界面2. css3边框2.1 边框圆角Internet Explorer 9+ 支持 border-radius 和 box-shadow 属性。Fir_采用css转换,边框阴影等新特性完成css3偏光图像画廊设计

设计模式--组合模式-程序员宅基地

文章浏览阅读47次。定义：允许将对象组成树形结构来表现 “整体/部分” 层次结构。组合能让客户以一致的方式处理个别对象及对象组合。说白了，就是类似于树形结构。只是它要求子节点和父节点都具备统一的接口。类图如下：示例如下：比如我们常见的电脑上的目录，目录下面有文件夹，也有文件，然后文件夹里面还有文件及文件夹。这样一层层形成了树形结构。示例代码如下：#include <iostream>#include <stdio.h>#include "string"#includ..

Kotlin相关面试题_kotlin面试题-程序员宅基地

文章浏览阅读1.9w次，点赞26次，收藏185次。目录一.请简述下什么是kotlin？它有什么特性？二.Kotlin 中注解 @JvmOverloads 的作用？三.Kotlin中的MutableList与List有什么区别？四.kotlin实现单例的几种方式？五. kotlin中关键字data的理解？相对于普通的类有哪些特点？六.什么是委托属性？简单说一下应用场景？七.kotlin中with、run、apply、let函数的区别？一般用于什么场景？八.kotlin中Unit的应用以及和Java中void的区别？九.Ko_kotlin面试题

HEVC英文缩写及部分概念整理(1)--博主整理_反量化英文缩写-程序员宅基地

文章浏览阅读2.8k次。有这个想法一方面是确实很多时候会记不得一些缩写是什么意思。另外也是受 http://blog.csdn.net/lin453701006/article/details/52797415这篇博客的启发，本文主要用于自己记忆内容主要整理自http://blog.sina.com.cn/s/blog_520811730101hmj9.html http://blog.csdn.net/feix_反量化英文缩写