如何使用JavaScript創建此API並分析方法

Question

假設我想讓這個API作為應用程序的示例：

var db = new Database('db-name'); // DB connection
var todo = new Todo(db); // New "Todo" and pass it the DB ref
// I want this API:
todo.model.create('do this', function (data) {
  console.log(data);
});

我目前的設置如下：

function Todo (storage) {
  this.storage = storage;
};

Todo.prototype.model = {
  create: function (task, callback) {
    // The problem is "this" is Todo.model
    // I want the "super", or Todo so I can do:
    this.storage.save(task, callback);
  }
}

所以，如果你看到評論，問題是model.create中的“ this ”顯然是引用Todo.model ，但我需要它來抓住“ super ”。

我能想到的最好的是：

Todo.prototype.model = function () {
  var self = this;
  return {
    create: function (task, callback) {
      // The problem is "this" is Todo.model
      // I want the "super", or Todo so I can do:
      self.storage.save(task, callback);
    }
  }
}

但這兩個都不是很好。 最大的問題是我不希望在單個對象（第一個例子）或函數（第二個）中擁有model所有方法。 我希望能夠從模型def中取出它們。 其次，我想要todo.model.create API。

是否有設計模式來實現這一目標？

Answer 1

你不能在編寫todo.model使用原型模式，因為model是todo的屬性 。

我想你需要：

1. 一個新的Model對象，您可以在其上使用原型模型。

2. 在Todo構造函數中，創建一個Model對象。 理想情況下，使用只讀“getter”函數來允許訪問模型對象，但不能覆蓋。

Answer 2

使用bind ，你可以這樣做：

function Todo (storage) {
  this.storage = storage;
  this.model = {};

  var methodNames = Object.keys(TodoModel);

  for(var i = 0; i < methodNames.length; ++i) {
    var methodName = methodNames[i];
    var method = TodoModel[methodNames];

    model[methodName] = method.bind(this);
  }
};

var TodoModel = {
  create: function(task, callback) {
    // Note that when this method is called using Todo.model.create,
    // 'this' will point to the Todo instance.
    this.storage.save(task, callback);
  }
};

function test(storage) {
  var todo = new Todo(storage);
  var task = {};

  todo.model.create(task, function(err, savedTask) {
    // ...
  });
}

TodoModel基本上是一個地圖，因此您可以將其替換為Map集合，您將不再需要調用Object.keys 。

Answer 3

您可以在構造函數中設置model ，如下例所示：

function Todo (storage) {
  var self = this;

  this.storage = storage;

  this.model = {
    create: function(task, callback) {
      self.storage.save(task, callback);
    }
  };
};

或者，您可以使用bind ，但我認為這會使事情變得不必要，因為您必須找到適用於舊版瀏覽器的實現，並且它不會與支持EcmaScript 5的新瀏覽器中的本機實現沖突。