javascript設(shè)計(jì)模式之工廠模式

更新時(shí)間：2022年01月11日 15:11:58 作者：妖怪不慌不張

這篇文章主要為大家介紹了javascript工廠模式，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助

介紹

將new操作單獨(dú)封裝
遇到new時(shí)，就要考慮是否應(yīng)該使用工廠模式
比如買(mǎi)漢堡：直接點(diǎn)餐、取餐，我們不會(huì)親手做，商店要“封裝”做漢堡的工作，做好直接給買(mǎi)者

UML類圖

在這里插入圖片描述

直接上工廠模式的代碼

class Product {
	constructor(name} {
		this.name = name
	}
	init() {console.log('init')}
	fun1() {console.log('fun1')}
	fun2() {console.log('fun2')}
}
// 此處的Creator就是工廠
class Creator {
	create(name) {
		// 此處返回的是實(shí)例，工廠模式的特點(diǎn)
		return new Procuct(name)
	}
}
// 運(yùn)行代碼
let creator = new Creator()
let p = creator.create('p1')
p.init()
p.fun1()
p.fun2()

工廠模式的場(chǎng)景

Jquery - $(‘div’)

// jquery 代碼為工廠模式
class jQuery {
    constructor(selector) {
        let slice = Array.prototype.slice
        let dom = slice.call(document.querySelectorAll(selector))
        let len = dom ? dom.length : 0
        for (let i = 0; i < len; i++) {
            this[i] = dom[i]
        }
        this.length = len
        this.selector = selector || ''
    }
    append(node) {}
    addClass(name) {}
    html(data) {}
    // 此處省略若干 API
}
window.$ = function (selector) {
    return new jQuery(selector)
}

React.createElement （創(chuàng)建虛擬dom的實(shí)例）

在這里插入圖片描述

總結(jié)

本篇文章就到這里了，希望能夠給你帶來(lái)幫助，也希望您能夠多多關(guān)注腳本之家的更多內(nèi)容!

您可能感興趣的文章:

相關(guān)文章

JavaScript代碼復(fù)用模式詳解
文章介紹了代碼復(fù)用的概念及其原則，已經(jīng)代碼復(fù)用的集中類型，非常的詳盡，語(yǔ)言簡(jiǎn)單易懂，有需要的朋友可以參考下
2014-11-11
JavaScript中的Math 使用介紹
這篇文章主要介紹了JavaScript中Math的使用,需要的朋友可以參考下
2014-04-04
javascript中的=等號(hào)個(gè)數(shù)問(wèn)題兩個(gè)跟三個(gè)有什么區(qū)別
一個(gè)等號(hào)就是個(gè)賦值的作用，主要問(wèn)題在于兩個(gè)跟三個(gè)等號(hào)的區(qū)別，想必有很多的朋友都不知道吧，在本文有個(gè)不錯(cuò)的示例主要介紹下兩者到底有什么區(qū)別，感興趣的朋友不要錯(cuò)過(guò)
2013-10-10
JavaScript面對(duì)國(guó)際化編程時(shí)的一些建議
這篇文章主要介紹了JavaScript面對(duì)國(guó)際化編程時(shí)的一些建議,包括時(shí)區(qū)與語(yǔ)言編碼等一些值得注意的問(wèn)題,需要的朋友可以參考下
2015-06-06
JavaScript學(xué)習(xí)筆記之定時(shí)器
本文通過(guò)2個(gè)定時(shí)器的示例向我們展示了javascript中定時(shí)器的使用方法，格式以及功能，希望通過(guò)本文能夠讓大家對(duì)javascript定時(shí)器有新的認(rèn)識(shí)。
2015-01-01
Javascript中的變量使用說(shuō)明
使用過(guò)javascript的朋友都知道，在javascript中，變量的使用是個(gè)比較頭疼的問(wèn)題，經(jīng)常會(huì)產(chǎn)生些比較匪夷所思的結(jié)果。究其原因，大多是對(duì)javascript的變量相關(guān)知識(shí)了解得不夠透徹。
2010-05-05
javascript中怎么做對(duì)象的類型判斷
javascript中經(jīng)常使用的對(duì)象判斷方式包括：typeof、constructor和Object.prototype.toString.call()
2013-11-11
在javascript中創(chuàng)建對(duì)象的各種模式解析
下面小編就為大家?guī)?lái)一篇在javascript中創(chuàng)建對(duì)象的各種模式解析。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考，一起跟隨小編過(guò)來(lái)看看吧
2016-05-05
自動(dòng)化測(cè)試讀寫(xiě)64位操作系統(tǒng)的注冊(cè)表
本文主要介紹自動(dòng)化測(cè)試讀寫(xiě)64位操作系統(tǒng)的注冊(cè)表,這里提供詳細(xì)的教程來(lái)實(shí)現(xiàn)自動(dòng)化讀寫(xiě)64位操作系統(tǒng)的注冊(cè)表,希望能幫助測(cè)試軟件的朋友,有興趣的小伙伴可以參考下
2016-08-08
淺談JavaScript Date日期和時(shí)間對(duì)象
這篇文章主要介紹了JavaScript Date日期和時(shí)間對(duì)象的相關(guān)資料,需要的朋友可以參考下
2014-12-12