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(乌克兰)
磨叽半天 让我们开始吧!哈哈
首先引用 ,这里就用传统方法来认识吧:
1 ... 2 <div id="hello"></div> 3 <div id="renderHere"></div> 4 <script src="js/main.js"></script> 5 ...
此处太懒了 没写在文档加载完成函数里 直接放在文档底部啦...
main.js =>
1 /** 2 * 模块声明方式 3 */ 6 var InvoiceModel = Backbone.Model.extend({ 7 default: { 8 price: 0, 9 quantity: 0 10 }, 11 calculateAmount: function() { 12 return this.get('price') * this.get('quantity'); 13 } 14 })
赋值 =>
var invoiceItemModel = new InvoiceModel({ price: 2, quantity: 3 })
创建视图 =>
1 /** 2 * 视图View 3 */ 4 var PreviewInvoiceItemModel = Backbone.View.extend({ 5 temlate: _.template('\ 6 price : <%= price %>.\ 7 quantity : <%= quantity %>.\ 8 Amount : <%= amount %> .\ 9 '), 10 render: function() { 11 var html = this.temlate({ 12 price: this.model.get('price'), 13 quantity: this.model.get('quantity'), 14 amount: this.model.calculateAmount() 15 }) 16 $(this.el).html(html); 17 } 18 })
这里用到了underscore里面的模板方法 更多详情移步API 中文版 英文版。
视图引用模块 =>
1 var previewInvoiceItemModel = new PreviewInvoiceItemModel({ 2 model: invoiceItemModel, 3 el: '#renderHere'4 })
渲染 =>
1 previewInvoiceItemModel.render();
或者
1 var invoiceItemModel2 = new InvoiceModel(); 2 invoiceItemModel2.set({ price: 10, quantity: 20 }); 3 var previewInvoiceItemModel2 = new PreviewInvoiceItemModel({ 4 model: invoiceItemModel2, 5 el: '#renderHere' 6 }) 7 previewInvoiceItemModel2.render();
输出内容为:(此处假装在页面上^_^)