BackboneJS and UnderscoreJS
介绍 来自API(backbone能做什么?)
当我们开发含有大量Javascript的web应用程序时,首先你需要做的事情之一便是停止向DOM对象附加数据。
通过复杂多变的jQuery选择符和回调函数很容易创建Javascript应用程序,包括在HTML UI,Javascript逻辑和数据之间保持同步,都不复杂。
但对富客户端应用来说,良好的架构通常是有很多益处的。
通过Backbone,你可以将数据呈现为 Models, 你可以对模型进行创建,验证和销毁,以及将它保存到服务器。
任何时候只要UI事件引起模型内的属性变化,模型会触发"change"事件;
所有显示模型数据的 Views 会接收到该事件的通知,继而视图重新渲染。 你无需查找DOM来搜索指定id的元素去手动更新HTML。
— 当模型改变了,视图便会自动变化。
某种意义上说,在用javaScript来创建web项目时,Backbone试图定义一组最小而高效的集合,
包括了数据结构(models(模型) 和 collections(集合))和用户接口(views(视图) 和 URLS)。
在web开发环境里,到处都是框架(帮你写好了一切),不过这些库需要你的网站在构建的时候符合该框架的样子,风格,默认的行为。
但是,Backbone还是作为一个工具,让你可以随心所欲的设计你的网站。
Why Backbone ? 说实话我也不知道为什么想去研究它。选择有很多 Angular,React,Vue,Ember,Knockout,Spine,Meteor等等。。。
况且Backbone已经在web混了很久了。如果真的需要一个理由:可能是因为它短小精悍的身材被吸引吧!(手动滑稽)
By the way 我现在手头上有一本书 : 『Backbone.js Cookbook』-Vadim Mirgorod(乌克兰)
磨叽半天 让我们开始吧!哈哈
首先引用 ,这里就用传统方法来认识吧:
...
<div id="hello"></div>
<div id="renderHere"></div>
<script src="js/main.js"></script>
...
此处太懒了 没写在文档加载完成函数里 直接放在文档底部啦...
main.js =>
/**
* 模块声明方式
*/
var InvoiceModel = Backbone.Model.extend({
default: {
price: 0,
quantity: 0
},
calculateAmount: function() {
return this.get('price') * this.get('quantity');
}
})
赋值 =>
var invoiceItemModel = new InvoiceModel({
price: 2,
quantity: 3
})
创建视图 =>
/**
* 视图View
*/
var PreviewInvoiceItemModel = Backbone.View.extend({
temlate: _.template('\
price : <%= price %>.\
quantity : <%= quantity %>.\
Amount : <%= amount %> .\
'),
render: function() {
var html = this.temlate({
price: this.model.get('price'),
quantity: this.model.get('quantity'),
amount: this.model.calculateAmount()
})
$(this.el).html(html);
}
})
这里用到了underscore里面的模板方法 更多详情移步API 中文版 英文版。
视图引用模块 =>
var previewInvoiceItemModel = new PreviewInvoiceItemModel({
model: invoiceItemModel,
el: '#renderHere' })
渲染 =>
previewInvoiceItemModel.render();
或者
var invoiceItemModel2 = new InvoiceModel();
invoiceItemModel2.set({ price: 10, quantity: 20 });
var previewInvoiceItemModel2 = new PreviewInvoiceItemModel({
model: invoiceItemModel2,
el: '#renderHere'
})
previewInvoiceItemModel2.render();
输出内容为:(此处假装在页面上^_^)
BackboneJS and UnderscoreJS的更多相关文章
- 使用requireJS,backboneJS,和underscoreJS完成自定义模板封装
使用requireJS,backboneJS,和underscoreJS完成自定义模板封装 原来的代码 当我们进行一个列表的数据填充的时候,是这样做的: //获取美食列表 function getFo ...
- backbonejs mvc框架的增删查改实例
一:开发环境 coffeescript和nodejs需要先安装,没装网上自己查安装步骤. 代码编写环境及esp框架下载: esp框架下载地址:https://github.com/nonocast/e ...
- 《BackboneJS框架的技巧及模式》(4)完结篇
<BackboneJS框架的技巧及模式>(4)完结篇 本文紧接第二部分:<BackboneJS框架的技巧及模式(3)> 作者:chszs,转载需注明.博客主页:http://b ...
- 不学就吃亏的underscorejs类库学习示例 ——(集合篇)
underscorejs是一个很不错的类库,我的很多项目都引用了这个类库,的确可以带来很多方便. 记得我当初学的时候,看underscorejs的api是看的一知半解的,甚至不明白api里的conte ...
- 《BackboneJS框架的技巧及模式》(2)
<BackboneJS框架的技巧及模式>(2) 本文紧接第一部分:<BackboneJS框架的技巧及模式(1)> 作者:chszs,转载需注明.博客主页:http://blog ...
- backbonejs mvc框架
backbonejs mvc框架的增删查改实例 一:开发环境 coffeescript和nodejs需要先安装,没装网上自己查安装步骤. 代码编写环境及esp框架下载: esp框架下载地址:https ...
- BackboneJS 源码注释
Backbone 作者在源码中做了很好的注释,这里只是锦上添花,补充一些个人的理解而已. // Backbone.js 1.2.3 // (c) 2010-2015 Jeremy Ashkenas, ...
- 三大JavaScript框架对比——AngularJS、BackboneJS和EmberJS
<三大JavaScript框架对比——AngularJS.BackboneJS和EmberJS> 本文转载自 作者:chszs,博客主页:http://blog.csdn.net/chs ...
- underscorejs 源码走读笔记
Underscore 简介 Underscore 是一个JavaScript实用库,提供了类似Prototype.js的一些功能,但是没有继承任何JavaScript内置对象.它弥补了部分jQuery ...
随机推荐
- GNS3配置SecureCRT
C:\SecureCRT\SecureCRT.exe /script D:\GNS3\DyRouter.vbs /T /telnet 127.0.0.1 %p "D:\Program Fil ...
- Java设计模式—单例设计模式(Singleton Pattern)全然解析
转载请注明出处:http://blog.csdn.net/dmk877/article/details/50311791 相信大家都知道设计模式,听的最多的也应该是单例设计模式,这种模式也是在开发中用 ...
- C++中使用Json的方法
使用 C++ 处理 JSON 数据交换格式 一.摘要 JSON 的全称为:JavaScript Object Notation,顾名思义,JSON 是用于标记 Javascript 对象的,JSON官 ...
- UVA 1397 - The Teacher's Side of Math(高斯消元)
UVA 1397 - The Teacher's Side of Math 题目链接 题意:给定一个x=a1/m+b1/n.求原方程组 思路:因为m*n最多20,全部最高项仅仅有20.然后能够把每一个 ...
- 2016/1/14 java随机数生成
1.Math库里的static(静态)方法random() 该方法的作用是产生0到1之间(包括0,但不包括1)的一个double值. double rand = Math.random(); 2.通过 ...
- 【bzoj4590】[Shoi2015]自动刷题机
因为解一定是单调的,n越小切的题越多,这是可以肯定的,那么直接二分答案 #include<algorithm> #include<iostream> #include<c ...
- 加密散列算法——SHA-1
与MD5算法类似,SHA-1算法也是在接收到消息后产生消息摘要,能够用来验证数据的完整性. 不同的是SHA1会产生一个160位的消息摘要(MD5产生的是128位). 其它的性质之类的不多说(请參考前面 ...
- 学习MAP 地图好地址
http://www.cnblogs.com/beniao/archive/2010/01/13/1646446.html Bēniaǒ成长笔记在IT江湖里我不是一名老手,我只是一名普通的程序员,愿意 ...
- 【POJ 1330】 Nearest Common Ancestors
[题目链接] 点击打开链接 [算法] 倍增法求最近公共祖先 [代码] #include <algorithm> #include <bitset> #include <c ...
- CodeFirst建模:DataAnotation
示例一 新建一个控制台应用程序,并安装entityframework 新建一个文件Blog.cs类,输入以下代码: using System.ComponentModel.DataAnnotation ...