**设计模式在JavaScript中应用非常广泛，无论是在前端还是后端开发中都有广泛的应用。一些常见的设计模式包括单例模式、工厂模式、适配器模式、观察者模式等等。**

**本文将介绍JavaScript设计模式的一些基本概念和常见的应用场景，通过实例来演示如何使用这些设计模式解决实际问题。我们还将讨论如何在JavaScript代码中实现这些模式，以及它们的优缺点和使用注意事项。无论你是初学者还是有一定经验的开发人员，都能从中受益并提高你的代码质量和效率。**



# S O L I D 五大设计原则

S-单一职责原则
一个程序只做好一件事
如果功能过于复杂就拆分开，每个部分保持独立

O-开放封闭原则
对扩展开放，对修改封闭
增加需求时，扩展新代码，而非修复已有代码

L-里氏替换原则
子类能覆盖父类
父类能出现的地方子类就能出现
JS中使用较少（弱类型&继承使用较少）

I-接口隔离原则
保持接口的单一独立，避免出现’胖接口‘
JS中没有接口（typescript例外）

D-依赖反转原理
面向接口编程，依赖于抽象而不依赖于具体
使用方只关注接口而不关注具体类的实现
JS中使用较少（没有接口&弱类型）

# 设计模式类型
**创建型**
- 工作模式
- 单例模式
- 原型模式

**结构型**
- 适配器模式
- 装饰器模式
- 代理模式
- 外观模式 
- 桥接模式    
- 组合模式
- 享元模式

**行为型 -1**
- 策略模式 
- 模板方法模式
- 观察者模式
- 迭代器模式
- 职责连模式 
- 命令模式

**行为型 -2**
- 备忘录模式
- 状态模式 
- 访问者模式
- 中介者模式 
- 解释器模式 

# UNIX和LINUX设计哲学
准则1：小即是美
准则2：让每个程序只做好一件事

准则3：快速建立原型（先满足用户最基础的需求，后续用户有反馈，在进行升级。而不是埋头一直写）

准则4：舍弃高效率而取可移植性
准则5：采用纯文本来存储数据（可读性取舍）

准则6：充分利用软件的杠杠效应（软件复用）
准则7：使用shell脚本来提高杠杆效应和可移植性

准则8：避免强制性的用户界面

准则9：让每个程序都称为过滤器


# 设计模式

## 工厂模式
```js
function cPerson(name,sex,age){
 var o = new Object();
 o.name = name;
 o.sex = sex;
 o.age = age;
 o.show = function(){
 console.log(this.name,this.age,this.sex);
 }
 return o;
}
```
 工厂模式虽然解决了创建多个相似对象的问题，但是却没有解决对象识别问题（即怎样知道一个对象的类型）
工作模式需要封装new的创建 ，不让使用者去new

## 构造函数模式
```js
function CPerson(name,sex,age) { // 注意这里 构造函数首字母大写
 this.name = name;
 this.sex = sex;
 this.age = age;
 this.show = function () {
 console.log(this.name, this.age, this.sex);
 }
}
var p1 = new CPerson('谦龙','男','100');
 p1.show();
var p2 = new CPerson('雏田','女','14');
 p2.show();
 ```
构造函数模式虽然好用，但也并非没有缺点。使用构造函数的主要问题，就是每个方法（其他引用类型同理）都要在实例上重新创建一遍

## 构造函数改进
```js
function CPerson(name,sex,age) { //注意这里 构造函数首字母大写
 this.name = name;
 this.sex = sex;
 this.age = age;
 this.show = show
}
function show(){
 console.log(this.name, this.age, this.sex);
}
var p1 = new CPerson('谦龙','男','100');
 p1.show();
var p2 = new CPerson('雏田','女','14');
 p2.show();
 ```
需要定义多个全局函数，仍然让人无法接受

困惑：
个人认为构造函数模式更好,构造函数模式，定义的引用类型，不会相互污染,而原型模式，所有的实例都共享prototype，定义的引用类型，会造成相互污染

## 原型模式
```js
function CPerson(){
}
CPerson.prototype.name='谦龙';
CPerson.prototype.sex='男';
CPerson.prototype.age=100;
CPerson.prototype.show=function(){
 console.log(this.name, this.age, this.sex);
}
var p1 = new CPerson();
 p1.show(); //谦龙 100 男
var p2 = new CPerson();
 p2.show();//谦龙 100 男
 console.log(p1.show == p2.show)//true
```

## 单例模式
```js
class A {
  static instance=null
  constructor (){
    console.log('create')
  }
  static getInstance(){
    if(this.instance instanceof A)return this.instance
    return this.instance=new A()
  }
}
```

## 装饰器模式
```js
// 例子1：静态方法添加
@testDec
class Demo{
}
function testDec(target){
  target.isDec=true
}

// 例子2：装饰器参数
@testDec(false)
class Demo{
}
function testDec(isDec){
 return function(target){
   target.isDec=isDec
 }
}
// 例子3：实例方法添加（prototype）
let Foo={
  alert(){
    alert(1)
  }
}
@mixins(Foo)
class Demo{
}
function mixins(...list){
 return function(target){
   Object.assign(target.prototype,...list)
 }
}

// 例子4：类的实例方法装饰
function readonly(flag){
  return function(target,name,descriptor){
    descriptor.writable=!flag
  }
}
class Demo{
  @readonly(true)
  getName(){
  }
}
```
1. 为对象添加新功能
2. 不改变其原有结构和结构功能

## 观察者模式
Subject：发布者：相当于发布订阅模式的发布者（Publish）

Observer：观察者，相当于发布订阅模式的订阅者（Subscribe）
```js
class Subject {
  constructor (){
    this.state=0
    this.observers=[]
  }
  getState(){
    return this.state
  }
  setState(state){
    this.state=state
    this.notify()
  }
  notify(){
    this.observers.forEach(observer=>{
      observer.update(this.state)
    })
  }
  addObserver(observer){
    this.observers.push(observer)
  }
}

class Observer{
  constructor (name,subject,fn){
    this.name=name
    this.fn=fn
    this.subject=subject
    this.subject.addObserver(this)
  }
  update(state){
    console.log(this.name,'已成功被订阅')
    this.fn(state)
  }
}
//观察Subject
const subject=new Subject()
const o1=new Observer('o1',subject,function(state){
  console.log('已经接收到state',state)
})
const o2=new Observer('o2',subject,function(state){
  console.log('已经接收到state',state)
})

subject.setState(1)
```

## 迭代器模式
```js
class Iterator{
  constructor (list) {
    this.list=list
    this.index=0
  }
  hasNext(){
   return this.index<this.list.length
  }
  next(){
    if(this.hasNext()){
      return this.list[this.index++]
    }
  }
}

const arr=[1,2,3]
const iterator=new Iterator(arr)
while(iterator.hasNext()){
  console.log(iterator.next())
}
```

```js
let arr=[1,2,3,4,5,6]

function each(data){
  let iterator=data[Symbol.iterator]()
  let item={done:false}
  while(!item.done){
    item=iterator.next()
    if(!item.done)console.log(item)
  }
}

each(arr)

```
1. 也可以直接使用for of 去进行遍历
2. 需要具有迭代器方法的才能进行遍历，如：Array.prototype[Symbol.iterator] ，Map.prototype[Symbol.iterator]等存在
3. Object.prototype[Symbol.iterator]不存在迭代器，所以无法使用for of进行遍历

设计模式

## Less
```css
@horizontal-default-color: #fff;
@horizontal-inverse-color: #000;

.horizontal-variant(@variant) {
  @color: "horizontal-@{variant}-color";
  color: @@color;
}

.horizontal-default{
  .horizontal-variant(~"default");
}
.horizontal-inverse{
  .horizontal-variant(~"inverse");
}
```

## Sass
**%占位符**

定义的样式，不会出现在css中
```css
%icon {
  color:red;
  margin: 0 .5em;
}
```

**default**

默认值，若在当前覆盖定义，则以新的为主
```css
$primary: $blue !default;
```

**@import**

1.css有一个特别不常用的特性，即@import规则，它允许在一个css文件中导入其他css文件。然而，后果是只有执行到@import时，浏览器才会去下载其他css文件，这导致页面加载起来特别慢。

2.scss也有一个@import规则，但不同的是，scss的@import规则在生成css文件时就把相关文件导入进来。这意味着所有相关的样式被归纳到了同一个css文件中，而无需发起额外的下载。

## Postcss

工具：postcss-cli

相关插件（列举几个常用的）：
- autoprefixer：添加前缀
- css-import：将import css 内联到当前文件，减少请求数量
- cssnano：压缩css代码
- cssnext：提前使用css的新特性
- precss：和sass，less预处理器类似






Less、Sass、Postcss

## background-size
background-size 设置的长宽比和原有图片长宽比不同时，会压缩图片

cover 和 contain 都是等比例缩放(按照长宽比)

cover：把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。
而cover不会，它会按图片原有长宽比进行展示，如果目前容器长宽比和图片原有长宽比不同时，图片往往展示不全

contain：和cover差不多，就是它会完全显示图片。但是长宽比不同时，容器往往都有剩余

## 3d相关的两个属性：
```css
 transform-style: preserve-3d;
 perspective: 100px;
```

## animate 相关属性
```css
animation-play-state: paused;  //控制动画是否暂停
animation-timing-function:steps(1) //定义当前动画节点，到下一个动画节点的动画帧数。如果为1帧，则不会有补间动画
如果为2帧，则两个动画节点之间会有两帧的动画
```

## 滤镜
```css
html { /* //以下代码通过滤镜将页面中所有的彩色去掉，适用于各种纪念日，请维护人员及时删除或注释掉 */ 
 filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
 filter: grayscale(100%);
 -webkit-filter: grayscale(100%);
 -moz-filter: grayscale(100%); 
 -ms-filter: grayscale(100%);
 -o-filter: grayscale(100%);
 filter: gray; 
 -webkit-filter: grayscale(1); 
/* //去彩色代码结束 */ }
```

CSS 部分属性说明

**当我们在网站中使用图片时，经常会遇到需要调整图片尺寸和裁剪的情况。而对于一些特殊的图片，例如头像或者产品展示图，我们希望在调整尺寸的同时能够保持图片的主体内容不被裁剪。这时，CSS 中心裁剪就是一种非常实用的技巧。本文将会介绍什么是 CSS 中心裁剪，以及如何使用它来调整图片的尺寸和显示效果。**



## 思路1：
- 比如展示图片为100px*100px，图片原比例为3：2，
- 用100除以短边的比例2，在乘上长边的比例3，为150，这样我们定义背景图为150px*100px
- 使用图片的position center center
- 如果图片的尺寸小于100*100，则需要另外处理（可以不用上诉步骤）
```css
width: 100px;
height: 100px;
background-size: 150px 100px;
background-position: center center;
background-image: url('./assets/gogopher.jpg');
```

## 思路2：
- 展示图片原比例宽高，比如480*320
- 通过图片裁剪属性，裁剪掉长边160px(clip-path属于上下，左右同时裁剪，80*2)
- 裁剪后，图片为320*320，使用缩放，还原到100*100
- 如果图片的尺寸小于100*100，则需要另外处理
```css
width: 480px;
height: 320px;
background-size: 480px 320px;
background-image: url('./assets/gogopher.jpg');
clip-path: inset(0px 80px);
transform: scale(0.3333333);
```

图片中心裁剪

## 利用border 实现三角形

宽度设为0，利用left和right撑开容器，然后使用bottom绘制三角形颜色以及三角形锐度
```css
 width: 0;
 height: 200px;
 border-left: 20px solid transparent;
 border-right: 20px solid transparent;
 border-bottom: 30px solid red;
```

## 利用border-radius完成扇形
```css
width: 100px;
height: 100px;
border-top-left-radius: 100px;
background: red;
```

## checkbox 美化
1. 隐藏input标签，使用label for属性，去进行勾选标签
2. 给label标签添加背景图片，勾选中时，切换背景图片
```css 
<div class="checkbox">
  <input type="checkbox" id="a1" style="display: none;" />
  <label for="a1" class="label">
    选择框1
  </label>
</div>

.label{
  background-image: url('./assets/logo@2x.png');
  background-size: 20px 20px;
}
input:checked + label{
  background: url('./assets/laundry-img@2x.png');
  background-size: 20px 20px;
}
```