如何在不调用链中的每个方法的情况下构造流体api

时间:2018-02-15 17:37:46

标签: javascript

Chalk's中提供的流体API中,它们使您能够将方法链接在一起。

chalk.red.bgYellow('string')

这些方法也可以单独使用:

chalk.red('string')

如何在没有括号的情况下将这些字符串组合在一起。我意识到每个方法都会返回具有所有这些属性的对象。方法就可以了。我只是不明白它们如何成为一个方法以及作为一个带有方法的对象。

我查看了Chalk的源代码,但目前它略显偏离我的目标。

1 个答案:

答案 0 :(得分:1)

我认为这可能与它如何实现有关。 从本质上讲,你有一个内部成员对象的getter。这些更改了该对象的状态,同时还返回了构造函数本身。

然后我们将方法添加到构造函数的原型对象(或通过es6类语法糖),该方法设置内部对象的状态,同时还调用该对象上的方法(例如log())。这些方法还设置了内部对象的状态。

这绝对可以更干净但我认为这就是在实践中实现这种功能的方式。

如果有任何想法让我知道。

  

有一点需要注意:最初我是从构造函数中返回chk对象。当然,这不起作用,因为我们的构造函数没有原型对象,这意味着我不能添加方法。这是一个连续返回构造函数,并从原型上的方法访问内部对象状态的情况。

const Chalk = function () {
	const _this = this
	this.chk = {
		get red () {
			this.color = 'red'
			return _this
		},
		get blue () {
			this.color = 'blue'
			return _this
		},
		get bgYellow () {
			this.bg = 'yellow'
			return _this
		},
		get bgBlue () {
			this.bg = 'blue'
			return _this
		},
		log(msg) {
			this.msg = msg
			console.log(`color: ${this.color} \nbg: ${this.bg} \nmsg: ${this.msg}
			`)
		}
	}
}

Chalk.prototype.red = function (msg) {
	this.chk.color = 'red'
	this.chk.log(msg)
}

Chalk.prototype.blue = function (msg) {
	this.chk.color = 'blue'
	this.chk.log(msg)
}

const chalk = new Chalk().chk

chalk.bgYellow.blue('test')