网站建设放什么科目,登录页面的html代码,教育网站建设平台,去国外网站开发客户中的contact us 没有邮箱1. 前言 本文的目的#xff0c;是帮助大家快速理解掌握Backbone的使用#xff0c;但它并不是API#xff0c;因此我不会将每一个方法都详细地描述#xff0c;但是我会告诉你如何学习它们。 这是一篇稍稍较长的技术文章#xff0c;因为我想将我所了解的东西尽可能详细地分享…1. 前言 本文的目的是帮助大家快速理解掌握Backbone的使用但它并不是API因此我不会将每一个方法都详细地描述但是我会告诉你如何学习它们。 这是一篇稍稍较长的技术文章因为我想将我所了解的东西尽可能详细地分享给大家。但它还不至于出版为一本书籍因为Backbone其实非常简单。当然这并不表示Backbone提供的功能有限相反它能用简单的实现构建出复杂的应用这正是Backbone的强大之处。 在正式学习Backbone之前你需要准备一些东西 首先你需要获取Backbone框架源文件http://documentcloud.github.com/backbone/ Backbone依赖于Underscore框架的基础方法因此你同时需要下载Underscore框架的源文件http://documentcloud.github.com/underscore/ 在Backbone中对DOM和事件的操作依赖于第三方库如jQuery或Zepto你只需要选择其中一个下载 jQueryhttp://jquery.com/ Zeptohttp://zeptojs.com/ 看起来好像挺麻烦的样子但Backbone的目的是在于使用简单的框架来构建复杂的应用因此麻烦并不表示它很复杂。 在后续章节我将详细介绍它们之间的关系和依赖但在此之前你可以新建一个HTML页面并将这些框架引入进来就像这样
[html] view plain copy
script typetext/javascript srcjquery/jquery-1.8.2.min.js/script script typetext/javascript srcunderscore/underscore-min.js/script script typetext/javascript srcbackbone/backbone-min.js/script 至此你已经准备好了运行Backbone必须的环境。
如果学习过程中有任何问题或者你有更好的建议欢迎联系我一起交流
2. 什么是Backbone? Backbone是一个轻量级的前端MVC框架用于结构化管理页面中的大量JS建立与服务器、视图间的无缝连接为构建复杂的应用提供基础框架。
下面我先简单地阐述下Backbone的主要特点及特性
2.1 轻量级 Backbone的源码只有1000行左右去注释和空行后文件大小只有16KB加上依赖库Underscore也仅有29KB。 你只需要花一点时间就能轻松了解Backbone内部实现或编写少量代码来重载Backbone的部分机制如果你想在Backbone的基础上做二次开发也并不是一件复杂的事情。
2.2 MVC结构化 Backbone可以轻松将页面中的数据、逻辑、视图解耦依照Backbone进行代码结构组织你可以将项目中的数据交互、业务逻辑、用户界面等工作分配给多个同事同时开发并能有序地组织到一起。同时这对于大型和复杂项目的维护开发非常有帮助。
2.3 继承机制 在Backbone中模块是可以被继承的你可以通过面向对象的方式将应用中的数据模型、集合、视图有序地组织让整个架构更加清晰也可以方便地重载和扩展自定义方法。
2.4 建立与服务器的无缝连接 在Backbone中内置了一套与服务器数据的交互规则如果你了解REST架构就能够轻松地理解它们而数据的同步工作会在Model中自动进行前端开发人员只需对客户端数据的进行操作Backbone会自动将操作的数据同步到服务器。 这是件非常有趣的事情因为服务器数据接口对前端开发者来说是透明的他们不需要再关心如何和服务器交互。 然而服务器提供的数据接口也需要兼容Backbone的规则对于一个新的项目来说我们可以尝试使用这套规则来构建接口。但如果你的项目中已经有一套稳定的接口你可能会担心接口改造的风险。 没关系我们可以通过重载Backbone.sync方法来适配现有的数据接口针对不同的客户端环境我们还可以实现不同的数据交互方式。例如用户通过PC浏览器使用服务时数据会实时同步到服务器而用户通过移动终端使用服务时考虑到网络环境问题我们可以先将数据同步到本地数据库在合适的时候再同步到服务器。而这些只需要你重载一个方法就可以实现。
2.5 界面事件管理 在MVC中我们希望能将界面展现和业务逻辑完全分离但对于用户产生的交互事件如单击事件我们却常常通过类似jQuery中的bind方法进行获取和绑定。 Backbone中的视图帮助我们将用户事件和执行方法有序的组织起来这只需要我们声明一个简单的表达式例如
[javascript] view plain copy
events: { // 单击id为”save”的元素时执行视图的add方法 click #save: add, mousedown .button: show, mouseover .button: hide }
在表达式中事件名称可以是任意的DOM事件如click、mouseover、keypress等元素可以是jQuery支持的任意选择器如标签选择器、id选择器、class选择器等。 视图会自动将表达式中的事件绑定到选择器元素当元素的事件被触发后视图会自动调用表达式中绑定的方法。
2.6 轻量级模板解析 模板解析是Underscore中提供的一个方法。为什么我要在介绍Backbone特性时引入Underscore中的方法因为该方法能帮助我们更好地分离视图结构和逻辑且Underscore是Backbone必须依赖的库。 模板解析方法能允许我们在HTML结构中混合嵌入JS代码就像在JSP页面中嵌入JAVA代码一样
[html] view plain copy
ul % for(var i 0; i len; i) { % li%data[i].title%/li % } % /li
通过模板解析我们不需要在动态生成HTML结构时拼接字符串更重要的是我们可以将视图中的HTML结构独立管理例如不同的状态可能会显示不同的HTML结构我们可以定义多个单独的模板文件按需加载和渲染即可。
2.7 自定义事件管理 在Backbone中你可以使用on或off方法绑定和移除自定义事件。在任何地方你都可以使用trigger方法触发这些绑定的事件所有绑定过该事件的方法都会被执行如
[javascript] view plain copy
var model new Backbone.Model(); // 在model对象中向自定义事件custom绑定两个函数 model.on(custom, function(p1, p2) { // todo }); model.on(custom, function(p1, p2) { // todo }); // 触发custom事件将调用上面绑定的两个函数 model.trigger(custom, value1, value2); // 移除custom事件中绑定的所有方法 model.off(custom); // 触发custom事件但不会执行任何函数已经事件中的函数已经在上一步被移除 model.trigger(custom);
如果你熟悉jQuery你会发现它们与jQuery中的bind、unbind和trigger方法非常类似。 另外Backbone支持一个特殊事件”all”当在一个对象中绑定了名为”all”的事件后该对象在触发任何事件时都会同时触发”all”事件中绑定的方法。有时这种方法会非常有用例如我们可以通过”all”事件监听对象状态的变化。
2.8 路由器 在单页应用中我们通过JavaScript来控制界面的切换和展现并通过AJAX从服务器获取数据。 可能产生的问题是当用户希望返回到上一步操作时他可能会习惯性地使用浏览器“返回”和“前进”按钮而结果却是整个页面都被切换了因为用户并不知道他正处于同一个页面中。 对于这个问题我们常常通过Hash锚点的方式来记录用户的当前位置并通过onhashchange事件来监听用户的“前进”和“返回”动作但我们发现一些低版本的浏览器例如IE6并不支持onhashchange事件。 Backbone提供了路由控制功能通过Backbone提供的路由器我们能通过一个简单的表达式将路由地址和事件函数绑定在一起例如
[javascript] view plain copy
var CustomRouter Backbone.Router.extend({ routes: { : index, // 当URL Hash在根目录时执行index方法url# list: getList, // 当URL Hash在list节点时执行getList方法url#list detail/:id: query, // 当URL Hash在detail节点时执行query方法并将detail后的数据作为参数传递给query方法url#list/1001 *error: showError // 当URL Hash不匹配以上规则时, 执行error方法 }, index: function() { alert(index); }, getList: function() { alert(getList); }, query: function(id) { alert(query id: id); }, showError: function(error) { alert(error hash: error); }, }); var custom new CustomRouter(); Backbone.history.start();
请尝试将这段代码复制到你的页面中并依次访问以下地址其中URL表示你的页面地址
URLURL#listURL#detail/1001URL#hash1URL#hash2请再试着使用浏览器的“返回”和“前进”按钮来回切换刚刚输入的地址。 你可以看到当URL Hash发生变化时会执行所绑定的方法当遇到没有定义的Hash时都会执行showError方法并将未定义的Hash传递给该方法。 Backbone默认会通过Hash的方式来记录地址的变化对于不支持onhashchange的低版本浏览器会通过setInterval心跳监听Hash的变化因此你不必担心浏览器的兼容性问题。 对于支持HTML5 pushState特性的浏览器Backbone还允许你通过pushState来创建个性化的URL但是这需要你的Web服务器做一些适配。 3. Backbone的适用性 Backbone并不像jQuery那样具有非常强的适用性如果你正准备构建一个大型或复杂的单页Web应用那么Backbone再适合不过。 如果想将Backbone应用到你的网站页面中且页面中并没有复杂的逻辑和结构那么这只会让你的页面更加繁琐和难以维护。 如果你的项目并不复杂但你却深深喜欢它的某个特性(可能是数据模型、视图管理或路由器)那么你可以将这部分源码从Backbone中抽取出来因为在Backbone中各模块间的依赖并不是很强你能轻易的获取并使用其中的某一个模块。 4. 依赖库 你不能独立使用Backbone因为它的基础函数、DOM操作、AJAX都依赖于第三方库。
4.1 Underscore 必选 Underscore是一个用于提高开发效率的基础函数库它封装了对集合、数组、对象、函数的常用操作就像jQuery封装DOM对象一样你能通过Underscore轻易地访问和操作JavaScript内部对象。 Underscore还提供了一些非常实用的函数方法如函数节流、模板解析等。 关于Underscore中一些主要的方法我会在下一章详细介绍但在此之前你必须了解Underscore是Backbone必须依赖的库因为在Backbone中许多实现都是基于Underscore。
4.2 jQuery和Zepto 可选 相信你对jQuery一定不会陌生它是一个跨浏览器的DOM和AJAX框架。 而对于Zepto你可以理解为“移动版的jQuery”因为它更小、更快、更适合在移动终端设备的浏览器上运行它与jQuery语法相同因此你能像使用jQuery那样使用它。 Zepto目前仅支持Webkit内核的浏览器因此它能兼容IOS、Adnroid、塞班、黑莓和Meego等大部分移动系统而对于Windows Phone或Firefox OS它暂时还不支持。 因为jQuery和Zepto语法相同因此对于Backbone来说你无论是使用jQuery还是Zepto都没有问题当然你不可能两个同时都用到。 在Backbone中DOM选择器、DOM事件和AJAX都使用了jQuery的方法。这里之所以所它们是可选的是假设你没有用到Backbone中的视图和AJAX数据同步功能那么就不需要导入它们。 如果你不想使用jQuery或Zepto而是使用其它的、或自定义库只要你的库中实现了与jQuery语法相同的DOM选择器、事件管理和AJAX方法那么就不会任何问题。
Backbone允许你通过setDomLibrary方法动态配置需要使用的第三方库这种情况常常用于 你的自定义库虽然包含了和jQuery相同语法的方法但全局变量并不是$而且你想保持现有的命名。这时你可以通过setDomLibrary方法将其设置为Backbone内部引用的对象。 你希望通过检查用户的环境来决定更适合使用哪一个库。例如如果用户使用PC浏览器访问则载入jQuery如果用户通过移动终端访问则载入Zepto。
