Blend关于HTML的行为和操作功能

  • Article

[原文发表地址]  Blend for HTML Behaviors and Actions

[原文发表时间]  2014-03-13 8:45 AM

Blend for Visual Studio 2013为HTML开发者引进了一个功能，它或许被那些已经着手于XAML的人们所熟悉了：Behaviors。当被附加到HTML元素时，Behaviors通过执行一个JavaScript事件处理程序将活动添加到应用程序中。开发人员可以从各种各样的随时可用的Behaviors中选择或创建他们自己的Behaviors。例如，一个开发人员可以使用Blend的预定义“切换类名”行为，通过点击按钮添加或删除元素的一个类名来开启/停止一个CSS动画。

在这篇博文中，我们将会从幕后关注产品团队的动态并且了解在JavaScript中生效的Behaviors。

为什么增加Behaviors？

表象之下，大多数HTML应用程序都是由高度模块化和可重用块逻辑-通常封装为JavaScript函数组成。这些函数可能会仅仅对一个应用程序执行一个特殊的任务，或者它们有可能会执行一个易于被提取用于跨多个应用程序的普通任务。在计划Visual Studio 2012 时，我们的产品团队便认识到有极少数的功能性任务是几乎所有的Windows Store 应用程序必须执行的。我们在想：我们可以做些什么来帮助开发人员更轻松地添加常用的，可重用的组件？

之前的XAML Blend版本交付了这些可重用的组建作为Behaviors，并且它们都非常受欢迎！使用XAML Behaviors，开发人员能够轻松地只通过从资产板里拖拽一个Behaviors和设置一些属性就能建立应用程序逻辑。所以，随着一个行之有效的模式到来，我们使用JavaScript创建了 一个原型。而且它工作地非常棒！

JavaScript Behaviors

事实证明JavaScript函数已经很像XAML Behaviors了：每个JavaScript函数执行一个定义良好的任务，并接受已知参数的列表 。比较困难的部分是创建一个声明式的模型使像Blend那样的工具知晓哪个是期望的参数。我们为Web技术选择使用最自然的声明性标记：HTML和JSON。

为了使HTML标记更清晰，产品团队决定通过W3C兼容数据与交互属性附加每个Behaviors。参数都在一个单独的引用文件里通过一个人类可读的JSON对象传递。当应用程序加载和WinJS.UI.processAll()执行时页面上所有Behaviors都被初始化。

要创建自己专有的Behaviors，开发人员可以使用用于WinJS控件上的相同的架构。OAM（开放Ajax元数据）描述了可重用的功能性组件任何熟悉可扩展标记语言的人都非常清楚。一旦添加到Blend安装目录，意味着允许你自定义的Behaviors出现在资产面板里。

Behaviors怎样工作

Behaviors赋予你添加功能到任何Windows Web应用程序（WWA）不必直接写代码的能力。Blend提供了使用一个轻量级JavaScript文件（定义事件处理程序）和JSON文件（定义事件处理程序的参数）所需要的执行情况。这使得非程序员和程序员都可以很容易且快速地实现可重用的功能组件。

要充分理解Behaviors，你还必须了解操作。Behaviors描述了一个事件而操作描述了一个事件的结果。理解它的一个好方法是：

“当[Behaviors]发生时，去做[操作]”

Behaviors被附加到HTML属性面板单独的页面元素中，使用Behaviors范畴的控件：

                                         

在Behaviors范畴的控件可用于： 1 ）添加新的Behaviors， 2 ）添加或删除Behaviors和操作以及3）配置所选操作或Behaviors。当一个Behaviors被添加到一个元素中，一个数据与交互属性则被添加到包含附带的Behaviors名称的这个元素中。

Behaviors作为触发器，定义为了引起一个或多个相关联的动作触发所需要的标准。举一个例子EventTriggerBehavior ，它可以被设置为不同的事件触发，例如元素的OnClick事件。在这种情况下，该元素无论何时被点击，所有与那个Behaviors相关联的动作都将被执行。

默认情况下，Behavior附加到的元素将是行为资源和目标要素。重新定位你的行为源或动作的目标源将是一个非常常见的任务。为了允许一个行为监听附加元素或有有操作目标的其他元素之外的元素，你可以充分利用sourceSelector和targetSelector属性。

总结

Behaviors和Actions可以以各种不同的方式结合来影响页面元素，通过使用TargetSource和srouceSelector直接或间接定位或附加Behavior到页面的其他元素。通过使用HTML属性面板，Behaviors和Actions被附加到页面元素，并且可以在Blend中配置。

关于Blend更多的详细信息，请查阅我们的how-to文章：使用Blend中的内置行为来增加交互性（ HTML和JavaScript）。