Sencha Touch 对比 Backbone.js [英] Sencha Touch Vs Backbone.js

问题描述

Sencha Touch 和 Backbone.js 的基本区别是什么，其实已经在backbone.js 中建了一个项目，但不知道 Sencha Touch.我必须构建一个 PhoneGap 应用程序，哪个更好?

What are the basic difference Sencha Touch and Backbone.js, actually have built a project in backbone.js but not aware of Sencha Touch. I have to built a PhoneGap application which one is better for that?

推荐答案

Sencha Touch(我们的产品)旨在成为一个多合一的应用程序框架，提供您创建精美应用程序所需的所有功能.一切都旨在在所有主要的移动浏览器上协同工作.这是一种结构清晰的面向对象的应用开发方法.

Sencha Touch (our product) is intended to be an all-in-one application framework that provides all the functionality you need to create great looking apps. Everything is designed to work all together on all the major mobile browsers. It's a cleanly architected object-oriented approach to developing apps.

作为一个一体化"框架，它为您提供了一整套与分辨率无关的 UI 小部件(轮播、列表、选项卡、工具栏等)、MVC 库、事件管理、实用程序库、动画、主题系统、对象生命周期管理、布局系统、绘图和图表库以及更多你无法动摇的东西......因为它们都是为了协同工作而设计的，初始学习更高，但是一旦你'在那里人们发誓它的生产力比其他任何东西都要高光年.

As an "all-in-one" framework, it gives you a full set of resolution-independent UI widgets (carousels, lists, tabs, toolbars, etc. etc.) an MVC library, event management, utility libraries, animation, a theming system, object lifecycle management, a layout system, a drawing and charting library and more stuff than you can shake a stick at... Because it's all designed to work together, the initial learning is higher, but once you're there people swear it's light-years more productive than anything else.

对比

Backbone.js，这是一个简单的 MVC 库.它大约有 1,000 行代码，并为您提供了 5 个类:

Backbone.js, which is a simple MVC library. It's about 1,000 lines of code and gives you 5 classes:

• 模型
• 查看
• 路由器
• 收藏
• 活动

它依赖于 underscore.js 的实用函数，所以你也需要它.您可能还需要使用单独的模板库以及 DOM 抽象/操作库，如 jQuery 或 jQuery Mobile，它们还有一些 UI 小部件和一堆其他库来构建完整的应用程序.但有些人更喜欢研究和手工策划他们的个人图书馆.

It has a dependency on underscore.js for utility functions, so you'll need that too. You will also probably need to use a separate templating library as well as a DOM abstraction/manipulation library like jQuery or jQuery Mobile which also has some UI widgets and a bunch of other libraries to build a full app. But some people prefer to research and hand-curate their individual libraries.

更新:我想添加更多细节来回应 Ben Bishop 在下面的回答.Aaron Conran，他是我们 Sencha 架构师的负责人和 Sencha lifer 帮助我解决了这个问题.

Update: I wanted to add more detail to repond to Ben Bishop's answer below. Aaron Conran, who's our Sencha Architect lead and a Sencha lifer has helped me out with this addition.

煎茶和骨干有一定的世界观差异.一般来说，Sencha 倾向于停留在 JS 世界，我们希望您的 JS 会生成您的 HTML 内容.另一方面，Backbone 是 HTML 和 JS 之间的混杂.虽然我们相信任何复杂性的数据驱动应用程序都可以通过 Sencha 方法更好地服务，但并没有简单而枯燥的理由使用其中之一.确定细节.

There is a definite world view difference between Sencha and backbone. In general, Sencha tends to stay in the JS world and we expect that your JS will generate your HTML content. Backbone on the other hand is kind of a mishmash between an HTML and JS. There's no cut and dry reason to using one or the other, although we believe that data-driven apps of any complexity are better served by the Sencha approach. Ok on to details.

首先是:类，Ben 在 JS 中声明类的示例将在对象的每个实例中放置每个属性和方法的副本.通常在原始 JavaScript 中工作，您希望将这些放在原型上，以便它们在 MyClass 类的实例之间共享.Sencha 类系统会自动为您执行此操作.

First off re: Classes, Ben's example of declaring a class in JS would put a copy of every property and method in every instance of the object. Typically working in raw JavaScript, you want to put these on the prototype so that they are shared across instances of the class MyClass. The Sencha class system does this automatically for you.

此外，在原始 JavaScript 中，用户必须正确理解原型继承，以便正确继承或混合特定类.Sencha 照顾这些，而您不必担心.

Additionally in raw JavaScript, users have to grok prototypical inheritance correctly in order to properly inherit from or mix in a particular class. Sencha takes care fo thsi without you having to worry.

就魔法字符串"而言(尽管我认为这是一个相当消极的表征)如果您在 4.x 中不喜欢它们，则不必使用它们，而可以使用 Ext.extend使用直接标识符(尽管从 4.0.0 开始正式弃用 http://docs.sencha.com/touch/2-1/#!/api/Ext-method-extend).

As far as "magic strings" go (although I'd argue that's a rather negative characterization) you don't have to use them if you don't like them in 4.x , instead you can use Ext.extend with direct identifiers (although this is officially deprecated since 4.0.0 http://docs.sencha.com/touch/2-1/#!/api/Ext-method-extend).

使用魔法字符串在几个方面很有用.

Using magic strings is useful in a few ways.

首先，我们可以少担心依赖顺序以及何时定义/扩展任何类.这在复杂的应用程序中很重要

First off we can worry less about dependency order and when any class is defined/extended from. This matters in complex apps

例如

Ext.define('Turtle', { extend: 'Animal' }); 
Ext.define('Animal', { });

之所以有效，是因为 Sencha 在定义 Turtle 类之前要等到定义了 Animal 类.

Works because Sencha waits until the Animal class is defined before defining the Turtle class.

相反:

Turtle = Ext.extend(Animal, {
});
Animal = Ext.extend({}, {
});

不起作用，因为我们找不到变量引用 Animal.

Does'nt work because we can't find the variable reference Animal.

其次，使用字符串意味着我们可以支持动态加载.例如，如果我们有

Second, using strings means we can support dynamic loading. For example if we have

Ext.define('MyApp.foo.MyClass', {
    extend: 'MyApp.foo.ParentClass'
});

如果你遵循严格的类名到 JS 文件夹约定，类加载器就知道在哪里加载类:

If you follow a strict class name to JS folder convention, the class loader knows where to load the class namely:

• MyApp.foo.MyClass 位于 app/foo/MyClass.js
• MyApp.foo.ParentClass 位于 app/foo/ParentClass.js

这个技巧让 Sencha 很容易做有用的事情:- 类管理器将自动创建适当的对象，而无需您创建 &管理命名空间- 确定任何类或实例的类名Ext.ClassManager.getName(myInstance) -> "MyApp.foo.MyClass"

This technique makes it easy for Sencha to do useful things: - The class manager will automatically create proper objects without you having to create & manage namespaces - Determine the classname of any class or instance Ext.ClassManager.getName(myInstance) -> "MyApp.foo.MyClass"

• 在定义特定类时执行一些操作

• Perform some action when a particular class is defined

Ext.ClassManager.onCreated(function() {}, 范围, 'MyApp.foo.MyClass');

Ext.ClassManager.onCreated(function() { }, scope, 'MyApp.foo.MyClass');

支持命名空间重写，例如如果你需要在同一个页面中同时运行同一组类的两个版本……你可以将 Sencha Touch 的Ext"顶级命名空间的命名空间重写为别的东西.

Support namespace rewriting, for example if you need to run two versions of the same set of classes concurrently in the same page... you can rewrite the namespace of Sencha Touch's "Ext" top level namespace to something else.

好的，到模板.在 Sencha 模板系统中，用户可以将他们的模板嵌入任何不会弄乱它的 HTML 标签中:例如具有自定义类型的脚本标签(或者在 Sencha 的情况下更典型的是文本区域)

Ok, on to Templates. In the Sencha templating system, users can embed their templates within any HTML tag that won't muck with it: for example script tags with a custom type (or more typically in Sencha's case a textarea)

var myTpl = Ext.XTemplate.from('theIdOfMyTpl')

您还可以将模板存储在单独的文件中并通过 XHR 加载它们.虽然我们通常建议您在服务器端编写一些内容来管理它以获得良好的性能.

You can also store your templates in separate files and load them via an XHR. Though we generally recommend you write something on the server side to manage this for good performance.

re:IDE 的Sencha Architect 开箱即用地自动处理这些东西(包括它在项目中引用的任何地方等).我相信我们的 Eclipse 插件也可以处理这个问题，但我必须检查一下.

re: IDE's Sencha Architect handles this stuff automatically out of the box (including any places it's referenced in the project, etc). I believe our Eclipse plugin also handles this, but I'd have to check.

这篇关于Sencha Touch 对比 Backbone.js的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！