Gau*_*mar 13 javascript sencha-touch backbone.js cordova
Sencha Touch和Backbone.js的基本区别是什么,实际上已经在backbone.js中构建了一个项目但却没有意识到Sencha Touch.我必须构建一个PhoneGap应用程序哪一个更好？
Mic*_*any 21
Sencha Touch(我们的产品)旨在成为一体化应用程序框架,提供创建外观漂亮的应用程序所需的所有功能.一切都旨在在所有主流移动浏览器上一起工作.它是一种干净的架构面向对象的开发应用程序的方法.
作为"一体化"框架,它为您提供了一整套与分辨率无关的UI小部件(轮播,列表,选项卡,工具栏等等),MVC库,事件管理,实用程序库,动画,主题系统,对象生命周期管理,布局系统,绘图和图表库以及更多东西,而不是你可以动摇...因为它们都是为了合作而设计的,最初的学习更高,但是一旦你在那里的人发誓它比其他任何东西都更有效率.
与
Backbone.js,这是一个简单的MVC库.这是大约1,000行代码,为您提供5个类:
它对实用程序函数依赖于underscore.js,所以你也需要它.您可能还需要使用单独的模板库以及像jQuery或jQuery Mobile这样的DOM抽象/操作库,它们还有一些UI小部件和一堆其他库来构建完整的应用程序.但有些人更喜欢研究和手工策划各自的图书馆.
更新:我想添加更多细节以响应Ben Bishop的回答.Aaron Conran,我们的Sencha Architect领导者和Sencha lifer帮我解决了这个问题.
Sencha和骨干之间存在明确的世界观差异.一般来说,Sencha倾向于留在JS世界中,我们希望您的JS将生成您的HTML内容.另一方面,Backbone是HTML和JS之间的混合体.尽管我们认为Sencha方法可以更好地服务于任何复杂性的数据驱动应用程序,但使用其中一种方法并没有任何原因.好的细节.
首先是re:Classes,Ben在JS中声明一个类的例子会在每个对象实例中放置每个属性和方法的副本.通常使用原始JavaScript,您希望将它们放在原型上,以便它们在类的实例之间共享MyClass.Sencha类系统会自动为您完成此操作.
此外,在原始JavaScript中,用户必须正确地进行原型继承才能正确继承或混合特定类.Sencha在不必担心的情况下照顾你.
至于"魔术字符串"(虽然我认为这是一个相当消极的特征)你不必使用它们如果你不喜欢它们在4.x中,你可以使用带有直接标识符的Ext.extend (虽然这是自4.0.0以来正式弃用的http://docs.sencha.com/touch/2-1/#!/api/Ext-method-extend).
使用魔术字符串在某些方面很有用.
首先,我们可以更少地关注依赖顺序以及何时定义/扩展任何类.这在复杂的应用中很重要
例如
Ext.define('Turtle', { extend: 'Animal' });
Ext.define('Animal', { });
之所以有效,是因为在定义Turtle类之前,Sencha会一直等到定义Animal类.
相反:
Turtle = Ext.extend(Animal, {
});
Animal = Ext.extend({}, {
});
不行,因为我们找不到变量引用Animal.
其次,使用字符串意味着我们可以支持动态加载.例如,如果我们有
Ext.define('MyApp.foo.MyClass', {
extend: 'MyApp.foo.ParentClass'
});
如果你遵循一个严格的类名称到JS文件夹约定,类加载器知道加载类的位置,即:
这种技术使Sencha很容易做有用的事情: - 类管理器将自动创建适当的对象,而无需创建和管理命名空间 - 确定任何类或实例的类名Ext.ClassManager.getName(myInstance) - >"MyApp .foo.MyClass"
定义特定类时执行某些操作
Ext.ClassManager.onCreated(function(){},scope,'MyApp.foo.MyClass');
支持名称空间重写,例如,如果您需要在同一页面中同时运行同一组类的两个版本...您可以将Sencha Touch的"Ext"顶级名称空间的名称空间重写为其他名称.
好的,转到模板.在Sencha模板系统中,用户可以将模板嵌入到任何不会混淆的HTML标记中:例如,具有自定义类型的脚本标记(或者更常见的是在Sencha的情况下是textarea)
var myTpl = Ext.XTemplate.from('theIdOfMyTpl')
您还可以将模板存储在单独的文件中,并通过XHR加载它们.虽然我们通常建议您在服务器端编写一些内容来管理它以获得良好的性能.
re:IDE的Sencha Architect自动处理这些东西(包括它在项目中引用的任何地方等).我相信我们的Eclipse插件也会处理这个,但我必须检查.
Ben*_*hop 16
Seiryuu是正确的.比较Sencha Touch和Backbone.js就像比较苹果和橘子.但是,我想强调一下您在使用其中任何一个开发时会看到的一些差异.
在开始之前,我想澄清一下Backbone究竟是什么......
Backbone.js是一个用于补充其他库(如jQuery和/或Zepto)的框架.jQuery的优势在于DOM操作,而不是宏架构.因此,为什么纯粹的jQuery应用程序往往是一团糟.Backbone为传统的Web开发人员提供了简单的MVC结构,以便更好地组织应用程序.
为了开始我的比较,我将从定义类开始......
例如,这是您在Javascript中声明类的方式:
function MyClass(){
this.myProp1 = 'my value 1';
this.myProp2 = 'my value 2';
this.myMethod = function(myParam){
//do something
}
};
var myInstance = new MyClass();
在Sencha中,您声明一个这样的类:
Ext.define('MyClass', {});
Ext.create('MyClass', {});
注意严重依赖魔术弦.但是,您可以创建一个带有常量的make shift枚举类,您可以将其用作类名.无论如何,如果你为你的班级名字使用魔术字符串,你将很难在3到4个月后重新命名你的课程.
对于使用HTML的差异......
传统上,我们声明一个这样的表单:
<form action="/myAction.php">
<label for="username"/>
<input type="text" name="username"/>
<label for="password"/>
<input type="password" name="password"/>
<input type="submit"/>
</form>
在Sencha中,您声明一个这样的表单:
{
title: 'Basic',
xtype: 'form',
id: 'basicform',
scroll: 'vertical',
items: [{
xtype: 'fieldset',
title: 'Personal Info',
defaults: {
labelWidth: '35%'
},
items: [{
xtype: 'textfield',
name: 'name',
label: 'Name',
placeHolder: 'Enter Name'
}, {
xtype: 'passwordfield',
name: 'password',
label: 'Password',
placeHolder: 'Enter Password'
}
}]
}]
}
在模板方面,在Sencha中你可以定义一个这样的模板:
var template = new Ext.XTemplate(
'<p>Name: {name}'</p>',
'<p>Kids: ',
'<tpl for="kids">',
'<tpl if="age > 1".',
'<p>{name}</p>',
'<p>Dad: {parent.name}</p>',
'</tpl>',
'</tpl></p>'
);
template.overwrite(panel.body, data);
使用Backbone你有选择......
胡子:
{{items}}
<div>{{name}}</div>
{{/items}}
或者如果你需要更多功能jQuery:
<script type="text/template" id="item-template">
<div class="todo <%= done ? 'done' : '' %>">
<div class="display">
<input class="check" type="checkbox" <%= done ? 'checked="checked"' : '' %> />
<div class="todo-text"></div>
<span class="todo-destroy"></span>
</div>
<div class="edit">
<input class="todo-input" type="text" value="" />
</div>
</div>
</script>
使用Backbone应用程序,您可以将模板定义为内联HTML或从外部文件加载它们.我认为你可以和Sencha做同样的事情,但是我还没有看到任何官方规定的方法.只是JS生成HTML字符串.
这些只是UI级别两者之间的一些基本差异.使用Backbone,您可以更好地利用现有的Web技能和知识.通过Sencha,您正在学习一个拥有自己的惯例和怪癖的全新生态系统.
由于对魔术字符串的严重依赖(参见Sencha表单示例),您选择的IDE可能会受限于代码完成方面的功能.这可能会导致开发时间变慢,并且更难找到错别字所造成的错误.但是,Sencha确实提供了一个Ext Builder应用程序,可以帮助您构建UI.
在应用程序基础架构(模型,控制器,服务......)中,Backbone和Sencha彼此相提并论.Sencha甚至还具有代理层的优势,可以在服务器API的集成方面提供更大的灵活性(Backbone很重要.)
说到PhoneGap,我建议你查看XUI.它是由PhoneGap团队构建的类似jQuery的库,针对移动浏览器进行了优化.如果你的应用程序足够小,它可能不需要一个完整的应用程序框架.
希望这可以帮助.