什么是主干网？Backbone.js是十大js框架之首。Backbone.js是一个重量级的js MVC应用框架，是js MVC框架的鼻祖。它通过Models数据模型进行键值绑定和自定义事件处理，通过model Collections提供一套丰富的枚举函数API，通过Views进行事件处理，通过JSON接口与现有Application进行交互。

简而言之，主干是一个在web前端实现MVC模式的js库。

什么是MVC？MVC:后端服务器首先(流程1)通过浏览器获取页面地址，解析网站得到view给它的一个网站，然后控制器解析，然后找到对应的数据(流程2)，找到数据后将数据Model返回给控制器(流程3)，然后控制器对数据进行处理，最后返回给View(流程4)，即更新View视图。这种结构非常清晰，易于在后端实现。

主干中的MVC机制将数据呈现为模型，您可以创建一个模型，验证并销毁它，甚至将其保存到服务器。当用户界面的改变导致模型的属性改变时，模型将触发“改变”事件。显示模型数据的所有视图都将收到此事件的通知，然后视图将被重新呈现。您不需要查找DOM来搜索具有指定id的元素来手动更新HTML。当模型改变时，视图将自动改变。3354-百度百科。

模式：解决问题的一般方法。

-设计模式：工厂模式、适配器模式和观察者模式-框架模式：MVC、MVC、MVVM控制器：通过控制器连接视图和模型。

MVC模式的思想：

也就是把Model和view分离，通过控制器把它们连接起来，服务器端的MVC模式非常容易实现模型：模型就是数据，模型是所有js应用的核心，包括交互数据和大量相关的逻辑：转换、验证、属性的计算和访问控制。您可以扩展主干网。以特定的方式建模。

视图：您可以在页面上看到的视图。每个数据模型对应一个视图。

网页本身就是一个大视图，不容易分离。backbone.js适合复杂的大规模开发，已经为我们解决了这些问题。

主干模块包括以下模块：

事件：事件驱动模块Model:数据模型Collection:模型聚合器Router: router(对应哈希值)History:开启历史管理Sync:同步服务器模式View: view(包括事件行为和与渲染页面相关的方法)聚合器Collection是为了统一控制各个数据模型。

主干对象的直接创建依赖于下划线，DOM处理依赖于主干。查看和jQuery。所以在介绍Backbone.js之前，一定要先介绍一下下划线. js，还要和jQuery一起介绍，最后就是Backbone.js。

head lang=' en ' meta charset=' UTF-8 ' title/title script src=' jquery-2 . 0 . 3 . min . js '/script script src='下划线-min . js '/script script src=' Backbone . js '/script/head dy var model=new Backbone。model()；var col=新主干。集合()；var view=新主干。view()；/bodynew后面跟一个构造函数，主干用作构造函数的命名空间。

模型模块

主干.模型.扩展(属性，[类属性])主干通过扩展扩展实例方法和静态方法：

脚本类型=' text/JavaScript '/extend收到的第一个参数是json格式的字符串，用于扩展实例方法。//第二个参数也是json格式的字符串，用于扩展静态方法var m=backbone . model . extend({ ABC 3360 function(){//instance method alert(' hello backbone ')；} }，{ def : function(){ //static方法alert(' hi ')；} });var模型=新M；model . ABC()；//实例方法应该使用实例对象来访问m . def()；//静态方法直接挂载在构造函数上，/script静态方法可以通过构造函数直接访问。事实上，它们还有一个命名空间。上面是给构造函数添加实例方法和静态方法。

M=主干. model.extend ({})通过extend为模型的构造函数扩展方法，m为扩展后的构造函数。

继承

脚本类型=' text/JavaScript '//inherits varmod=backbone . model . extend({ ABC 3360 function(){ alert(123)；} });var child mod=Mod . extend()；var模型=new ChildModmodel . ABC()；//子类继承父类的方法/scriptback的源代码结构。

1:(函数(){ 0

23360backbone.events//custom事件。

:主干。模型//模型构造器和原型扩展。

43360主干。集合//集合构造函数和原型扩展。

53360主干。路由器//路由配置器构造器和原型扩展。

63360backbone.history//Router构造器和原型扩展。

73360Backbone.view//View构造器和原型扩展。

83360backbone.sync//Asynchronous要求工具法。

93360VAR EXTEND=函数(原型道具，类道具){ 0.}//自扩展功能。

10:主干网。Model.extend=主干。Collection.extend=主干。Router.extend=主干。View.extend=extend//自扩展方法

11: }).叫(这个)；js责任划分的m模型。

业务模型：业务逻辑、流程、状态、规则(核心)数据模型：业务数据、数据验证、添加、删除和修改(AJAX)V视图。

(核心)视图：定义、管理和配置模板：定义、配置和管理组件：定义、配置、管理(核心)用户事件配置、管理用户输入验证、配置和管理C控制器/分配器。

(核心)事件分发、模型分发、视图分发不做数据处理和业务处理，即业务无关的扩展：权限控制、异常处理等。c是JSMVC框架的核心，实现了集中配置和管理，可以有多个控制器工具库。

主要是异步请求、DOM操作，并且可以依赖jQuery等。

模型指的是一条数据，而集合指的是管理模型中的多条数据。

模型我们使用主干网。模型来表示应用程序中的所有数据，模型中的数据可以被创建、验证、销毁并保存到服务器。

对象分配方法1。直接定义并设置默认值。

Trigkit=主干。model . extend({ initialize : function(){ alert(' hi！');}，defaults:{ age : '22 '，professional : ' coder ' } })；var coder=新的Trigkitalert(coder . get(' age ')；//222，赋值时定义。

脚本类型=' text/JavaScript ' Triggit=主干。model . extend({ initialize : function(){ alert(' hi！');} });var t=新Trigkitt . set({姓名：'huang，年龄： ' 10 ' })；alert(t . get(' name '))；/script对象中的方法。

脚本类型=' text/JavaScript ' src=' Http :下划线. js '/script script type=' text/JavaScript ' src=' Http :主干-1 . 1 . 2 . js '/script script type=' text/JavaScript ' var triggit 4=主干。model . extend({ initialize : function(){ alert(' hello world！');}，默认值： {name:' zhangshan '，age: 21}，关于me: function () {return '我的名字是' this.get('name ')'，而今年是' this . get(' age ')' old '；} });var t=new Trigkit4alert(t . about me())；/script当模型被实例化时，他的initialize方法可以接受任何实例参数，而它的工作原理是主干模型本身就是一个构造函数，所以可以使用new来生成一个实例：

定义变量用户=骨干模型. extend({ initialize:函数（名称){这个。set({ name : name })；}});定义变量用户=新用户(“触发套件4”)；alert(user.get('name ')，' trig kit 4 ')；//triggit 4看下毅力的源码：

定义变量模型=主干模型=函数(属性，选项){ var attrs=attributes | | { }；选项||(选项={ });this.cid=_ .uniqueId(' c ')；这个。属性={ }；if(选项。收藏)这个。集合=选项。收藏；if(选项。解析)attrs=this。解析(属性，选项)| | { }；attrs=_ .默认值({}，attrs，_ .结果（这是"默认值");这个。set(attr，options)；这个。已更改={ }；this.initialize.apply(这个，参数);};initialize:函数(){}，//初始化是默认的空函数模型的事件绑定为了能及时更新查看，我们需要通过事件绑定机制来处理和响应用户事件：

脚本类型='文本/javascript' var Task=主干模型。extend({ initialize : function(){ this。on('更改：名称'，函数(模型){ alert('我的名字是： '型号。get(' name '))))；});} });var Task=新任务({ name : '旧名称'，state : ' work ' })；任务。set({ name : ' trig kit ' })；//object.on(事件、回调、[上下文)/剧本/头部关于事件绑定，有开，关，触发，一次，列表，停止列表，列表一次等方法，具体参照：http://文档云。github。io/主干/#事件

集合CollectionBackbone .募捐就是一个模型对象的有序集合。因为模型是一条数据记录，也就是说收藏相当于是一个数据集。具有增加元素，删除元素，获取长度，排序，比较等一系列工具方法，说白了就是一个保存模型的集合类。

脚本类型='text/javascript' var Book=主干模型。extend({ defaults : { title : ' default ' })，initialize : function(){ alert(' hello backbone！');//弹出3次} });书架=主干收藏。扩展({型号： Book })；var Book 1=新书({ title : ' Book 1 ' })；var Book 2=新书({ title : ' Book 2 ' })；var Book 3=新书({ title : ' Book 3 ' })；//var书架=新书架([第一册，第二册，第三册])；//注意这里面是数组，或者使用添加定义变量书架=新书架；书架。添加(第1册)；书架。添加(第二册)；书架。添加(第三册)；书架。移除(第三册)；//基于强调这个射流研究…库，还可以使用每个的方法获取募捐中的数据书架。每个（函数（书){ alert(book。get(' title ')；});/scriptcollection.model覆盖此属性来指定集合中包含的模型类。可以传入原始属性对象（和数组)来添加、创建，和重置，传入的属性会被自动转换为适合的模型类型。

视图视图主干。视角中可以绑定数字正射影像图元素和客户端事件。页面中的超文本标记语言就是通过视图的提出方法渲染出来的，当新建一个视角的时候通过要传进一个模型作为数据

查看$el:一个视图元素的缓存jQuery对象。一个简单的引用，而不是重新包装的数字正射影像图元素。一个简单的视图：

head meta charset=' UTF-8 ' title document/title script type=' text/JavaScript ' src=' http : jquery-1 . 9 . 1 . min . js '/script script type=' text/JavaScript ' src=' http :下划线. js '/script script type=' text/JavaScript ' src=' http :主干-1 . 1 . 2 . js '/script script type=' text/JavaScript ' var test}，render:函数(){//呈现此方法。$ El . html(' Hello World ')；//this.el是html节点，返回这个的内容是通过jQuery的HTML方法填充的；} });$(function(){ var test=new TestView({ El : $(' # body ')})；//以目标节点为el参数，创建一个view的实例，会自动调用render函数，并将渲染结果填入El//test . render()；//如果在initialize中没有调用render，则需要在这里调用一次})；/script/head dydiv id=' body '/div/body elview . el所有视图都有一个DOM元素(El属性)，即使该元素尚未插入到页面中。视图可以随时渲染，然后一次性插入到DOM中，可以最大限度减少回流和重画，获得高性能的UI渲染。这个. el可以从视图的标记名、类名、id和属性中创建。如果没有指定，el将是一个空div。-官方网站。

扩展方法扩展模型、集合、视图和路由器都有一个扩展方法，用于扩展原型属性和静态属性，创建用户自定义的模型、集合、视图和路由器类。

骨气。Model . extendback . model . extend(properties，[classProperties])要创建自己的模型类，可以扩展主干. model，并提供实例属性和可选的类属性，这些属性可以直接注册到构造函数中。

backbone . view . extend backbone . view . extend(properties，[classproperties])开始创建自定义视图类。通常，我们需要重载render函数，声明事件，并通过标记名、类名或id指定视图的根元素。骨气。视图将视图的渲染功能绑定到模型的“更改”事件——模型数据将立即显示在用户界面中。

骨气。collection . extend Backbone.Collection . extend(properties，[classproperties])通过扩展backbone . collection创建一个集合类.实例属性参数属性和类属性参数类属性直接注册到集合的构造函数中。

backbone . router . extend backbone . router . extend(properties，[classproperties])开始创建自定义路由类。当URL片段匹配时，执行定义的动作，并且可以通过路由定义路由动作的键值对。

在主干网0.5之前，路由器和控制器被称为路由器。

骨气。路由器为客户端路由提供了许多方法，并且可以连接到指定的动作和事件。在页面加载过程中，当应用程序创建了所有路由后，它需要调用Backbone.history.start()。

请参见以下示例：

脚本类型=' text/JavaScript ' var AppRouter=主干。router . extend({ routes : { ' index ' : ' index '，' task/:id': 'task '，' *acts': 'tasklist' }，index : function(){ alert(' index ')；}，tasklist:函数(动作){ alert(动作)；}，task:函数(id){ alert(id)；} });var app=new AppRouter主干. history . start()；/script在浏览器中打开页面后，在url的html后面依次添加以下内容：

#/index#/task/1#/test/xxxx会分别弹出：index，1，test/xxxx。

这就是路由器的功能。