伴随着web端开发技术技术的飞速发展，各种SPA(Single Page Application)层出不穷，web前端的需求越来越多，我们不再是简单的使用jquery来完成绑定数据、交互特效。因此各种MVC、MVP、MVVM等前端框架层出不穷，从今天开始，我会向大家介绍一款前端MVC框架--Backbone.js。
本教程会着重介绍backbone中的一些常用方法和在项目中的实际应用，首先介绍一些backbone开发的配置。
Backbone依赖于underscore引擎，所以在使用backbone的时候我们首先要取得对underscore的引用，其代码层次如下：
整体上来说，Backbone是一个web端javascript的MVC框架，算是轻量级的框架。它能让你像写Java（后端）代码组织js代码，定义类，类的属性以及方法。更重要的是它能够优雅的把原本无逻辑的javascript代码进行组织，并且提供数据和逻辑相互分离的方法，减少代码开发过程中的数据和逻辑混乱。
不同于后端C#中的MVC(模型层、视图层、控制层)，Backbone中的MVC概念主要指的是模型层(model)、视图层(view)和集合层(collection)，我们在模型层完成模型属性的建立及校验；在视图层完成事件绑定和模型属性的set和get；当然backbone也有路由router的概念，路由主要控制不同在同一页面不同view的展示。
下面我们通过一个简单的hello world展示backbone的实例：
如上图，初次加载时，页面会显示hello world，当然，我们在文本框中输入文字并提交时，文本框中的文字会自动替换hello world。
1 var AppView = Backbone.View.extend({
2 el:$(‘body‘),
3 templates:{
4 "Tem":_.template($(‘#template‘).html())
5 },
6 initialize:function(){
7 var _this=this;
8 $(‘.text‘).html(_this.templates.Tem({data:"Hello World"}));
9 },
10 events:{
11 "click input[type=‘button‘]":"AddContent"
12 },
13 AddContent:function(){
14 var _this=this;
15 var text=$("input[type=‘text‘]").val();
16 $(‘.text‘).html(_this.templates.Tem({data:text}));
17 }
18 });
19 var appview=new AppView();
完整的demo代码如下：
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Document</title>
6 </head>
7 <body>
8 <input type="text">
9 <input type="button" value="按钮">
10 <h2 class="text"></h2>
11 <script type="text/template" id="template">
12 <span><%=data%></span>
13 </script>
14 <script type="text/javascript" src="js/jquery.js"></script>
15 <script type="text/javascript" src="js/underscore.js"></script>
16 <script type="text/javascript" src="js/backbone.js"></script>
17 </body>
18 </html>
19 <script type="text/javascript">
20 var AppView = Backbone.View.extend({
21 el:$(‘body‘),
22 templates:{
23 "Tem":_.template($(‘#template‘).html())
24 },
25 initialize:function(){
26 var _this=this;
27 $(‘.text‘).html(_this.templates.Tem({data:"Hello World"}));
28 },
29 events:{
30 "click input[type=‘button‘]":"AddContent"
31 },
32 AddContent:function(){
33 var _this=this;
34 var text=$("input[type=‘text‘]").val();
35 $(‘.text‘).html(_this.templates.Tem({data:text}));
36 }
37 });
38 var appview=new AppView();
39 </script>
时间： 2024-11-29 04:52:28