javascript - 类枚举 setter ，约定 javascript

Question

嗨，我有以下类(class):

const MyClass = function MyClass() {
  this.state = null;
}

MyClass.prototype.set = function(key, value) {
    this[key] = value;
}

以及其他模块中的以下枚举:

const enumeration = {
    ACTIVE: 'active',
    PENDING: 'pending',
    DONE: 'done'
}

我想知道处理枚举属性的 setter 的最佳实践/约定是什么(在此处说明)

我可以做这样的事情:

let myClass = new MyClass();
myClass.set('state', enumeration.PENDING);

但它有点冗长，我需要了解 myClass 模块和 enum 模块。
另一个想法是这样做:

const MyClass function MyClass() {
    this.state = null;
}

MyClass.prototype.setPending = function() {
    this.state = enumeration.PENDING;
}

并允许调用myClass.setPending()但我不知道这种 setter 的正确命名。

Answer 1

首先，我认为这个问题不是基于意见，而是基于需求。如果您说它是基于偏好的，则意味着您根本没有遇到建立最佳实践来避免的问题。考虑到这一点，第一个最佳实践是使其尽可能简单。 API 如何发展取决于应用程序的特定需求以及您发现最合适的 API 的能力。

下面是 Web FTP 客户端上传对象的“代码演变”示例。请注意，有很多不同的可能路径。此示例的唯一目的是证明最佳实践不仅仅是偏好问题。

你从这个开始:

function Upload(state) {
  this.state = state || 'pending';
  this.elem = document.createElement('div');
}
new Upload().state = 'active';

然后您意识到您需要一个进度条 View 来在设置状态时进行更新，因此您创建了一个专门的 setter :

Upload.prototype.setState = function(value) {
  this.state = value;
  this.elem.className = 'state-' + this.state;
};

但是稍后您决定需要显示通知，但仅当状态设置为“完成”时才显示。或者，您可能发现自己需要一种简写方法，因为您必须多次输入 upload.setState('done') 并且发现输入 upload.setStateDone() 更容易(参见 jQuery 的 $.get 与 $.ajax)。

Upload.prototype.setStateDone = function() {
  this.setState('done');
  // code to execute only when the state changes to 'done'
};

请注意，您可以更喜欢一致的 API 而不是便利性(例如，我确实更喜欢 $.get 而不是 $.ajax，因为使用后者会产生很大的开销，但我更喜欢使用 jQuery 的 $(elem).on('click',.. 而不是 $.click 因为它所做的只是预填充 'click' 字符串)。

setter 仍然存在问题:如果您设置了无效状态，例如'whatever'，它将附加类 'state-whatever'，因此您更新 setState:

Upload.prototype.setState = function(value) {
  if (['active', 'pending', 'done'].indexOf(value) > -1)
    this.state = value;
  this.elem.className = 'state-' + this.state;
};

问题是，您的状态被硬编码在方法中，并且您希望在其他组件中重用它们，因此您定义一个状态映射并调整 setState。为了避免硬依赖，您可以使用依赖注入(inject)，而不是在构造函数内引用全局 states 映射:

var states = {
  ACTIVE: 'active',
  PENDING: 'pending',
  DONE: 'done'
};

function Upload(state, states) {
  this.states = states;
  this.state = state || this.states.PENDING;
  this.elem = document.createElement('div');
}

Upload.prototype.setState = function(value) {
  var states = Object.keys(this.states).map(function(key) {
     return key.toLowerCase();
  });
  if (states.indexOf(value) > -1) {
    this.state = value;
  this.elem.className = 'state-' + this.state;
};

顺便说一句，setter 最基本的形式只是一个将属性设置为对象值的函数。其具体程度取决于您硬编码到 setter 中的参数数量。

function createSetter(context, prop, val) {
  switch (arguments.length) {
     case 0:
       return function(p, v) { this[p] = v; };
     case 1:
       return function(p, v) { this[p] = v; }.bind(context);
     case 2:
       return function(v) { this[prop] = v; }.bind(context);
     case 3:
       return function() { this[prop] = val; }.bind(context);
  }
}

var genericSetter = createSetter(); // any prop/val, implicit this context,
    boundSetter = createSetter({}); // any prop/val, fixed context
    propSetter = createSetter({'hello': 'world'}, 'hello') // fixed prop, any val, defined context
    propValSetter = createSetter({'hello': 'world'}, 'hello', 'dude') // fixed prop, fixed val, fixed context