Rumah > hujung hadapan web > tutorial js > ## 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
Lepaskan: 2024-10-26 10:04:02
asal
345 orang telah melayarinya

## 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 );
Salin selepas log masuk
// Function
var viewModel = function() {
    this.firstname= ko.observable("Bob");
};

ko.applyBindings(new viewModel ());
Salin selepas log masuk

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);
};
Salin selepas log masuk

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);
Salin selepas log masuk

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);
    }
};
Salin selepas log masuk

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);
};
Salin selepas log masuk

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!

sumber:php.cn
Kenyataan Laman Web ini
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
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan