JavaScript自用设计模式

172 阅读4分钟

Link

https://blog.csdn.net/a0731999666333/article/details/101930410

https://segmentfault.com/a/1190000019532633

https://www.php.cn/code/24528.html

零碎知识点

有六种情况会是false

0,null,"",undefined,, NaN,false
弱语言若不开启严格模式,可以使用if(val)判断
而不需要if(!!val)

结构型模式

迭代器模式

对数组的操作方法,写在迭代器里面

代理模式

为其他对象提供一种代理
控制这个对象的访问

像是把一个大类,拆成两个方法

代理调用主方法

例如图片的loading

https://www.jb51.net/article/158442.htm

行为型模式

策略模式,模板方法

封装算法的
相同的事情,实现不同

优化if-else

模板方法是改变部分,策略模式是改变所有

创建型模式

工厂模式

www.cnblogs.com/dengyao-blo…

简单工厂和工厂方法模式
创建对象的接口,子类决定渲染哪一个类。

工厂模式里会用到单例模式和构造模式

https://www.cnblogs.com/dengyao-blogs/p/11646810.html

建造者模式

用于分部构建一个复杂的对象

将复杂对象的构造与其分离 用户需要指定需要类型就可以得到它们

大概类似于 某人想建房子,不是一个一个去调方法

而是把建房子拆成小方法

(可以利用不同的输入框等的,来判断是哪个选项) 有点像整合的策略模式

↑这不是正规写法,因为建造者模式是用来构建对象的

构造函数模式

创建特定类型的对象
func(page=0, size=0)

就是个普通的类……

或者自带参数的function

工厂模式

创建对象时候的副作用(全局),我们可以将这个创建过程封闭起来,将结果返回,这样就屏蔽了副作用对全局作用域的影响。

单例模式

门概念

使用场景

单例模式应用的场景一般发现在以下条件下:

  (1)资源共享的情况下,避免由于资源操作时导致的性能或损耗等。如上述中的日志文件,应用配置。

  (2)控制资源的情况下,方便资源之间的互相通信。如线程池等。
  
  (3)引用第三方库(多次引用只会使用一个库引用,如 jQuery)
  (4)弹窗(登录框,信息提升框)
  (5)购物车 (一个用户只有一个购物车)
  (6)全局态管理 store (Vuex / Redux)
单例模式的定义是:保证一个类仅有一个一个实例,并提供一个访问它的全局访问点。

单例模式能在合适的时候创建对象,并且创建唯一的一个。
代码接近于生活,很有意思。比如一个网站的登录,点击登录后弹出一个登录弹框,即使再次点击,也不会再出现一个相同的弹框。又或者一个音乐播放程序,如果用户打开了一个音乐,又想打开一个音乐,那么之前的播放界面就会自动关闭,切换到当前的播放界面。这些都是单例模式的应用场景。
保证一个类仅有一个对象,并提供一个访问它的全局访问点。
言简意赅的意思

https://www.cnblogs.com/dengyao-blogs/p/11652566.html

JavaScript中没有类的定义,单例模式的特点是”唯一“和”全局访问“,那么我们可以联想到JavaScript中的全局对象,利用ES6的let不允许重复声明的特性,刚好符合这两个特点;是的,全局对象是最简单的单例模式;

let obj = {
        name:"咸鱼",
        getName:function(){}
}
    
    
保证一个类只有一个实例,实现的方法是判断实例是否存在,存在就返回,不存在就创建了返回。

确保了一个类就可以实例对象。

命名空间

var a 污染
var x = {a:1}
var y = {a:1}

不会污染
为了不污染全局所设定的办法
react和vue等是内置了工厂模式
普通的js如果不用this是会容易污染的
实现
将创建过程封装在一个函数内,并将创建结果返回。
作用
模块间通信
系统中某个类的对象只能存在一个
保护自己的属性和方法

单例实战

因为obj刚好就符合单例模式的两大特点:"唯一"和"可全局访问"

简单版单例模式:

    分析:只能有一个实例,所以我们需要使用if分支来判断,如果已经存在就直接返回,如果不存在就新建一个实例;
    
 let CreateSingleton = (function(){
    let instance = null;
    return function(name){
        this.name = name;
        if(instance){
            return instance
        }
        return instance = this;
    }
})()


CreateSingleton.prototype.getName = function(){
        console.log(this.name);
}

let winner = new CreateSingleton("winner");  //winner
console.log(winner.getName());
let sunner = new CreateSingleton("sunner");  //winner
console.log(sunner.getName())