【设计模式】JavaScript中的设计模式

        今天和大家探讨下,js中我认为作为前端开发必须要了解的几个设计模式,并通过示例向大家形象的说明一下。

单例模式 Singleton Pattern

        保证⼀个类只有⼀个实例,并提供⼀个访问它的全局访问点(调⽤⼀个类,任何时候返回 的都是同⼀个实例)

        实现⽅法:使⽤⼀个变量来标志当前是否已经为某个类创建过对象,如果创建了,则在下 ⼀次获取该类的实例时,直接返回之前创建的对象,否则就创建⼀个对象。

class Singleton { 
    constructor(name) { 
        this.name = name 
        this.instance = null 
    } 
    getName() { 
        alert(this.name) 
    } 
    static getInstance(name) { 
        if (!this.instance) { 
            this.instance = new Singleton(name) 
        } 
        return this.instance 
    } 
}

 

⼯⼚模式 Factory Pattern

        ⼯⼚模式定义⼀个⽤于创建对象的接⼝,这个接⼝由⼦类决定实例化哪⼀个类。该模式使 ⼀个类的实例化延迟到了⼦类。⽽⼦类可以重写接⼝⽅法以便创建的时候指定⾃⼰的对象 类型。

        简单说:假如我们想在⽹⻚⾯⾥插⼊⼀些元素,⽽这些元素类型不固定,可能是图⽚、链 接、⽂本,根据⼯⼚模式的定义,在⼯⼚模式下,⼯⼚函数只需接受我们要创建的元素的 类型,其他的⼯⼚函数帮我们处理。

// ⽂本⼯⼚
class Text { 
    constructor(text) { 
        this.text = text 
    } 
    insert(where) { 
        const txt = document.createTextNode(this.text) 
        where.appendChild(txt) 
    } 
} 

// 链接⼯⼚
class Link { 
    constructor(url) { 
        this.url = url 
    } 
    insert(where) { 
        const link = document.createElement('a') 
        link.href = this.url 
        link.appendChild(document.createTextNode(this.url)) 
        where.appendChild(link) 
    } 
} 

// 图⽚⼯⼚
class Image { 
    constructor(url) { 
        this.url = url 
    } 
    insert(where) { 
        const img = document.createElement('img') 
        img.src = this.url 
        where.appendChild(img) 
    } 
} 

// DOM⼯⼚ 
class DomFactory { 
    constructor(type) { 
        return new (this[type]()) 
    }

    // 各流⽔线
    link() { return Link } 
    text() { return Text } 
    image() { return Image } 
} 

行了,先到这里,后面有实用的再更新补充,别忘了收藏和点赞呦!!!

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值