JS之设计模式详解

JS六大设计模式：

单例模式，工厂模式、桥接模式、状态模式、装饰者模式、适配器模式

单例模式详解：

简易解析：如在网页中，点击按钮O，添加（显示）一个遮罩层（需求：得到遮罩效果），可以第一次点击添加，以后的点击按钮O，将遮罩显示出来就行，不需要重复添加遮罩层。

实现代码

 显示
    
    

工厂模式详解

简易解析：在创建ajax对象时，不能提前知道浏览器是否支持，提前创建对象，
在浏览器执行时，根据兼容性创建。

实现代码

桥接模式详解：

简易解析：如平常封装一个函数，需要时调用。创建一个div，鼠标移入时，div背景色改变，文字颜色改变；鼠标移出时，背景色改变，文字颜色改变。移入移出，
属性改变类似。可以创建一个函数，改变背景和文字颜色，由鼠标移入、移出调用这个函数，称为桥接

实现代码

where is my color
    

状态模式详解

简易解析：根据传入的状态，调用对应状态的函数

实现代码

装饰者模式

简易解析：一个按钮点击，输出1，再给这个按钮添加一个点击事件，输出2，点击后可同时输出1，2，不影响原来的点击事件。相当于点击的扩展

实现代码

适配器模式

简易解析：后台传入对象数据O{user:user,age:age}，前端用ajax传数据O，给后台，需要转为user=user&age=age格式。在日常生活中相当于，将国外的高压电伏，通过适配器转为国内手机可用的220v通用电流

实现代码