在Web开发中，Backbone.js是一个流行的JavaScript库，用来构建单页应用程序。它为开发者提供了一套模型(Model)、视图(View)、集合(Collection)和路由器(Router)的框架，帮助组织代码结构，并与后端数据进行交互。本文详细描述了如何创建一个简单的Backbone.js的Hello World程序实例，包括前后端代码和框架配置。
我们需要搭建后端服务以提供数据支持。文章提到创建了一个名为api.php的文件，这个文件会返回一个JSON格式的响应。在这个例子中，后端PHP脚本只是简单地返回了一个包含名字的数组，并将其编码为JSON格式。这段PHP代码如下所示：
```php
header('Content-Type:application/json;charset=utf-8');
die(json_encode(array('name'=>'tom')));
```
然后是前端HTML文件，它引入了jQuery、Underscore.js、Backbone.js、Mustache.js等依赖库，以及一个自定义的JavaScript文件。在HTML中定义了一个名为hello-container-template的脚本标签，这个标签用来放置Mustache模板。HTML结构如下：
```html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>New Document</title>
<script type="text/javascript" src="./jquery.min.js"></script>
<script type="text/javascript" src="./underscore.min.js"></script>
<script type="text/javascript" src="./backbone.min.js"></script>
<script type="text/javascript" src="./mustache.min.js"></script>
<script type="text/javascript" src="./custom.js"></script>
</head>
<body>
<p>
<script id="hello-container-template" type="text/template"></p>
<p>
<div>{{name}} says: {{message}}</div>
</p>
<p>
</script>
</p>
</body>
</html>
```
custom.js文件是核心实现部分，它定义了Backbone.js应用程序的模型(Model)、视图(View)、控制器(Controller)和集合(Collection)，以及程序的初始化逻辑。以下是这部分的主要实现步骤：
1. 定义了一个全局应用程序类App，用来管理所有的模型、视图、控制器和集合。这个类中的initialize方法用于启动程序。
```javascript
var App = {
Models: {},
Views: {},
Controllers: {},
Collections: {},
initialize: function() {
new App.Controllers.Routes();
Backbone.history.start(); // 必须调用以驱动Backbone程序。
}
};
```
2. 创建了一个Hello模型，继承自Backbone.Model，并指定了模型获取数据的后端URL。同时，初始化时设置了message字段的值。
```javascript
App.Models.Hello = Backbone.Model.extend({
url: function() {
return '/api.php'; // 后端数据地址。
},
initialize: function() {
this.set({ 'message': 'helloworld' }); // 前端定义message字段。
}
});
```
3. 定义了Hello视图，继承自Backbone.View。视图使用了Mustache模板来渲染模型数据，并在模型发生变化时重新渲染视图。
```javascript
App.Views.Hello = Backbone.View.extend({
el: $("body"),
template: $("#hello-container-template").html(),
initialize: function(options) {
this.options = options;
this.bind('change', this.render);
this.model = this.options.model;
},
render: function() {
$(this.el).html(Mustache.to_html($(this.el).template, this.model.toJSON()));
return this;
}
});
```
4. 定义了路由控制器App.Controllers.Routes，使用Backbone.history来处理特定URL路径的逻辑。这里的路由被定义为"!/hello"，当访问这个路径时，会触发hello函数。
```javascript
App.Controllers.Routes = Backbone.Controller.extend({
routes: {
"!/hello": "hello"
},
hello: function() {
// 新建一个模型实例并从后端获取更新。
var helloModel = new App.Models.Hello;
helloModel.fetch({
success: function(model) {
// 基于获取的模型数据渲染新页面。
}
});
}
});
```
当Backbone.history.start()被调用后，如果地址栏是"#!/hello"，那么Backbone.js会请求后端API（/api.php），获取数据，更新到Hello模型，并通过Mustache模板渲染到页面上，从而显示出"tom says: helloworld"的内容。
整个Hello World程序实例演示了Backbone.js的最小实现方式，让开发者能够快速理解Backbone.js核心组件如何协同工作以及如何使用Backbone.js构建基本的单页应用。在这个实例中，使用了Mustache作为模板引擎，但在实际开发中，也可以选择其他模板引擎，比如Handlebars或者Underscore模板等。通过这个实例，开发者可以掌握Backbone.js的基本使用方法，并为构建更复杂的Web应用程序打下基础。
