【免费】Backbone.js的HelloWorld程序实例资源-CSDN文库

需积分: 0 99 浏览量更新于2020-10-24 收藏 39KB PDF 举报

在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应用程序打下基础。

资源推荐

资源评论