Mulakan Perjalanan Backbone.js

Tidak seperti rakan pembangunan webnya, JavaScript tidak pernah benar-benar menyediakan struktur dalam bentuk rangka kerja. Syukurlah, dalam beberapa tahun kebelakangan ini, ini telah mula berubah.

Hari ini saya ingin memperkenalkan anda kepada Backbone.JS, perpustakaan kecil yang comel yang menjadikan proses mencipta aplikasi yang kompleks, interaktif dan dipacu data lebih mudah. Ia menyediakan cara yang bersih untuk memisahkan data daripada pembentangan.

---

Backbone.JS Gambaran Keseluruhan

Dicipta oleh Jeremy Ashkenas, ninja JS yang membina CoffeeScript, Backbone ialah perpustakaan ultra ringan yang membolehkan anda mencipta bahagian hadapan yang mudah diselenggara. Ia agnostik bahagian belakang dan berfungsi dengan baik dengan mana-mana pustaka JavaScript moden yang telah anda gunakan.

Backbone ialah koleksi objek kohesif dengan berat di bawah 4kb yang menyediakan struktur kepada kod anda dan pada asasnya membantu anda membina aplikasi MVC yang betul dalam penyemak imbas. Laman web rasmi menerangkan tujuannya seperti ini:

Backbone menyediakan struktur untuk aplikasi intensif JavaScript dengan menyediakan model dengan pengikatan nilai kunci dan acara tersuai, koleksi dengan API fungsi yang boleh dikira yang kaya, paparan dengan pengendalian acara deklaratif dan menghubungkan semuanya antara muka JSON yang RESTful ke aplikasi sedia ada anda.

Mari kita hadapi: perkara di atas agak sukar untuk dihuraikan dan difahami. Jadi mari kita teruskan menyahbina jargon dengan bantuan Jeremy.

Ikatan nilai utama dan acara tersuai

Apabila kandungan atau keadaan model berubah, objek lain yang melanggan model akan dimaklumkan supaya mereka boleh mengendalikannya dengan sewajarnya. Di sini, paparan mendengar perubahan dalam model dan mengemas kini sendiri dengan sewajarnya, dan bukannya model perlu berurusan dengan paparan secara manual.

API fungsi terbilang yang kaya

Backbone dilengkapi dengan banyak fungsi yang sangat berguna untuk memproses dan berfungsi dengan data anda. Tidak seperti pelaksanaan lain, tatasusunan dalam JavaScript agak neutral, yang benar-benar boleh menjadi penghalang apabila anda perlu berurusan dengan data.

Pandangan dengan pengendalian acara deklaratif

Hari-hari anda menulis panggilan pengikat spageti telah berakhir. Anda boleh mengisytiharkan panggilan balik secara pemrograman yang perlu dikaitkan dengan elemen tertentu.

Antara muka JSON yang tenang

Walaupun kaedah lalai apabila anda ingin berkomunikasi dengan pelayan adalah menggunakan panggilan AJAX standard, anda boleh menukar ini dengan mudah kepada apa sahaja yang anda perlukan. Banyak penyesuai telah muncul, meliputi kebanyakan penyesuai yang paling popular, termasuk Soket Web dan storan tempatan.

Pecahkan kepada istilah yang lebih mudah:

Backbone menyediakan cara yang bersih untuk memisahkan data daripada pembentangan. Model yang mengendalikan data hanya berkenaan dengan penyegerakan dengan pelayan, manakala tanggungjawab utama paparan adalah untuk mendengar perubahan pada model yang dilanggan dan memaparkan HTML.

---

Soalan Lazim Pantas

Saya rasa anda mungkin keliru sedikit sekarang, jadi mari jelaskan beberapa perkara:

Adakah ia akan menggantikan jQuery?

Tidak. Skop mereka sangat saling melengkapi, dengan sedikit pertindihan dalam fungsi. Backbone mengendalikan semua abstraksi tahap yang lebih tinggi, manakala jQuery (atau perpustakaan yang serupa) mengendalikan DOM, peristiwa yang dinormalkan, dsb.

Skop dan kes penggunaannya sangat berbeza, dan hanya kerana anda tahu satu itu tidak bermakna anda tidak sepatutnya mempelajari yang lain. Sebagai pembangun JavaScript, anda harus tahu cara menggunakan kedua-duanya dengan berkesan.

Kenapa saya perlu menggunakan ini?

Oleh kerana selalunya, kod bahagian hadapan menjadi kucar-kacir yang mengukus dan kotor bagi panggilan balik bersarang, manipulasi DOM, HTML untuk pembentangan dan gelagat lain yang tidak dapat digambarkan.

Backbone menyediakan cara yang sangat bersih dan elegan untuk menguruskan huru-hara ini.

Di manakah saya harus menggunakannya?

Backbone bagus untuk mencipta aplikasi berat bahagian hadapan, dipacu data. Fikirkan antara muka GMail, Twitter baharu atau apa-apa pendedahan lain dalam beberapa tahun yang lalu. Ia menjadikan penciptaan aplikasi yang kompleks lebih mudah.

Walaupun anda boleh memasukkannya ke dalam halaman web yang lebih arus perdana, ini sebenarnya perpustakaan yang dibuat khusus untuk aplikasi web.

Adakah ia serupa dengan cappuccino atau sproutcore?

Ya dan tidak.

Ya, kerana seperti rangka kerja yang dinyatakan di atas, ini digunakan terutamanya untuk mencipta bahagian hadapan yang kompleks untuk aplikasi web.

Apa yang membezakannya ialah Backbone sangat diperkemas dan tidak disertakan dengan widget tambahan.

Tulang belakang sangat ringan, kurang daripada 4kb.

Terdapat juga fakta bahawa Cappuccino memaksa anda untuk membuat kod dalam Objective-J, manakala pandangan Sproutcore mesti diisytiharkan secara pemrograman dalam JS. Walaupun tidak ada yang salah dengan mana-mana pendekatan ini, dengan Backbone, JavaScript biasa boleh menyelesaikan tugas dengan HTML dan CSS biasa, membolehkan keluk pembelajaran yang lebih lembut.

Saya masih boleh menggunakan perpustakaan lain di halaman, bukan?

Sungguh. Bukan sahaja akses DOM biasa, jenis pembalut AJAX, tetapi juga jenis pemuatan templat dan skrip yang lain. Ia sangat, sangat longgar, yang bermaksud anda boleh menggunakan hampir semua alat dengan Backbone.

Adakah ia akan membawa keamanan dunia?

Tidak, maaf. Tetapi inilah sesuatu untuk menggembirakan anda.

Baiklah, mari kita ketepikan soalan ini sekarang, mari mulakan!

---

Fahami Tulang Belakang

MVC dalam Backbone pada asalnya bermaksud Model, Paparan dan Koleksi kerana tiada pengawal dalam rangka kerja. Keadaan telah berubah.

Teras Tulang Belakang terdiri daripada empat kelas utama:

• model
• Koleksi
• Lihat
• pengawal

Memandangkan kami agak sempit pada masa, kami hanya akan melihat kursus teras hari ini. Kami akan membuat susulan dengan aplikasi yang sangat mudah untuk menunjukkan konsep yang diajar di sini, kerana meletakkan semuanya dalam satu artikel dan mengharapkan pembaca untuk menghuraikan semuanya adalah terlalu banyak.

Sila kekal berwaspada dalam beberapa minggu akan datang!

---

model

Model mungkin mempunyai makna yang berbeza dalam pelaksanaan MVC yang berbeza. Dalam Backbone, model mewakili satu entiti—rekod dalam pangkalan data, jika anda mahu. Tetapi tidak ada peraturan yang keras dan pantas di sini. Dari laman web Backbone:

Model ialah teras bagi mana-mana aplikasi JavaScript, yang mengandungi data interaktif dan banyak logik yang mengelilinginya: transformasi, pengesahan, sifat dikira dan kawalan akses.

Model hanya memberi anda cara untuk membaca dan menulis sifat atau sifat arbitrari pada set data. Dengan itu, baris tunggal kod berikut boleh digunakan dengan sempurna:

var Game = Backbone.Model.extend({});

Mari kita membina ini.

var Game = Backbone.Model.extend({
        initialize: function(){
            alert("Oh hey! ");
        },
		  defaults: {
            name: 'Default title',
            releaseDate: 2011,
        }
    });

initialize akan dicetuskan apabila objek dibuat seketika. Di sini saya hanya menarik perhatian kepada beberapa tingkah laku bodoh - anda mungkin perlu bootstrap data atau melakukan pengemasan lain dalam aplikasi anda. Saya juga menentukan sekumpulan nilai lalai sekiranya tiada data dihantar.

Mari kita lihat cara membaca dan menulis sifat. Tetapi pertama, mari kita buat contoh baharu.

// Create a new game
var portal = new Game({ name: "Portal 2", releaseDate: 2011});

// release will hold the releaseDate value -- 2011 here
var release = portal.get('releaseDate');

// Changes the name attribute
portal.set({ name: "Portal 2 by Valve"});

Jika anda perasan mendapat/menetapkan mutator, makan sebiji biskut! Atribut model tidak boleh dibaca melalui format object.attribute biasa. Anda mesti melaksanakan getter/setter kerana peluang untuk menukar data secara tidak sengaja adalah rendah.

Pada ketika ini, semua perubahan hanya disimpan dalam ingatan. Mari buat perubahan ini kekal dengan bercakap dengan pelayan.

portal.save();

Itu sahaja. Adakah anda mengharapkan lebih? Baris kod di atas kini akan menghantar permintaan kepada pelayan anda. Perlu diingat bahawa jenis permintaan berubah secara bijak. Oleh kerana ini adalah objek baharu, POST akan digunakan. Jika tidak, gunakan PUT.

Model Backbone hadir dengan lebih banyak ciri secara lalai, tetapi ini pasti akan membantu anda bermula. Klik pada dokumentasi untuk maklumat lanjut.

---

Koleksi

Koleksi dalam Tulang Belakang pada asasnya hanyalah koleksi model. Seperti analogi pangkalan data sebelumnya, koleksi adalah hasil pertanyaan, di mana hasilnya terdiri daripada banyak rekod [model]. Anda boleh menentukan koleksi seperti ini:

var GamesCollection = Backbone.Collection.extend({
  model : Game,
  }
});

Perkara pertama yang perlu diperhatikan ialah kami menentukan koleksi model yang mana ini. Memperluaskan contoh kami sebelum ini, saya menjadikan koleksi ini sebagai koleksi permainan.

Kini anda boleh terus menggunakan data anda mengikut kehendak anda. Sebagai contoh, mari kita lanjutkan koleksi ini untuk menambah kaedah yang hanya mengembalikan permainan tertentu.

var GamesCollection = Backbone.Collection.extend({
  model : Game,
  old : function() {
    return this.filter(function(game) { 
      return game.get('releaseDate') < 2009; 
    });
  }
  }
});

Mudah kan? Kami hanya menyemak sama ada permainan itu dikeluarkan sebelum 2009, dan jika ya, kembalikan permainan itu.

Anda juga boleh terus memanipulasi kandungan koleksi, seperti yang ditunjukkan di bawah:

var games = new GamesCollection
games.get(0);

Coretan kod di atas menunjukkan koleksi baharu dan kemudian mendapatkan semula model dengan ID 0. Anda boleh mencari elemen pada kedudukan tertentu dengan merujuk indeks kaedah at seperti ini: permainan.at(0); Akhirnya, anda boleh mengisi koleksi anda secara dinamik seperti ini:

var GamesCollection = Backbone.Collection.extend({
  model : Game,
  url: '/games'
  }
});

var games = new GamesCollection
games.fetch();

Kami hanya membiarkan Backbone mendapatkan data dari mana melalui harta

url

. Setelah selesai, kami hanya mencipta objek baharu dan memanggil kaedah fetch, yang mencetuskan panggilan tak segerak ke pelayan dan mengisi koleksi dengan hasilnya. Ini sepatutnya merangkumi asas koleksi Tulang Belakang. Seperti yang saya nyatakan, terdapat banyak perkara yang bagus di sini, dengan Backbone menyamakan banyak utiliti bagus daripada perpustakaan Underscore. Bacaan cepat dokumentasi rasmi seharusnya membantu anda bermula.

Lihat

---

Pada pandangan pertama, pandangan di Backbone boleh menjadi sedikit mengelirukan. Bagi pemurni MVC, mereka menyerupai pengawal dan bukannya melihat diri mereka sendiri.

Pandangan pada dasarnya mengendalikan dua tanggungjawab:

Dengar acara yang dilemparkan oleh DOM dan model/koleksi.

• Tunjukkan kepada pengguna status dan model data aplikasi.
Mari teruskan dan cipta pandangan yang sangat mudah.

GameView= Backbone.View.extend({
  tagName : "div",
  className: "game",
  render : function() {
    // code for rendering the HTML for the view
  }
});

Jika anda telah mengikuti tutorial ini setakat ini, ia agak mudah. Saya hanya nyatakan elemen HTML yang harus digunakan untuk membalut paparan melalui atribut

tagName

dan IDnya melalui className.

让我们继续进行渲染部分。

  render : function() {
    this.el.innerHTML = this.model.get('name');
	 
	 //Or the jQuery way
	 $(this.el).html(this.model.get('name'));
  }

el 指的是视图引用的 DOM 元素。我们只是通过元素的 innerHTML 属性访问游戏的名称。简而言之，div 元素现在包含我们游戏的名称。显然，如果您以前使用过该库，则 jQuery 方式会更简单。

对于更复杂的布局，在 JavaScript 中处理 HTML 不仅乏味而且鲁莽。在这些情况下，模板是可行的方法。

Backbone 附带了由 Underscore.JS 提供的最小模板解决方案，但我们非常欢迎您使用任何可用的优秀模板解决方案。

最后我们看一下视图是如何监听事件的。首先是 DOM 事件。

events: {
        'click .name': 'handleClick'
    },
	 
handleClick: function(){
		  alert('In the name of science... you monster');
		  
		  // Other actions as necessary
}

如果您以前处理过事件，那么应该很简单。我们基本上是通过事件对象定义和连接事件。正如您在上面看到的，第一部分指的是事件，下一部分指定触发元素，最后一部分指应触发的函数。

现在绑定到模型和集合。我将在这里介绍模型的绑定。

GameView= Backbone.View.extend({
initialize: function (args) {
        _.bindAll(this, 'changeName');
		  this.model.bind('change:name', this.changeName);
},
});

首先要注意的是我们如何将绑定代码放置在初始化函数中。当然，最好从一开始就这样做。

bindAll 是 Underscore 提供的一个实用程序，用于保存函数的 this 值。这特别有用，因为我们传递了一堆函数，并且指定为回调的函数已删除该值。

现在，只要模型的 name 属性发生更改，就会调用 changeName 函数。您还可以使用添加和删除动词来轮询更改。

侦听集合中的更改就像将处理程序绑定到回调时将模型替换为集合一样简单。

---

控制器

Backbone 中的控制器本质上允许您使用 hashbang 创建可添加书签的有状态应用程序。

var Hashbangs = Backbone.Controller.extend({
  routes: {
    "!/":                 "root",
    "!/games":        "games",
  },
  root: function() {
    // Prep the home page and render stuff
  },

  games: function() {
    // Re-render views to show a collection of books
  },
  });

这对于传统服务器端 MVC 框架中的路由非常熟悉。例如，!/games 将映射到 games 函数，而浏览器本身中的 URL 将是 domain/#!/games。

通过智能使用 hashbang，您可以创建大量基于 JS 且可添加书签的应用程序。

如果您担心破坏后退按钮，Backbone 也能满足您的需求。

// Init the controller like so
var ApplicationController = new Controller; 

Backbone.history.start();

通过上面的代码片段，Backbone 可以监控您的 hashbang，并结合您之前指定的路线，使您的应用程序可添加书签。

---

我从 Backbone 学到了什么

总的来说，以下是我从创建应用程序的 Backbone 方式中学到的一些经验教训：

• 前端确实需要 MVC。传统方法给我们留下的代码过于耦合、混乱且难以维护。
• 在 DOM 中存储数据和状态是一个坏主意。在创建需要使用相同数据更新应用的不同部分的应用后，这开始变得更有意义。
• 胖模型和瘦控制器是正确的选择。当业务逻辑由模型处理时，工作流程就会得到简化。
• 模板是绝对必要的。将 HTML 放入 JavaScript 中会给您带来不好的业力。

可以说 Backbone 引起了前端构建方式的范式转变，至少对我来说是这样。鉴于今天文章的范围非常广泛，我确信您有很多问题。点击下面的评论部分来插话。非常感谢您的阅读，并期待将来有更多的 Backbone 教程！

Atas ialah kandungan terperinci Mulakan Perjalanan Backbone.js. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!