Rumah  >  Artikel  >  hujung hadapan web  >  ## Model Paparan Kalah Mati: Literal Objek lwn. Fungsi - Mana Yang Lebih Baik?

## Model Paparan Kalah Mati: Literal Objek lwn. Fungsi - Mana Yang Lebih Baik?

Barbara Streisand
Barbara Streisandasal
2024-10-26 10:04:02269semak imbas

## Knockout View Models: Object Literals vs. Functions - Which is Better?

Objek lwn. Fungsi untuk Mengisytiharkan Model Paparan Kalah Mati

Dalam JS Kalah Mati, model paparan boleh diisytiharkan sama ada sebagai literal objek atau fungsi. Pertimbangkan contoh berikut:

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

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

ko.applyBindings(new viewModel ());

Walaupun kedua-dua pendekatan mencapai matlamat yang sama, mentakrifkan model paparan sebagai fungsi menawarkan beberapa kelebihan:

Akses Terus kepada 'ini'

Dalam fungsi, 'ini' merujuk kepada tika yang dibuat. Ini membolehkan akses mudah kepada pemerhatian model paparan dan sifat dikira:

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);
};

Sebaliknya, apabila menggunakan literal objek, pengikatan konteks eksplisit diperlukan dalam pemerhatian yang dikira:

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

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

Encapsulation and Variable Privacy

Fungsi menyediakan enkapsulasi yang lebih semula jadi untuk model paparan, kerana ia boleh menentukan pembolehubah peribadi yang tidak terdedah kepada skop global. Ini membantu mengelakkan timpa ganti atau konflik secara tidak sengaja.

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

Akhir sekali, fungsi membolehkan pengikatan mudah menggunakan kaedah 'bind', memastikan konteks yang betul untuk fungsi panggil balik:

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

Ringkasnya , manakala kedua-dua kaedah untuk mentakrifkan model paparan Kalah Mati adalah sah, menggunakan fungsi memberikan lebih fleksibiliti, kawalan dan kelebihan pengkapsulan. Faedah ini menjadikan fungsi sebagai pilihan pilihan untuk model paparan yang lebih kompleks dan boleh diselenggara.

Atas ialah kandungan terperinci ## Model Paparan Kalah Mati: Literal Objek lwn. Fungsi - Mana Yang Lebih Baik?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn