ความแตกต่างระหว่างโมเดลการดูสิ่งที่น่าพิศวงที่ประกาศเป็นตัวอักษรออบเจกต์และฟังก์ชั่น

ในสิ่งที่น่าพิศวง js ฉันเห็นดูแบบจำลองประกาศเป็น:

var viewModel = {
    firstname: ko.observable("Bob")
};

ko.applyBindings(viewModel );

หรือ:

var viewModel = function() {
    this.firstname= ko.observable("Bob");
};

ko.applyBindings(new viewModel ());

ความแตกต่างระหว่างสองถ้าอะไร?

ฉันพบการสนทนานี้ในกลุ่ม google knockoutjs แต่มันไม่ได้ให้คำตอบที่น่าพอใจ

ฉันสามารถดูเหตุผลหากฉันต้องการเริ่มต้นโมเดลด้วยข้อมูลบางอย่างตัวอย่างเช่น:

var viewModel = function(person) {
    this.firstname= ko.observable(person.firstname);
};

var person = ... ;
ko.applyBindings(new viewModel(person));

แต่ถ้าฉันไม่ทำอย่างนั้นมันเป็นเรื่องสำคัญที่ฉันจะเลือกสไตล์?

มีข้อดีสองสามข้อในการใช้ฟังก์ชันเพื่อกำหนดโมเดลมุมมองของคุณ

ข้อได้เปรียบหลักคือคุณสามารถเข้าถึงคุณค่าthisที่เท่ากับทันทีที่สร้างขึ้น ซึ่งหมายความว่าคุณสามารถทำได้:

var ViewModel = function(first, last) {
  this.first = ko.observable(first);
  this.last = ko.observable(last);
  this.full = ko.computed(function() {
     return this.first() + " " + this.last();
  }, this);
};

ดังนั้นค่าที่สามารถสังเกตได้ของคุณที่คำนวณได้สามารถเชื่อมโยงกับค่าที่เหมาะสมthisแม้ว่าจะถูกเรียกจากขอบเขตอื่น

ด้วยวัตถุตามตัวอักษรคุณจะต้อง:

var viewModel = {
   first: ko.observable("Bob"),
   last: ko.observable("Smith"),
};

viewModel.full = ko.computed(function() {
   return this.first() + " " + this.last();
}, viewModel);

ในกรณีนี้คุณสามารถใช้viewModelโดยตรงในการคำนวณที่สังเกตได้ แต่จะได้รับการประเมินทันที (โดยค่าเริ่มต้น) ดังนั้นคุณจึงไม่สามารถกำหนดได้ภายในวัตถุตามตัวอักษรตามที่viewModelไม่ได้กำหนดไว้จนกว่าจะปิดวัตถุตามตัวอักษร หลายคนไม่ชอบที่การสร้างโมเดลมุมมองของคุณนั้นไม่ได้ถูกห่อหุ้มด้วยการโทรครั้งเดียว

รูปแบบอื่นที่คุณสามารถใช้เพื่อให้แน่ใจว่าthisเหมาะสมเสมอคือการตั้งค่าตัวแปรในฟังก์ชันเท่ากับค่าที่เหมาะสมthisและใช้แทน จะเป็นเช่นนี้:

var ViewModel = function() {
    var self = this;
    this.items = ko.observableArray();
    this.removeItem = function(item) {
         self.items.remove(item);
    }
};

ตอนนี้ถ้าคุณอยู่ในขอบเขตของแต่ละรายการและการโทร$root.removeItemค่าของthisจริงจะเป็นข้อมูลที่ถูกผูกไว้ที่ระดับนั้น (ซึ่งจะเป็นรายการ) โดยใช้ตัวเองในกรณีนี้คุณสามารถมั่นใจได้ว่าจะถูกลบออกจากรูปแบบมุมมองโดยรวม

ตัวเลือกอื่นกำลังใช้bindงานซึ่งรองรับโดยเบราว์เซอร์ที่ทันสมัยและเพิ่มโดย KO หากไม่รองรับ ในกรณีนั้นจะมีลักษณะดังนี้:

var ViewModel = function() {
    this.items = ko.observableArray();
    this.removeItem = function(item) {
         this.items.remove(item);
    }.bind(this);
};

มีอีกมากมายที่สามารถพูดได้ในหัวข้อนี้และรูปแบบมากมายที่คุณสามารถสำรวจได้ (เช่นรูปแบบของโมดูลและรูปแบบของโมดูลที่เปิดเผย) แต่โดยทั่วไปแล้วการใช้ฟังก์ชั่นจะช่วยให้คุณมีความยืดหยุ่นมากขึ้นและควบคุมวิธีสร้างวัตถุและความสามารถในการอ้างอิง ตัวแปรที่เป็นส่วนตัวของอินสแตนซ์

ฉันใช้วิธีอื่น แต่คล้ายกัน:

var viewModel = (function () {
  var obj = {};
  obj.myVariable = ko.observable();
  obj.myComputed = ko.computed(function () { return "hello" + obj.myVariable() });

  ko.applyBindings(obj);
  return obj;
})();

เหตุผลสองประการ:

1. ไม่ได้ใช้thisซึ่งอาจสร้างความสับสนเมื่อใช้ภายในko.computeds ฯลฯ
2. viewModel ของฉันเป็นซิงเกิลฉันไม่จำเป็นต้องสร้างหลายอินสแตนซ์ (เช่นnew viewModel())