javascript 框架_虚拟面板：针对HTML5的新JavaScript框架

javascript 框架

在过去的一年中， HTML5作为经典和移动Web的主要开发平台之一而获得了普遍认可 。 那时，新JavaScript框架已经发展起来，直接针对该平台，并试图为Web开发设置新的范例。

InfoQ过去有一个虚拟小组，与一些最流行JavaScript框架和平台（如Dojo，YUI，Prototype，script.aculo.us，MooTools和GWT）的创建者和主要开发者一起，讨论他们如何看待他们的项目向促进HTML5开发 。

随着新的特定于HTML5的框架的出现，InfoQ与创建者进行了问答（Q＆A），以了解他们的项目与当前工具包有何不同以及它们必须向开发人员提供什么新功能。

参加者：

• 来自Jo的 Dave Balmer，
• 来自Modernizr和
• Simpli5的 Jacob Wright

InfoQ：在已经建立了多个JavaScript框架的情况下，开发针对HTML 5的新框架的动机是什么？ 与传统解决方案相比，它有什么好处？

Dave（Jo）：Jo的前提是“当您让浏览器引擎完成更多工作时会发生什么？” 事实证明，您最终得到的是一个很小的简单框架，该框架不会因各个浏览器引擎而受到任何深深的影响。 就像是一个新的开始，感觉很棒。

我们称其为“ HTML5”的W3C工作草案和建议集使JavaScript开发人员具有更多能力来生产可以与本机应用程序竞争的世界级应用程序。 持久的客户端存储，低级文件访问，套接字，后台进程，硬件加速的UI呈现和动画是吸引我眼球的一些功能。

HTML5在桌面浏览器中已经站稳了脚跟，但还没有在这个世界中独领风骚。 当我们等待Windows用户群采用Internet Explorer 9（它将具有HTML5规范中的许多“炫酷”功能）时，其他设备已经具有许多这些功能。 Apple iOS，Google Android和Chrome，webOS以及最近的Rim和Symbian正在将HTML5中的高级功能烘焙到智能手机，平板电脑和上网本中。

因此，虽然HTML5早就可以提供广泛的桌面支持，但是较新的移动设备已经在HTML5上融合为一个在整个市场上相当稳定的平台。

Faruk （Modernizr）： Modernizr产生于这样一个想法，即网站不必在每个浏览器中看起来都一样-最值得注意的是，较旧且功能较弱的浏览器不必看起来像像素一样完美。 我开始考虑一种方法，不仅可以将该信息传播给更多的人，而且可以简化以这种方式开发网站的过程。 在Web开发上散布好的建议是一回事。 简化流程并使其变得更容易和更好将更加有效。 我对依赖UserAgent嗅探来针对不同浏览器功能集的不可靠（以及极其不明智的做法）感到沮丧，这使人们需要一种可靠的方法来了解HTML5和CSS3的哪些功能可用在每个浏览器中。

当我着手创建Modernizr时，很明显，我必须保持其关注范围狭窄。 jQuery和其他框架已经存在，但是它们都没有提供Modernizr所做的关键功能，因此我决定使Modernizr仅专注于这一关键功能，即功能检测。 我不是想成为JavaScript库的庞大工具，而是希望Modernizr对任何Web开发人员来说都是一个微小但从根本上来说有用的组件。 而且它们越先进，Modernizr就会越有用。

Jacob（Simpli5）：我的猜测大概是构成已建立的Javascript框架的代码的1/2，这说明了跨浏览器的兼容性或填补了性能欠佳的浏览器所缺少的功能。 如果我要构建HTML5应用，为什么我们需要下载（并降低速度）有助于旧版浏览器的脚本？ 另外，框架无法使用许多Javascript功能，因为并非所有浏览器都兼容（例如，隐式getter / setter）。 通过开发针对HTML5的新框架而不是扩展现有框架，我们可以使框架更小，更快，更流畅，因为我们不受与当前框架相同的规则的约束。

InfoQ：您想为我们提供您框架的架构概述吗？ 它的主要成分是什么，它们之间如何相互作用？

Dave（Jo）：首先，整个框架都包含JavaScript的对象模型。 用于构建Jo的技术和编码模式反映了“ JavaScript，The Good Parts”（Crockford / O'Reilly Press）中介绍的技术以及一些表现良好的惯用法。 在Google的V8引擎中尤其如此。

名称间距是通过一致的命名标准而不是嵌套对象（例如joButton与JO.UI.Button）来实现的。 与每次引用对象时遍历原型链相比，这节省了一些时间。 更重要的是，像V8这样JavaScript引擎可以高度优化对象文字的存储，但是如果您向对象添加或删除单个属性，则必须“降级”到较慢的方法。 这意味着使用嵌套对象名称空间的整个框架都使它们的库更大，更慢。

除了简单的实用程序对象和方法之外，Jo内的形式对象还使用完善的“观察者模式” OOP标准。 基本上，对象向任何订阅者对象触发事件通知。 对象之间的这种通信类型非常灵活，易于“重新布线”。 另外，由于对象之间的接口是“干净的”，因此有助于促进良好的单元测试实践。

UI元素具有称为joView的基本“类”。 您在Jo中创建的每个UI元素都使用一个或多个HTML标记，并在大多数情况下通过更改.className属性来对其进行操作。 这意味着所有呈现和视觉行为均由CSS控制。 代替使用JavaScript编写的动画代码，我们使用CSS3过渡来完成所有令人眼前一亮的工作。

joControl是输入框，按钮，复选框和其他典型GUI控件的基础。 joContainer是组织UI元素集的基本“类”。 可以在joContainer（及其子项，如joCard）中看到Jo中的一些糖。 例如：

var myui = new joCard([
    new joTitle("Hello World!"),
    new joGroup([
        new joLabel("Username"),
        new joInput(joPreference.bind("username")),
    ]),
    new joFooter([
        new joDivider(),
        new joButton("Goodbye")
    ])
]);

并且您有一个简单的对话框，准备显示（通常通过调用joStack.push（）方法）。

除了拥有丰富的UI对象集外，Jo还拥有joDataSource及其子元素。 基本上，这些对象包装诸如XHR，SQLite，cookies和其他更有趣的方式来获取异步数据。 这样做的好处是，您的应用程序可以在不同的数据存储和检索方法上具有相当一致的界面。

Faruk （Modernizr）：实际上，Modernizr非常小而直接：我们运行一系列测试，每个测试都检测浏览器中的特定功能。 我们不问它是什么浏览器，我们只是问：您是否支持（例如）边界半径？ 你们支持HTML5视频吗？ 您支持地理位置定位吗？ 依此类推。 然后，我们整理所有测试结果，并将它们作为类添加到HTML元素，并将它们放在可在JavaScript中与之交互的Modernizr对象中。 HTML元素上的类仅对边界半径说“ borderradius”或“ no-borderradius”，这取决于浏览器是否本机支持。 使用所有作为CSS类提供的测试，您甚至可以严格基于浏览器的功能来生成CSS规则。 不是它的UserAgent字符串是什么，也不是它的版本号，而是它是否实际上支持该功能。

因此，实际上，我们仅有的唯一组件是许多单独的测试以及少量的处理例程。 一些测试涉及定时回退，例如@ font-face测试，因为它们的关联功能并非总是立即可用，并且需要异步检查。

雅各布（Simpli5）：我真的很喜欢jQuery使DOM变得如此简单，但是我一直希望我可以在有元素时调用元素上的方法，而不是总是需要用jQuery包装它们。 因此，Simpli5的核心将jQuery提供的许多功能添加到HTMLElement原型中。 一些Javascript开发人员会对此视而不见，但是我觉得利用Java语言（不会太失控）的优势使我们可以提高工作效率，并拥有更多可读性强的脚本。 Simpli5对象非常类似于jQuery对象，它是元素数组，对其上的调用方法会将这些调用转发到元素本身。 因此document.body.addClass（'myclass'）和$（'div'）。addClass（'myclass'）都添加到元素的类中。

我添加了一个小类系统，因为健壮HTML5应用程序需要结构和良好的组织来维护。 它看起来与MooTools类相似，我发现它们非常易读，并且在继承方面效果很好。

最后，我构建了一个组件系统，其中包括模板（受ExtJS核心启发）和数据绑定，并且是系统IMO中最酷的部分。

InfoQ：您的框架与更流行的客户端JavaScript框架（如jQuery，Dojo和Prototype）之间的互操作性如何？ 他们在一起玩得好吗？

戴夫（乔）：乔与其他图书馆打得很好。 实际上，它的设计考虑了诸如PhoneGap之类的低级库。 我并不是要解决各种设备之间的所有棘手问题，例如“启动浏览器URL”或“告诉我我的应用程序代码何时可以启动”。 Jo是一个相对较高级别的框架。

Faruk （Modernizr）：Modernizr并不是要成为框架，而是坚持要成为可以与许多其他库和框架一起安全使用的工具箱。 与ie-css3.js存在不兼容性，但仅在仍然不常见的用例（使用ARIA角色属性）下才存在。

雅各布（Simpli5）：他们大多数时候应该在一起打得很好。 Simpli5和jQuery一样，如果尚未使用$变量，则可以使用$变量，但可以将其分配给其他变量。 它确实使用与Prototype和MooTools相同的Class，因此最后加载的其中一个将是您正在使用的class系统。

InfoQ：您能否举一个例子，说明您的框架最能证明其功能和解决方案的简要说明？

Dave（Jo）： Jo是专门为解决以下问题而设计的：“我们如何使应用程序在众多设备上得到支持，每个设备都有各自的显示尺寸和偏心率？” 由于Jo将所有真正的UI工作转移到CSS3（在某些平台上是硬件加速）上，因此这意味着您在这些平台上的应用程序代码将基本相同。 通过CSS3以及包装诸如PhoneGap之类的低级库，可以缓解大部分跨平台问题。

Faruk（Modernizr）： 我自己的网站 （在撰写本文时）具有一系列功能，其中包括一系列选项卡，这些选项卡在鼠标滑过（：hover）状态时的行为不同，具体取决于浏览器的功能。 如果浏览器具有完整的功能，那么会出现一个不错的，微妙的动画，该动画具有颜色过渡和较小的宽度变化。 其他浏览器具有的功能越少，这种悬停效果就越不有趣。 Modernizr使我能够根据浏览器的功能轻松，安全地定位浏览器，并为它们提供不同CSS规则，这些规则在没有Modernizr的情况下会相互冲突并相互替代。

Jacob（Simpli5）：该框架仍然非常新鲜，仅一个月之久，但是我认为它已经Swift成熟。 我正在努力以更少的代码来支持大多数其他框架所支持的内容，并通过利用HTML5浏览器支持的功能来使其更易于编写代码。 我认为这在组件系统中最为有用，因为您能够以易于理解的方式定义组件，并且效果良好，并鼓励组件开发。

InfoQ：您如何看待JavaScript框架不断发展以适应HTML5？

Dave（Jo）：随着时间的流逝，JavaScript库应该越来越小和简单。 应该将更多的低级UI和动画卸载到CSS3，以使JavaScript清除以DOM为中心的代码。 此外，诸如内置于HTML5中的工作进程之类的东西意味着我们可以以一种更自然的方式对后台任务进行编码，而无需构建可笑的复杂代码来防止阻塞UI。

Faruk （Modernizr）： HTML5和CSS3变得越来越普及，这在很大程度上要归功于Webkit浏览器引擎，它是当今世界上大多数移动浏览器事实上的标准。 JavaScript框架正在发挥作用，并且正在慢慢适应自身以利用本机实现（如果可用），而使用JavaScript驱动的后备（不）。

雅各布（Simpli5）：我看到他们中的大多数人都添加了HTML5扩展，直到跨互联网的大多数人都转向HTML5为止，跨框架的兼容性代码仍然使框架的核心膨胀了很多年。 他们之所以必须这样做是因为他们满足了开发人员跨脚本运行其脚本的需求。 只有少数能够选择仅支持HTML5的人才能摆脱旧的代码和旧的浏览器并继续前进。 老实说，“带宽”对于更高的带宽和更快的JS引擎并不重要。

我还看到了新SQL库，存储的数据，套接字和其他很棒的东西。 这些应该很有趣。

InfoQ：在不久的将来，您如何看待HTML 5和浏览器实现的发展？ 您认为仍然缺少某些规格吗？ 您是否对HTML 5随附的特定技术有任何批评？

Dave（Jo）：目前，Safari（以及iPhone和iPad上的移动Webkit）是唯一在CSS3中进行硬件加速3D转换的解决方案，这真是令人失望。 它限制了浏览器市场94％JavaScript应用程序的“酷”因素，或者迫使我们编写根本无法在移动设备上执行的操作。

规范中的最大弱点是持久性客户端数据存储。 Webkit，Gecko和IE都使用它们自己的风格进行本地存储，并且编写代码很烦人。

我对“网络工作者”的后台流程感到非常兴奋。 我们今天遇到的许多应用程序编码挑战都围绕着将耗时的任务分解为以尴尬的方式链接在一起的较小的部分。 呈现列表并进行后台处理而不中断用户体验的想法非常性感。

Faruk （Modernizr）：关于HTML5，浏览器以及市场对此的React有很多话要说 。 我们的Web开发人员和标准倡导者有时可能会忘记大局，那就是最终用户不在乎。 他们关心的是某种工具的性能（或是否）良好，而不管它是用Flash，Silverlight，HTML5还是CSS3制成的。

批评HTML5的过程以及某些供应商如何对待它很容易，但是鉴于如此庞大的任务总是多么复杂和混乱，我实际上对这一切感到很满意。 现在，我们几年前还只是在做梦，现在终于可以在浏览器中执行操作了，向浏览器添加的创新和新功能的步伐令人难以置信。 这是成为一名Web开发人员最激动人心的时刻，这体现在Modernizr的强大社区支持中。 甚至在它变得完全开源之前，世界各地的人们都在为它贡献代码。

人们对Modernizr的热情驱使我们继续开发它，并使它成为所有希望以正确方式构建网站的Web开发人员更好，甚至更有用的工具包。

雅各布（Simpli5）：我看到视频和音频组件中添加了其他功能，例如蒙皮功能或更好地融入页面的功能。 Flash仍具有浏览器不支持的视频功能。 性能不是规范的一部分，但这是我认为对HTML5的下一次重大推动。 JS性能一直在不断提高，但是渲染性能也需要提高。 如果要使用HTML5制作游戏，则必须限制在一定的性能水平。

您可以在InfoQ上找到有关HTML5 ， JavaScript和其他Rich Internet Application技术的更多信息。

翻译自: https://www.infoq.com/articles/new-js-for-h5/?topicPageSponsorship=c1246725-b0a7-43a6-9ef9-68102c8d48e1

javascript 框架