On this page

封裝「鏈式」函式庫

js

// jquery
$(".box").height(200).width(200) 

// vue3
createApp(App)
  .use(Router)
  .use(Vuex)
  .mount('#app')

簡單說

對指定的對象使用 . 鏈式，可連續調用這個對象進行多種的操作。

核心在於 return this

建構函式

相同的，也可以使用 Class 來建構。

js

const Num = function(num) {
	this.num = num
}

Num.prototype.add = function() {
	this.num ++
	return this
}

Num.prototype.less = function() {
    this.num --
	return this
}

const ten = new Num(10)

ten.add().less().num // 10

工廠函式

js

const bank = (balance) => {
    return {
        get() {
            return balance
        },
        deposit(amount) {
            balance += amount
            return this
        },
        withdrawal(amount) {
            balance -= amount
            return this
        }
        
    }
}

const A = bank(1000)

A.deposit(500).withdrawal(300).get() // 1200

Reference