JS设计模式学习_基础篇

venmos 发布于2019-08-26 13:58 / 2854人阅读

摘要：工厂模式单例模式结构型设计模式关注于如何将类或对象组合成更大更复杂的结构，以简化设计。

一、写在前面

设计模式的定义：在面向对象软件设计过程中针对特定问题的简洁而优雅的解决方案

当然我们可以用一个通俗的说法：设计模式是解决某个特定场景下对某种问题的解决方案。因此，当我们遇到合适的场景时，我们可能会条件反射一样自然而然想到符合这种场景的设计模式。

比如，当系统中某个接口的结构已经无法满足我们现在的业务需求，但又不能改动这个接口，因为可能原来的系统很多功能都依赖于这个接口，改动接口会牵扯到太多文件。因此应对这种场景，我们可以很快地想到可以用适配器模式来解决这个问题。

以上参考自网易考拉前端团队-JavaScript设计模式

二、设计原则

设计哲学准则：

小即是美

让每个程序只做好一件事

快速建立原型

舍弃高效率而取可移植性

采用纯文本来存储数据

充分利用软件的杠杆效应（可复用）

使用shell脚本来提高杠杆效应和可移植性

避免强制性的用户界面

每个程序都称为过滤器

小准则：

允许用户定制环境

尽量使操作系统内核小而轻量化

使用小写字母且简写 list = ls

沉默是金

各部分之和大于整体

寻求90%的解决方案

三、SOLID设计原则

S 单一职责原则 single

一个程序只做好一件事情

如果功能复杂就拆分开，每个部分保持独立

O 开放封闭原则 open

对扩展开放，对修改封闭

增加需求时，扩展新需求，而非修改已有代码

这是软件设计的终极目标

L 李氏置换原则

子类能覆盖父类

父类能出现的地方子类就能出现

JS使用较少

I 接口独立原则

保持接口独立，避免出现“胖接口”

JS中没有接口（ts）

D 依赖导致原则

面向接口编程，依赖于抽象而不依赖于具体

使用方只关心接口而不关心具体类的实现

JS使用较少

四、23种设计模式

创建型设计模式
是一类处理对象创建的设计模式，通过某种方式控制对象的创建来避免基本对象创建时可能导致设计上的问题或增加设计上的复杂度。工厂模式、单例模式

结构型设计模式
关注于如何将类或对象组合成更大、更复杂的结构，以简化设计。适配器模式、装饰器模式、代理模式、外观模式

行为型设计模式
用于不同对象之间职责划分或者算法抽象，行为型设计模式不仅仅涉及类和对象，还涉及类或对象之间的交流模式并加以实现。观察者模式、迭代器模式、状态模式

五、UML类图

UML（Unified Modeling Language）是一种统一建模语言，为面向对象开发系统的产品进行说明、可视化、和编制文档的一种标准语言。

5.1 类图的表示

类图分三层，第一层显示类的名称，如果是抽象类，则就用斜体显示。第二层是类的特性，通常就是字段和属性。第三层是类的操作，通常是方法或行为。前面的符号，+ 表示public，- 表示private，# 表示protected（js中为严格区分，ts中有）

那么如何根据类图写出相应的代码结构呢？如下：

注：默认不添加属性或方法类型，即为 public，因此 public 可省略

5.2 类关系表示

泛化关系【继承】
空心箭头表示，是一种继承关系。例如：自行车是车

聚合关系
空心菱形箭头表示，是整体与部分的关系，与组合关系不同，整体和部分不是强依赖的。例如，部门撤销了，人员不会消失，他们依然存在

组合关系
实心菱形箭头表示，是整体与部分的关系，但部分不能离开整体而多带带存在。如公司和部门是整体和部分的关系，没有公司就不存在部门

关联关系【引用】
实线（可带单/双箭头）表示，是一种拥有的关系，它使一个类知道另一个类的属性和方法

除了上述类关系外，还有实现关系，依赖关系等表示法，可参考下面博文：
看懂UML类图和时序图
UML 各种图总结精华

六、真题

1 根据下面的信息画UML类图

打车时，可以打快车或者专车。任何车都有车牌号和名称

不同车打车价格不同，快车1元/公里，专车2元/公里

行程开始时显示车辆信息

行程结束时显示打车金额

2 根据下面的信息画UML类图

某停车场，分三层，每层100车位

每个车位都能监控到车辆的驶入和离开

车辆驶入前，显示每层空余车位数量

车辆驶入时，摄像头可识别车牌号和时间

车辆出来时，出口显示器显示车牌号和停车时间

分析：

车是一个大类，快车和专车继承自车

行程是一个多带带的类，连接用车和开始结束两个动作

分析：

关系1：车位组成层，层组成车库。组合关系

关系2：摄像机和显示屏是车库的部分，且能多带带存在。聚合关系

车停入车位时，需要判别该车位状态（是否为空车位）

车库需要记录车驶入驶出的状态和记录车位数，需要通过层获取

服务器托管超融合服务器 java语言程序设计基础篇基础篇之基础篇一篇深度学习

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/109937.html

个人分享--web前端学习资源分享

摘要：前言月份开始出没社区，现在差不多月了，按照工作的说法，就是差不多过了三个月的试用期，准备转正了一般来说，差不多到了转正的时候，会进行总结或者分享会议那么今天我就把看过的一些学习资源主要是博客，博文推荐分享给大家。 1.前言 6月份开始出没社区，现在差不多9月了，按照工作的说法，就是差不多过了三个月的试用期，准备转正了！一般来说，差不多到了转正的时候，会进行总结或者分享会议！那么今天我就...

sherlock221 2019-08-20 18:59 评论0 收藏0
个人分享--web前端学习资源分享

摘要：前言月份开始出没社区，现在差不多月了，按照工作的说法，就是差不多过了三个月的试用期，准备转正了一般来说，差不多到了转正的时候，会进行总结或者分享会议那么今天我就把看过的一些学习资源主要是博客，博文推荐分享给大家。 1.前言 6月份开始出没社区，现在差不多9月了，按照工作的说法，就是差不多过了三个月的试用期，准备转正了！一般来说，差不多到了转正的时候，会进行总结或者分享会议！那么今天我就...

Ethan815 2019-08-05 11:54 评论0 收藏0
Javascript CI篇（2）- Karma 基础学习

摘要：核心功能就是启动一个服务并监听项目文件改变，文件改变后再刷新服务器。 Karma 简介 Karma是Testacular的新名字，在2012年google开源了Testacular，2013年Testacular改名为Karma。Karma是一个让人感到非常神秘的名字，表示佛教中的缘分，因果报应，比Cassandra这种名字更让人猜不透！ Karma是一个基于Node.js的JavaS...

Ku_Andrew 2019-08-20 18:11 评论0 收藏0
JS基础篇-underscore源码解析

摘要：总想找个机会夯实一下自己的基础，正好最近略有清闲，看视频读书撸代码我选择了第三者怎么感觉有点别扭，看视频的话效率不高适合入门，看书的话一本你不知道的推荐给大家，选择继续看书的话还是算了吧，毕竟读万卷书不如行万里路是吧。总想找个机会夯实一下自己的JS基础，正好最近略有清闲，看视频？读书？撸代码？我选择了第三者（怎么感觉有点别扭），看视频的话效率不高适合入门，看书的话,一本《你不知道的J...

anyway 2019-08-21 12:00 评论0 收藏0
node.js入门学习笔记整理——基础篇

摘要：的介绍一般是这样在中，类是随内核一起发布的核心库。库为带来了一种存储原始数据的方法，可以让处理二进制数据，每当需要在中处理操作中移动的数据时，就有可能使用库。这样传递数据会更快。零、开始之前 1、首先解释一下node.js是什么？ 2、node.js和javascript有什么不同？ 1）因为javascript主要是用在browser，而node.js是在server或者你的电脑...

Tamic 2019-08-20 15:38 评论0 收藏0