Panduan Belajar Bermula untuk Rangka Kerja_Pengetahuan Asas Backbone.js JavaScript

1
Baru-baru ini saya sedang melakukan pengoptimuman bahagian hadapan untuk projek perbankan dalam talian berskala besar, yang memerlukan penggunaan pelanggan yang tebal Idea umum ialah bahagian hadapan meminta data melalui Ajax ke bahagian belakang, mengembalikannya dalam format Jason, dan kemudian memaparkannya pada halaman. Memandangkan sistem ini sangat besar, penyelesaian klien yang tebal tidak dapat dielakkan memerlukan menulis banyak kod JS pada bahagian klien. Saya fikir adalah sangat menyusahkan mana-mana pasukan untuk mengekalkan sejumlah besar kod tidak berstruktur. Jadi BackBone datang ke pandangan saya. Ia menyediakan cara untuk anda menstruktur kod JS anda dan menyusun kod JS bahagian hadapan anda dalam cara berorientasikan objek. Ini seperti menggunakan Reka Bentuk Didorong Domain ke bahagian hadapan Kami boleh membahagikan projek yang sangat besar kepada modul. Setiap modul boleh dibahagikan kepada View, Model dan Router mengikut keperluan BackBone.
Melalui tulang belakang, anda boleh menganggap data anda sebagai Model Melalui Model, anda boleh mencipta data, melakukan pengesahan data, memusnahkan atau menyimpan ke pelayan. Apabila operasi pada antara muka menyebabkan perubahan pada atribut dalam model, model akan mencetuskan peristiwa perubahan, pandangan yang digunakan untuk memaparkan status model akan menerima mesej perubahan yang dicetuskan oleh model, kemudian mengeluarkan respons yang sepadan dan memaparkan semula; data baharu untuk antara muka. Dalam aplikasi tulang belakang yang lengkap, anda tidak perlu menulis kod gam untuk mendapatkan nod daripada DOM dengan id khas, atau mengemas kini halaman HTML secara manual, kerana paparan hanya akan mengemas kini sendiri apabila model berubah.

2 Backbone ialah rangka kerja bahagian hadapan yang ringan yang digunakan untuk menguruskan sejumlah besar JS dalam halaman secara berstruktur, mewujudkan sambungan lancar dengan pelayan dan paparan serta menyediakan rangka kerja asas untuk membina aplikasi yang kompleks.
Biar saya terangkan secara ringkas ciri dan ciri utama Tulang Belakang:

2.1 Ringan

Kod sumber Backbone hanya kira-kira 1,000 baris (selepas mengalih keluar komen dan baris kosong), dan saiz fail hanya 16KB Termasuk pustaka bergantung Underscore, ia hanya 29KB.
Anda hanya perlu meluangkan sedikit masa untuk memahami dengan mudah pelaksanaan dalaman Backbone; atau menulis sejumlah kecil kod untuk mengatasi beberapa mekanisme Backbone jika anda ingin melakukan pembangunan sekunder berdasarkan Backbone, ia bukan perkara yang rumit.

2.2 Struktur

Backbone boleh menyahgandingkan data, logik dan paparan dalam halaman dengan mudah dan menyusun struktur kod mengikut Backbone Anda boleh memperuntukkan interaksi data, logik perniagaan, antara muka pengguna, dsb. kerja dalam projek kepada berbilang rakan sekerja untuk. pembangunan serentak Dan boleh disusun bersama secara teratur. Pada masa yang sama, ini sangat membantu untuk penyelenggaraan dan pembangunan projek besar dan kompleks.

2.3 Mekanisme Pewarisan

Dalam Backbone, modul boleh diwarisi Anda boleh menyusun model data, koleksi dan paparan dalam aplikasi dengan cara berorientasikan objek untuk menjadikan keseluruhan seni bina lebih jelas dan anda juga boleh membebankannya dengan mudah.

2.4 Wujudkan sambungan yang lancar dengan pelayan

Backbone mempunyai set peraturan interaksi dengan data pelayan terbina dalam (jika anda memahami seni bina REST, anda boleh memahaminya dengan mudah), dan kerja penyegerakan data akan dilakukan secara automatik dalam Model dan pembangun bahagian hadapan sahaja perlu Apabila anda melakukan operasi pada data klien, Backbone akan secara automatik menyegerakkan data yang dikendalikan ke pelayan.
Ini adalah perkara yang sangat menarik kerana antara muka data pelayan adalah telus kepada pembangun bahagian hadapan, dan mereka tidak perlu lagi bimbang tentang cara berinteraksi dengan pelayan. Walau bagaimanapun, antara muka data yang disediakan oleh pelayan juga perlu serasi dengan peraturan Backbone Untuk projek baharu, kita boleh cuba menggunakan set peraturan ini untuk membina antara muka. Tetapi jika projek anda sudah mempunyai set antara muka yang stabil, anda mungkin bimbang tentang risiko pengubahsuaian antara muka.
Tidak mengapa, kami boleh menyesuaikan diri dengan antara muka data sedia ada dengan melebihkan kaedah Backbone.sync Kami juga boleh melaksanakan kaedah interaksi data yang berbeza untuk persekitaran pelanggan yang berbeza. Sebagai contoh: apabila pengguna menggunakan perkhidmatan melalui pelayar PC, data akan disegerakkan ke pelayan dalam masa nyata dan apabila pengguna menggunakan perkhidmatan melalui terminal mudah alih, mempertimbangkan isu persekitaran rangkaian, kami boleh menyegerakkan data ke pangkalan data tempatan terlebih dahulu; kemudian menyegerakkannya ke pelayan pada masa yang sesuai. Dan ini boleh dicapai dengan hanya melebihkan kaedah.

2.5 Pengurusan acara antara muka

Dalam MVC, kami berharap dapat memisahkan sepenuhnya persembahan antara muka dan logik perniagaan Walau bagaimanapun, untuk acara interaktif yang dijana pengguna (seperti acara klik), kami sering mendapatkan dan mengikatnya melalui kaedah bind dalam jQuery.
Views in Backbone membantu kami mengatur acara pengguna dan kaedah pelaksanaan dengan teratur, yang hanya memerlukan kami mengisytiharkan ungkapan mudah, seperti:

在表达式中，事件名称可以是任意的DOM事件（如click、mouseover、keypress等），元素可以是jQuery支持的任意选择器（如标签选择器、id选择器、class选择器等）。
视图会自动将表达式中的事件绑定到选择器元素，当元素的事件被触发后，视图会自动调用表达式中绑定的方法。

2.6 轻量级模板解析
模板解析是Underscore中提供的一个方法。为什么我要在介绍Backbone特性时引入Underscore中的方法？因为该方法能帮助我们更好地分离视图结构和逻辑，且Underscore是Backbone必须依赖的库。
模板解析方法能允许我们在HTML结构中混合嵌入JS代码，就像在JSP页面中嵌入Java代码一样：

<ul> 
  <% for(var i = 0; i < len; i++) { %> 
  <li><%=data[i].title%></li> 
  <% } %> 
</li> 

通过模板解析，我们不需要在动态生成HTML结构时拼接字符串，更重要的是，我们可以将视图中的HTML结构独立管理（例如：不同的状态可能会显示不同的HTML结构，我们可以定义多个单独的模板文件，按需加载和渲染即可）。

2.7 自定义事件管理

在Backbone中，你可以使用on或off方法绑定和移除自定义事件。在任何地方，你都可以使用trigger方法触发这些绑定的事件，所有绑定过该事件的方法都会被执行，如：

var model = new Backbone.Model(); 
// 在model对象中向自定义事件custom绑定两个函数 
model.on('custom', function(p1, p2) { 
  // todo 
}); 
model.on('custom', function(p1, p2) { 
  // todo 
}); 
// 触发custom事件，将调用上面绑定的两个函数 
model.trigger('custom', 'value1', 'value2'); 
// 移除custom事件中绑定的所有方法 
model.off('custom'); 
// 触发custom事件，但不会执行任何函数，已经事件中的函数已经在上一步被移除 
model.trigger('custom'); 
 

如果你熟悉jQuery，你会发现它们与jQuery中的bind、unbind和trigger方法非常类似。
另外，Backbone支持一个特殊事件”all”，当在一个对象中绑定了名为”all”的事件后，该对象在触发任何事件时，都会同时触发”all”事件中绑定的方法。有时这种方法会非常有用，例如我们可以通过”all”事件监听对象状态的变化。

3.路由器
在单页应用中，我们通过JavaScript来控制界面的切换和展现，并通过AJAX从服务器获取数据。
可能产生的问题是，当用户希望返回到上一步操作时，他可能会习惯性地使用浏览器“返回”和“前进”按钮，而结果却是整个页面都被切换了，因为用户并不知道他正处于同一个页面中。
对于这个问题，我们常常通过Hash（锚点）的方式来记录用户的当前位置，并通过onhashchange事件来监听用户的“前进”和“返回”动作，但我们发现一些低版本的浏览器（例如IE6）并不支持onhashchange事件。
Backbone提供了路由控制功能，通过Backbone提供的路由器，我们能通过一个简单的表达式将路由地址和事件函数绑定在一起，例如：

var CustomRouter = Backbone.Router.extend({ 
  routes : { 
    '' : 'index', // 当URL Hash在根目录时执行index方法：url# 
    'list' : 'getList', // 当URL Hash在list节点时执行getList方法：url#list 
    'detail/:id' : 'query', // 当URL Hash在detail节点时执行query方法，并将detail后的数据作为参数传递给query方法：url#list/1001 
    '*error' : 'showError' // 当URL Hash不匹配以上规则时, 执行error方法 
  }, 
  index : function() { 
    alert('index'); 
  }, 
  getList : function() { 
    alert('getList'); 
  }, 
  query : function(id) { 
    alert('query id: ' + id); 
  }, 
  showError : function(error) { 
    alert('error hash: ' + error); 
  }, 
}); 
 
var custom = new CustomRouter(); 
Backbone.history.start(); 

 
请尝试将这段代码复制到你的页面中，并依次访问以下地址（其中URL表示你的页面地址）：

URL
URL#list
URL#detail/1001
URL#hash1
URL#hash2

Bitte versuchen Sie es erneut, indem Sie mit den Schaltflächen „Zurück“ und „Vorwärts“ des Browsers zwischen den soeben eingegebenen Adressen hin und her wechseln.
Sie können sehen, dass die gebundene Methode ausgeführt wird, wenn sich der URL-Hash ändert. Wenn ein undefinierter Hash auftritt, wird die showError-Methode ausgeführt und der undefinierte Hash an diese Methode übergeben.
Backbone zeichnet Adressänderungen standardmäßig über Hash auf. Bei Browsern niedrigerer Versionen, die onhashchange nicht unterstützen, werden Hash-Änderungen über setInterval Heartbeat überwacht, sodass Sie sich keine Sorgen über Browserkompatibilitätsprobleme machen müssen.
Für Browser, die die HTML5-PushState-Funktion unterstützen, ermöglicht Backbone auch die Erstellung personalisierter URLs über pushState, dies erfordert jedoch einige Anpassungen auf Ihrem Webserver.
3. Anwendbarkeit von Backbone

Backbone ist nicht so anpassungsfähig wie jQuery. Wenn Sie die Erstellung einer großen oder komplexen einseitigen Webanwendung vorbereiten, ist Backbone perfekt.
Wenn Sie Backbone auf die Seite Ihrer Website anwenden möchten und die Seite keine komplexe Logik und Struktur aufweist, wird Ihre Seite dadurch nur umständlicher und schwieriger zu warten.
Wenn Ihr Projekt nicht komplex ist, Ihnen aber eine bestimmte Funktion davon wirklich gefällt (vielleicht das Datenmodell, die Ansichtsverwaltung oder der Router), können Sie diesen Teil des Quellcodes aus Backbone extrahieren, da in Backbone jeweils die Abhängigkeiten zwischen Module sind nicht sehr stark und Sie können eines der Module problemlos erwerben und verwenden.

4. Abhängige Bibliotheken

Sie können Backbone nicht unabhängig verwenden, da seine Grundfunktionen, DOM-Operationen und AJAX alle auf Bibliotheken von Drittanbietern basieren.

4.1 Unterstrich
(erforderlich)
Underscore ist eine grundlegende Funktionsbibliothek zur Verbesserung der Entwicklungseffizienz. Sie kapselt allgemeine Vorgänge für Sammlungen, Arrays, Objekte und Funktionen. Genauso wie jQuery DOM-Objekte kapselt, können Sie über Underscore problemlos auf JavaScript-interne Objekte zugreifen und diese bedienen.
Underscore bietet auch einige sehr praktische Funktionsmethoden, wie z. B. Funktionsdrosselung, Vorlagenanalyse usw.
Einige der Hauptmethoden in Underscore werde ich im nächsten Kapitel ausführlich vorstellen, aber vorher müssen Sie verstehen: Underscore ist eine Bibliothek, auf die sich Backbone verlassen muss, da viele Implementierungen in Backbone auf Underscore basieren.

4.2 jQuery und Zepto
(optional)
Ich glaube, Sie kennen jQuery. Es handelt sich um ein browserübergreifendes DOM- und AJAX-Framework.
Für Zepto kann man es sich als die „mobile Version von jQuery“ vorstellen, da es kleiner, schneller und besser für die Ausführung im Browser mobiler Endgeräte geeignet ist. Es hat die gleiche Syntax wie jQuery, sodass Sie es wie folgt verwenden können jQuery.
Zepto unterstützt derzeit nur Webkit-basierte Browser und ist daher mit den meisten mobilen Systemen wie iOS, Adnroid, Symbian, Blackberry und Meego kompatibel. Windows Phone oder Firefox OS werden jedoch noch nicht unterstützt.
Da jQuery und Zepto die gleiche Syntax haben, gibt es für Backbone kein Problem, ob Sie jQuery oder Zepto verwenden (natürlich können Sie nicht beide gleichzeitig verwenden).
In Backbone verwenden DOM-Selektoren, DOM-Ereignisse und AJAX alle jQuery-Methoden. Der Grund dafür, dass sie hier optional sind, besteht darin, dass Sie sie nicht importieren müssen, wenn Sie die Ansichten und AJAX-Datensynchronisierungsfunktionen in Backbone nicht verwenden.
Wenn Sie nicht jQuery oder Zepto verwenden möchten, sondern eine andere oder benutzerdefinierte Bibliothek verwenden möchten, ist dies kein Problem, solange Ihre Bibliothek dieselben DOM-Selektoren, Ereignisverwaltung und AJAX-Methoden wie die jQuery-Syntax implementiert.
Mit Backbone können Sie die Bibliotheken von Drittanbietern, die Sie verwenden müssen, dynamisch über die setDomLibrary-Methode konfigurieren. Diese Situation wird häufig verwendet:
Obwohl Ihre benutzerdefinierte Bibliothek Methoden mit derselben Syntax wie jQuery enthält, sind die globalen Variablen nicht $ und Sie möchten die vorhandene Benennung beibehalten. Zu diesem Zeitpunkt können Sie es über die setDomLibrary-Methode auf das Objekt festlegen, auf das Backbone intern verweist.
Sie möchten entscheiden, welche Bibliothek besser geeignet ist, indem Sie die Umgebung des Benutzers untersuchen. Zum Beispiel: Wenn der Benutzer über einen PC-Browser zugreift, wird jQuery geladen; wenn der Benutzer über ein mobiles Endgerät zugreift, wird Zepto geladen.