javascript設計模式之工廠模式

Posted on by

介紹

  • 將new操作單獨封裝
  • 遇到new時，就要考慮是否應該使用工廠模式
  • 比如買漢堡：直接點餐、取餐，我們不會親手做，商店要“封裝”做漢堡的工作，做好直接給買者

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) {
		// 此處返回的是實例，工廠模式的特點
		return new Procuct(name)
	}
}
// 運行代碼
let creator = new Creator()
let p = creator.create('p1')
p.init()
p.fun1()
p.fun2()

工廠模式的場景

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 （創建虛擬dom的實例）

在這裡插入圖片描述

總結

本篇文章就到這裡瞭，希望能夠給你帶來幫助，也希望您能夠多多關註WalkonNet的更多內容!

推薦閱讀：