JavaScript设计模式系统讲解与应用-笔记

最新推荐文章于 2024-01-17 11:17:48 发布

mysteryflower

最新推荐文章于 2024-01-17 11:17:48 发布

阅读量1.2k

点赞数 1

分类专栏：前端

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

版权

可参考：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 'package

最低0.47元/天解锁文章

mysteryflower

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript设计模式系统讲解与应用-笔记

一、课程介绍1、导学设计模式：前端开发、客户端开发、后端开发=》高级工程师如何成为一名合格工程师？懂代码，不懂设计？一名合格工程师必备的条件：前端开发有一定的设计能力论工程师的设计能力3年工作经验，面试必考设计能力成为项目技术负责人，设计能力是必要基础从写好代码，到做好设计，设计模式是必经之路前端学习设计模式的困惑网上的资料都是针对Java等后端语言的看懂概念，但是不知道怎么用，看完就忘现在的JS框架，到底都用了哪些设计模式课程概述做什么？-讲解JS设计模式哪些部分？
复制链接

扫一扫