类枚举setter,约定javascript

时间:2017-09-10 12:06:24

标签: javascript oop enums convention

您好我有以下课程:

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的最佳实践/约定(此处为state)

我可以这样做:

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

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

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

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

并允许致电myClass.setPending() 但我不知道这种制定者的正确命名。

2 个答案:

答案 0 :(得分:1)

我会选择第二个选项:

  1. 避免使用我认为总是好的硬编码字符串('state')。
  2. 使写入和读取的呼叫更短。
  3. 如果您决定更改行为,是否要更改setPending功能或每次设置调用?
  4. 我认为第三点是最重要的一点,尽量使你的代码尽可能地保持可用性。

答案 1 :(得分:1)

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

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

你从这开始:

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

然后你意识到你需要一个进度条视图来在状态设置时更新,所以你做了一个专门的setter:

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

但是稍后您决定需要显示通知,但仅在状态设置为“完成”时才显示。或许你发现自己需要一个速记方法,因为你必须经常输入upload.setState('done')并更容易打字upload.setStateDone()(参见jQuery的$.get vs $.ajax)。< / p>

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 setState因为它所做的就是预填充'click'字符串)。

设置器仍然存在问题:如果设置了无效状态,例如'无论如何',它将附加类'state-whatever',因此你更新Upload.prototype.setState = function(value) { if (['active', 'pending', 'done'].indexOf(value) > -1) this.state = value; this.elem.className = 'state-' + this.state; };

setState

问题是,您的状态在方法中是硬编码的,并且您希望在其他组件中重复使用它们,因此您可以定义状态映射并调整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; }; 映射:

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

在旁注中,最基本形式的setter只是一个将属性设置为对象值的函数。具体的具体程度取决于您在设置器中硬编码的参数数量。

numpy.ndarray.transpose()