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 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 - 单一职责原则(

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值