Beberapa cadangan untuk pengaturcaraan aplikasi klien JavaScript_Basics

Anda mungkin perasan bahawa semakin banyak aplikasi web menjadi lebih kompleks baru-baru ini, dan tumpuan perlahan-lahan beralih daripada pelayan kepada klien. Adakah ini trend biasa? Saya tidak tahu. Perdebatan antara mereka dan menentang adalah seperti membahaskan sama ada Resurrectionist atau Krismas adalah lebih baik; Oleh itu, artikel ini tidak akan membincangkan bahagian mana yang betul, tetapi saya akan cuba menerangkan bahawa menggunakan pengaturcaraan berorientasikan objek yang terkenal mungkin berjaya menyelesaikan beberapa masalah dalam pengaturcaraan klien.

Contoh kod yang kurang piawai

Untuk mengambil kira responsif dan pengalaman pengguna aplikasi, kami mencipta kod yang semakin kompleks yang menjadi sukar untuk difahami dan diselenggara. Anda boleh membayangkan dengan mudah bahawa kod aplikasi JavaScript sisi klien yang dibina tanpa sebarang struktur dan peraturan akan kelihatan seperti ini:

$(function(){
  $('#form').submit(function(e) {
    e.preventDefault();
 
    $.ajax({
      url: '/animals',
      type: 'POST',
      dataType: 'json',
      data: { text: $('#new-animal').find('textarea').val() },
      success: function(data) {
        $('#animals').append('<li>' + data.text + '</li>');
        $('#new-animal').find('textarea').val('');
      }
     });
   });
});

Mengekalkan kod jenis ini akan menjadi sukar. Oleh kerana sekeping kod pendek ini berkaitan dengan banyak tempat: ia mengawal banyak acara (tapak, pengguna, acara rangkaian), ia mengendalikan acara operasi pengguna, menghuraikan respons yang dikembalikan oleh pelayan dan menjana kod HTML. Seseorang mungkin berkata: "Ya, anda betul, tetapi bagaimana jika ini bukan aplikasi satu halaman sebelah pelanggan? Ini adalah contoh penggunaan perpustakaan jQuery yang berlebihan" - bukan perkara yang sangat meyakinkan, seperti semua orang tahu , mudah diselenggara dan kod yang direka dengan baik adalah sangat penting. Khususnya, banyak alat atau rangka kerja berusaha untuk memastikan kod tersedia supaya kami boleh menguji, menyelenggara, menggunakan semula dan melanjutkannya dengan lebih mudah.

Apakah itu MVC?

Bercakap mengenainya. Kita boleh mendapat manfaat daripada rangka kerja JavaScript berdasarkan MVC, tetapi kebanyakan rangka kerja ini tidak menggunakan MVC, dan bersamaan dengan gabungan Model dan Video, atau sesuatu di antara keduanya, yang sukar untuk dibezakan. Inilah sebabnya mengapa kebanyakan rangka kerja Javascript adalah berdasarkan MV*.

Mengubah kaedah mungkin menyediakan organisasi dan seni bina untuk pelanggan dalam projek, yang menjadikan kod lebih mudah untuk diselenggara dalam tempoh masa yang panjang, malah memfaktorkan semula kod sedia ada menjadi agak mudah. Mengetahui cara ia berfungsi dan jawapan kepada beberapa soalan berikut adalah penting untuk diingati.

• Apakah jenis data yang terdapat dalam aplikasi saya? -Model
• Apakah yang perlu dilihat oleh pengguna? -Lihat
• Siapakah program yang berinteraksi dengan pengguna? -Pengawal

Kod refactor menggunakan rangka kerja MVC

Apakah faedah menggunakan MVC untuk memfaktorkan semula kod?

• Alih keluar pergantungan pada DOM dan Ajax
• Kod mempunyai struktur yang lebih baik dan lebih mudah untuk diuji.
• Alih keluar kod berlebihan daripada $(document).ready(), hanya tinggalkan bahagian yang menggunakan Model untuk membuat Pautan.

Mari kita memfaktorkan semula blok kod biasa menggunakan beberapa langkah mudah
Langkah 1: Cipta paparan dan alihkan permintaan Ajax

Kami mula mengalih keluar pergantungan pada DOM dan Ajax Gunakan pembina prototaip, corak untuk mencipta objek 'Haiwan' dan menambah kaedah 'tambah' Pada masa yang sama, buat paparan 'NewAnimalView' dan tambah kaedah 'addAnimal', 'appendAnimal', 'clearInput'.

Kod adalah seperti berikut:

var Animals = function() {
};
 
Animals.prototype.add = function (options) {
   $.ajax({
     url: '/animals',
     type: 'POST',
     dataType: 'json',
     data: { text: options.text },
     success: options.success
   });
};
 
 var NewAnimalView = function (options) {
  this.animals = options.animals;
  var add = $.proxy(this.addAnimal, this);
  $('# form').submit(add);
 };
 
 NewAnimalView.prototype.addAnimal = function(e) {
   e.preventDefault();
   var self = this;
 
   this.animals.add({
     text: $('#new-animal textarea').val(),
     success: function(data) {
       self.appendAnimal (data.text);
       self.clearInput();     
     }
   });
 };
 
NewAnimalView.prototype.appendAnimal = function(text) {
  $('#animals ul').append('<li>' + data.text + '</li>');
};
NewAnimalView.prototype.clearInput = function() {
  $('#new-animal textarea').val('');
};
 
 $(document).ready(function() {
   var animals = new Animals();
   new NewAnimalView({ animals: animals });
 });

Langkah 2: Gunakan acara untuk mengalih keluar kebergantungan.

Dalam contoh ini, menggunakan rangka kerja MVC adalah kuncinya. Kami akan menggunakan mekanisme acara, yang membolehkan kami menggabungkan dan mencetuskan acara tersuai Oleh itu, kami mencipta "AnimalsView" dan "NewAnimalView" dan memberi mereka tanggungjawab yang berbeza untuk memaparkan haiwan. Sangat mudah untuk memisahkan tanggungjawab menggunakan acara. Jika anda melepasi tanggungjawab antara kaedah dan acara seperti ini:

var events = _.clone(Backbone.Events);
var Animals = function() {
};
 
Animals.prototype.add = function(text) {
   $.ajax({
     url: '/animals',
     type: 'POST',
     dataType: 'json',
     data: { text: text },
     success: function(data) {
      events.trigger('animal:add', data.text);
     }
   });
};
 
var NewAnimalView = function(options) {
  this.animals = options.animals;
  events.on('animal:add', this.clearAnimal, this);
  var add = $.proxy(this.addAnimal, this);
  $('# form').submit(add);
 };
 
NewAnimalView.prototype.addAnimal = function(e) {
   e.preventDefault();
   this.animals.add($('#new-animal textarea').val());
 };
 
NewAnimalView.prototype.clearInput = function() {
  $('#new-animal textarea').val('');
};
 
var AnimalsView = function() {
  events.on('animal:add', this.appendAnimal, this);
};
 
AnimalsView.prototype.appendAnimal = function(text) {
  $('#animals ul').append('<li>' + data.text + '</li>');
};
 
$(document).ready(function() {
   var animals = new Animals();
   new NewAnimalView({ animals: animals });
   new AnimalsView();
});

Langkah 3: Hantar struktur data kepada rangka kerja teras

Akhir sekali, langkah yang paling penting, kami gunakan: model, paparan dan koleksi.

var Animal = Backbone.Model.extend({
  url: '/animals'
});
 
var Animals = Backbone.Collection.extend({
  model: Animal
});
 
var AnimalsView = Backbone.View.extend({
  initialize: function() {
    this.collection.on('add', this.appendAnimal, this);
  },
 
  appendAnimal: function(animal) {
    this.$('ul').append('<li>' + animal.escape('text') + '</li>');
  }
});
 
 
var NewAnimalView = Backbone.View.extend({
  events: {
    'submit form': 'addAnimal'
  },
 
  initialize: function() {
    this.collection.on('add', this.clearInput, this);
  },
 
  addAnimal: function(e) {
    e.preventDefault();
    this.collection.create({ text: this.$('textarea').val() });
  },
 
  clearInput: function() {
    this.$('textarea').val('');
  }
});
 
$(document).ready(function() {
  var animals = new Animals();
  new NewAnimalView({ el: $('#new-animal'), collection: animals });
  new AnimalsView({ el: $('#animals'), collection: animals });
});

Ringkasan

Apa yang telah kita capai? Kami bekerja pada tahap abstraksi yang tinggi. Penyelenggaraan kod, pemfaktoran semula dan pelanjutan menjadi lebih mudah. Kami telah mengoptimumkan hasil kod dengan sangat menarik. luar biasa. Walau bagaimanapun, saya mungkin ingin mencurahkan air sejuk kepada anda, walaupun dengan rangka kerja terbaik, kod yang dibangunkan masih rapuh dan sukar untuk dikekalkan. Oleh itu, adalah satu kesilapan untuk berfikir bahawa menggunakan rangka kerja MV* yang lebih baik boleh menyelesaikan semua masalah pengekodan. Ingat bahawa semasa proses pemfaktoran semula, kod akan menjadi lebih baik selepas melalui langkah kedua, di mana kita tidak menggunakan komponen utama rangka kerja.

Ingat bahawa rangka kerja MV* adalah baik, tetapi semua tumpuan tertumpu pada 'Bagaimana' untuk membangunkan aplikasi, yang menyerahkan kepada pembangun aplikasi untuk memutuskan 'Apa'. Pelengkap kepada setiap rangka kerja, terutamanya apabila domain projek adalah kompleks, akan menjadi pendekatan reka bentuk dipacu domain, yang akan memberi lebih tumpuan kepada aspek berikut: "apa", satu proses mengubah keperluan kepada produk sebenar. Tetapi itu topik lain yang akan kita bincangkan.