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類(lèi)圖
直接上工廠模式的代碼
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)容!
您可能感興趣的文章:
- JavaScript設(shè)計(jì)模式--簡(jiǎn)單工廠模式實(shí)例分析【XHR工廠案例】
- JavaScript設(shè)計(jì)模式--簡(jiǎn)單工廠模式定義與應(yīng)用案例詳解
- JS 設(shè)計(jì)模式之：工廠模式定義與實(shí)現(xiàn)方法淺析
- javascript設(shè)計(jì)模式 – 抽象工廠模式原理與應(yīng)用實(shí)例分析
- javascript設(shè)計(jì)模式 – 工廠模式原理與應(yīng)用實(shí)例分析
- javascript設(shè)計(jì)模式 – 簡(jiǎn)單工廠模式原理與應(yīng)用實(shí)例分析
相關(guān)文章
javascript instanceof 與typeof使用說(shuō)明
instanceof和typeof都能用來(lái)判斷一個(gè)變量是否為空或是什么類(lèi)型的變量。2010-01-01
這篇文章主要介紹了javascript數(shù)組定義的幾種方法，一般來(lái)說(shuō)分為隱式創(chuàng)建、直接實(shí)例化、創(chuàng)建數(shù)組并指定長(zhǎng)度、后來(lái)為了方便直接使用json格式定義數(shù)組，這里腳本之家小編就為大家介紹一下，需要的朋友可以參考一下2017-10-10
詳解JavaScript正則表達(dá)式中的global屬性的使用
這篇文章主要介紹了詳解JavaScript正則表達(dá)式中的global屬性的使用,是JS學(xué)習(xí)進(jìn)階中的重要知識(shí)點(diǎn),需要的朋友可以參考下2015-06-06
JavaScript基礎(chǔ)語(yǔ)法、dom操作樹(shù)及document對(duì)象
本文介紹了學(xué)習(xí)javascript重要的3個(gè)內(nèi)容基礎(chǔ)語(yǔ)法、dom操作樹(shù)及document對(duì)象，小伙伴們一定要弄明白才行2014-12-12
詳解JavaScript中undefined與null的區(qū)別
大多數(shù)計(jì)算機(jī)語(yǔ)言，有且僅有一個(gè)表示"無(wú)"的值，比如，C語(yǔ)言的NULL，Java語(yǔ)言的null，Python語(yǔ)言的none，Ruby語(yǔ)言的nil2014-03-03
關(guān)于JavaScript中string 的replace
在使用JavaScript對(duì)字符串進(jìn)行處理的時(shí)候我們經(jīng)常會(huì)用到replace方法，很簡(jiǎn)單的一個(gè)方法，以前一直不以為意，直到今天看JavaScript語(yǔ)言精粹的時(shí)候讀到了一個(gè)有趣的小例子的時(shí)候，并不是十分理解，了解了一下replace的用法才明白，原來(lái)replace不像想象中的那么簡(jiǎn)單2013-04-04
這篇文章主要介紹了深入理解JavaScript定時(shí)機(jī)制,對(duì)于學(xué)習(xí)JavaScript有一定的幫助，感興趣的小伙伴們可以參考一下。2016-10-10
本篇文章解釋了 javascript 中的兩種值類(lèi)型：原始值（primitive）和對(duì)象（object），以及混合使用兩種類(lèi)型時(shí)的注意事項(xiàng)2013-04-04
JavaScript SetInterval與setTimeout使用方法詳解
本文講解了JavaScript SetInterval與setTimeout的區(qū)別，并用代碼示例演示了使用方法2013-11-11
使用 Cookies 我們已經(jīng)知道，在 document 對(duì)象中有一個(gè) cookie 屬性。但是 Cookie 又是什么？2009-01-01