【转载】为何转向Spine.js的十个理由

标签: HTML5 技术博文 HTML5学习资源 | 发表时间:2012-07-25 12:15 | 作者:HTML5研究小组
出处:http://www.mhtml5.com

在过去的几年里,我逐渐将兴趣由桌面转移到web上。我对于能在任何设备上用浏览器访问的app的这种方式很是着迷。我有用过HTML,CSS,Flash和PHP的经验,所以我很熟悉这一领域–但是我只曾做过网站,而不是web app。我开始深入了解Rails,并立刻爱上了它,我所熟知的Flash的快速反应被替换成了页面加载。因此,我转向了Javascript。

就像学校新来的小孩,关于框架我分不清谁是谁。我寻找着,发觉  Backbone.js 几乎在每个地方都能见着,于是我便假定他是个标准。几个月后,我发现它不是为我准备的– Backbone.js 缺乏清晰的使用方向。每个我阅读过的教程都使用着不同的结构,这感觉太容易忽视常规有效的设计模式。

开始学习  Spine.js ,我花了一个晚上通读了用户手册以及试验它的示例app,我看到的一切看起来都挺好。那一晚,我是带着灿烂睡觉的,即使我真的很难入眠,因为我等不急想使用它了。什么让我如此兴奋呢?就是下面的这是个理由:

1、清晰的结构

Spine.js 遵循MVC模式,我写的所有应用都遵循着MVC架构,所以我很快就知道该怎么用Spine.js组织我的应用结构。这种似曾相识的感觉太棒了。这使得哪个类在干什么,哪个类是激活的清晰明了。

2、模型就是模型

Backbone.js也有模型,但是它很笨拙,因为有些集合–本质上是模型数组,它们能查询API并用结果给自己赋值。Spine.js模型跟Rails模型非常相似。一个模型能够被实例化用来呈现记录,但是它也拥有类级别的方法从API中取出结果。这些方法返回结果而不是产生一个数组,所以我们不需要考虑类在何处活跃。因为集合是实例,我看到过的许多示例中都把它们看作单例。结果,那些学习Backbone.js并跟随着那些示例的人也学会了写着不可测的代码。

3、Spine.app

当使用Backbone.js时,我发现每次创建新类时我都会拷贝/粘贴代码,我开始想念在Rails时我习惯的生成器了。只需一条命令,我就能基于模版生成一个带有spec的新类,这为我节约了了几年开发的生命。“开发Backbone.js生成器”持续停留在我的todo列表,但是我从未着手于此。

Spine.app 生成文件,只需一行,我就创建了一个新类并带有spec,就像Rails一样。

4、动态记录

这个就想疯狂的黑魔法一样,但是它解决了一个我在Backbone.js遇到的问题。假设你应用的一个视图获得了一条记录。然后你在不同的视图获取并更新了同一条记录。在 Spine.js 中,两条记录都将同时更新。你不用担心保持他们同步。当我读到这一条时,我便为之感动了。

5、元素Hash

使用Backbone.js时,我总是发现我手动地分配变量用来在每个视图的渲染方法中嵌入元素,为每个元素重复相同的代码–有很多的样板文件。在Spine.js中,它拥有元素hash,key是选择器,值则是变量名,正如Backbone.js事件hash一样,你所有的元素都会被映射,这样清晰而简洁。

6、方法更新

在我使用Flash的日子,优化是生存的关键。如果我忘记移除某个事件监听器,我的app将会内存溢出,就像一个少于维护的应用。就因为这个,我在每个类中都包含了一个方法用来注销和移除所有的事件监听器。而Spine.js内建有这个功能。

7、控制器中的路由

Spine.js中没有Router类,这个功能属于控制器类的一部分。在任何控制器中,我能导航至新的位置,并对新位置做出反应。其他的控制器也同样能对这个新位置作出反应。现在就没必要创建一个路由单例了。

8、模型适配器

默认情况下,Spine.js 把模型保存在内存中,但是有两个适配器可以被应用到任何的模型类上–Ajax和Local。只需简单的继承这些适配器,你的数据将可以在远端数据库存留或者是使用HTML5本地存储API。所有这些功能仅需一行代码。

9、从HTML元素中获取模型

这是我在Backbone.js遇到的另一个问题,我会实例化一个视图并绑定到一个模型,当我需要不通过访问视图实例来引用数据时,我就没那么幸运了。Spine.js提供了一个jQuery插件来访问元素的模型。仅需在元素上调用data方法你变获取了对应模型。

10、日志

Spine.js 生来就具备着一个轻量级的方便日志模块。你可以在任何控制器中调用log方法,它将会加上一系列前缀并输出到console。

原文链接 ,  OSChina.NET原创翻译

 

相关 [spine js] 推荐:

WebView JS 交互

- - ITeye博客
WebView加jquery做页面会怎么样呢. // 创建WebView对象. // 把programList添加到js的全局对象window中,. // 这样就可以使用window.programList来获取数据. * 定义js回调java函数. // 绑定键盘的向上,向下按钮事件触发相应的js事件.

JS游戏引擎

- 米随随 - HTML5研究小组
If you don’t have anything better to do and want to help fellow redditors interested in JS game dev out, feel free to fork the list and modify it as you like.

來源請求.js

- 红烧鲤鱼 - Blog: timdream
很早以前就想講了,但講了大概又會被戰. 相較於英文維基百科,中文維基百科在社會和歷史條目充滿了 systemic bias. 但是那些主觀論述又不是編輯者有意加進去的,而是某種編輯者存在的社會所給予的暗示(Inception?)與集體共識,而不是原本百科全書應該有的可驗證的事實. 因為是暗示又是共識,所以有自覺的百科編輯者反而是少數;中文維基只好長成現在這個樣子了.

Js删除节点

- - JavaScript - Web前端 - ITeye博客
 方式一:传this参数调用方法:.  方式二:js方法中通过选择器获取节点:. //此处删除的是a节点 }. 方式三:通过jQuery方式获取节点:(尚未测试,有待测试. 此处a标签传this到js中,js通过this(即a节点)取parent(即p节点). (1)p.remove();可直接删除整个p节点.

JS游戏引擎列表

- sku - 酷壳 - CoolShell.cn
这里有一个网址收集了关于JS游戏引擎开发库的一个列表,转过来. 关于使用JS和HTML5做的一些小游戏,可参见《HTML5 小游戏展示》. Name Latest Release License Type Notes The Render Engine 1.5.3 MIT 跨浏览器; 大规模 API; 开源. 2 gameQuery 0.5.1 CC BY-SA 2.5 和 jQuery 一起使用 gTile 0.0.1 Tile based.

Deck JS: HTML5 幻灯片

- L - LinuxTOY
Deck.js 是一组开源的 JavaScript 类库,方便使用现代的 HTML5/CSS3/JS 技术创建幻灯片. 该软件十分适用于开源项目介绍,交互式的方式比单纯的文字说明更简洁易懂. 不废话了,赶紧前往该项目主页去体验 HTML5 时代的幻灯片吧. 分类: Productivity |. 收藏到 del.icio.us |.

JS三维模型库 Three.js

- Le - 开源中国社区最新软件
Three.js 是一款运行在浏览器中的 3D 引擎,你可以用它创建各种三维场景,包括了摄影机、光影、材质等各种对象. 你可以在它的主页上看到许多精采的演示. 不过,这款引擎目前还处在比较不成熟的开发阶段,其不够丰富的 API 以及匮乏的文档增加了初学者的学习难度(尤其是文档的匮乏) 演示:http://mrdoob.github.com/three.js/.

js Grid - 列表插件

- Bloger - 博客园-首页原创精华区
     js Grid - 列表插件.     1)Sponsor Flip Wall With jQuery & CSS一个非常不错的显示数据到网格里的插件. 点击后,缩略图会翻转,然后显示更多信息.      2)TableTree4J 是一个开源的基于javascript的树状菜单和表格控件,实用TableTree4J可以轻易实现带树状折叠效果的表格和树状折叠菜单.

Three js入门教程

- - 译言-电脑/网络/数码科技
译文来源: http://www.21haolou.com/articles/show/140. 我在自己的一些实验性项目中运用了 Three.js,它在处理浏览器3D效果方面表现优异. 通过Three js,你可以创建镜头(Cameras),物体(objects),光线(lights),材质(materials)等等,你还可以选择渲染器:可以使用HTML5的Canvas来绘制场景,也可选择使用WebGL或是SVG来渲染.

js对象深拷贝

- - ITeye博客
在做一个前台页面你的时候用到了一个自己写的List对象,在进行深拷贝的时候参考了网上的代码:. //对象扩展,tObj被扩展对象,sObj扩展对象. Object.extend(a,b);//a获得了b的所有属性. 我自己定义的list中没有定义constructor,所以执行sObj.constructor == Array会报错,我就修改为:.