backbone.js
介绍
多年来，Web应用程序开发过程一直在发展。 最初，Web应用程序只是静态HTML页面，需要程序员更改代码才能更改内容。 后来，在Web 2.0中，添加了服务器端编程语言以根据用户输入和数据库中存储的数据动态生成HTML页面。
当今的Web应用程序需要大量使用JavaScript来即时生成内容。 用户不必在请求和页面刷新之间等待。 过去在服务器端的许多逻辑/代码已移至客户端。 尽管JavaScript现在已广泛用于制作Web应用程序，但是我们确实在使用JavaScript创建大型应用程序时遇到了一些问题。
Backbone.js
为了解决这个问题，Backbone.js或骨干在这里。 我们都使用了不同类型的框架来创建单页应用程序（SPA），例如Model-View-Controller（MVC），Model-View-Presenter（MVP），Model-View-View Model（MVVM）。 Backbone.js（或简称Backbone）是用于构建大量数据的单页应用程序（SPA）的前端JavaScript框架.Backbone遵循其自身的特殊范例。 骨干网不需要在文件系统中对文件进行结构化。 骨干网还帮助我们提供有关项目代码结构的必要建议。 当应用程序在后端使用数据库来持久存储用户数据，并且前端应用程序将需要镜像许多此类数据时，骨干网最有用。
在上文中，我们讨论了osteo.js的必要性。 现在让我们看一下骨架.js的工作过程。
bone.js的工作过程
在运行基于Backbone的SPA时，用户将与后端的数据进行交互。 当他们与应用程序交互时，他们就是使用Views进行交互的。 视图表示文档对象模型（DOM）的一部分。 这些交互触发事件以更新模型中的数据。 Backbone.js跟踪这些模型，并将每次更改的数据发送到要持久保存的Web服务器。 它还跟踪模型数据的更改，并可以更新视图。 这使得更新DOM和将数据发送到服务器的过程似乎是自动的。 可以构建一致的方法，而不是构建几个一次性的jQuery $ .ajax调用。
现在让我们看一下将打印Hello的示例代码。 世界。
HTML页面
<!DOCTYPE HTML>
<html>
<head>
<title>Backbone Application Development Starter</title>
<!-- utility library and selector engine should be placed here.-->
<script src="scripts/backbone-1.0.0.js"></script>
</head>
<body>
<div id="display">
<div class="listing">There is a problem.</div>
</div>
</body>
<script src="scripts/sample.js"></script>
</html>首先，我们需要三个第三方脚本。
- 骨干。
- 下划线/ LoDash。
- J查询/ Zepto。
在上面的html页面中，我们包含了beta-1.0.0.js。 并且我们必须包括Underscore / LoDash和J-query / Zepto。 加载所有库和选择器引擎后，我们便可以编写html代码。
JavaScript文件
var obj = {};
_.extend(obj, Backbone.Events);
obj.on("show-message", function(msg) {
$('#display .listing').text(msg);
});
obj.trigger("show-message", "Hello World");现在，我们可以看到上面的代码片段中发生了很多事情。 正如我们在第一行看到的
var obj = {};我们正在创建一个名为“ obj”的对象。 第二行非常重要。
_.extend(obj, Backbone.Events); 在这一行中，我们可以看到实用程序库为我们提供了许多功能。 其中之一是扩展。 此函数将两个或多个对象作为其参数。 从它们复制属性后，将它们附加到第一个对象。 扩展实用程序功能是将Backbone功能添加到类的最佳方法。 我们的对象obj现在是一个Backbone Event对象，可用于触发事件并在触发事件时运行回调函数。
除了上面的代码，我们还可以使用模板编写相同的代码。 让我们来看看：
var AppView = Backbone.View.extend({
el: $('#container'),
template: _.template("<h3>Hello <%= who %><h3>"),
initialize: function(){
this.render();
},
render: function(){
this.$el.html(this.template({who: 'world!'}));
}
});
var appView = new AppView();在上面的代码中，我们使用不同的方法来打印Hello world！ 我们正在使用模板。 我们在这里创建了一个扩展实用程序库的视图。
el: $('#container'),“ el”是视图的DOM元素。 接下来，我们有一个模板，其中的占位符“谁”稍后将被替换。
this.$el.html(this.template({who: 'world!'}));在这一行中，我们用变量“ who”代替“ world！”来呈现函数。 。 最后，我们使用以下代码片段初始化视图。
var appView = new AppView();Backbone.js为我们提供了五个非常重要的功能。
- 楷模。
- 集合。
- 意见。
- 模板。
- 查看事件。
在本文中，我们将仅介绍这五个功能的基础。
模型：模型是任何JavaScript应用程序的心脏，它包含交互式数据以及围绕它的大部分逻辑。
集合： Underscore的集合代理，以提供用于处理数据的列表功能。
视图：骨干视图用于反映应用程序的数据模型。 它们还用于侦听事件并做出相应的React。
模板：模板本质上是标记的一部分，用于创建该标记的一堆不同的可重用副本，但用不同的数据填充每个组件。
查看事件：事件是可以混入任何对象的模块，使该对象能够绑定和触发自定义命名事件。
在后面的文章中，我们将详细介绍Backbone功能。 所以请寻找相同的。
翻译自: https://www.javacodegeeks.com/2014/04/introduction-to-backbone-js.html
backbone.js