[译]FastClick: native-like tapping for touch apps - hlily

本邮件内容由第三方提供，如果您不想继续收到该邮件，可 点此退订 。

[译]FastClick: native-like tapping for touch apps - hlily  阅读原文»

原文地址：http://labs.ft.com/2011/08/fastclick-native-like-tapping-for-touch-apps/

这篇文章是一篇老文了，现在才看到，真是落后啊。

快速点击：像原生一样的触发app

这篇博客最初是发表在Assanka的博客上的，后来12年1月的时候Assanka被金融时代收购了，成为了现在的FT实验室。

12年8月的时候，把FastClick放到了GitHub上，将会一直使用GitHub来托管。

利用JavaScript API 来实现触摸事件和手势是一个非常直观的尝试。随着Webkit浏览器对web标准更多的支持，Web apps 越来越接近原生的app.

但是，你会发现，在越来越深入到Web app的开发过程中，当用户不再把你的app当作一个网站来看待的时候，会出现一些问题。

95年和现在的触屏设备，受欢迎程序是不可同日而语的。JS的Dom 事件原本是用来反应鼠标的“点击”动作，每一个事件对应单一的一个动作。

比如onClick事件。但是怎么样把他们转换到触摸屏设备呢？这是不容易的。

把一个"tap"事件作为一个"click"事件是可行的方法。至少在IOS上，因为没有tap事件-onClick事件被用来代替它是没问题的。但是为了能够正确的处理多种触屏手势，比如“捏”的手势，两次触击的手势等，就需要做一些妥协。比如tap事件与click事件触发，两者之间就有一个300MS的延迟，会让你的app感觉很迟钝，虽然这不是技术上的问题。

我们解决这个问题的方法是，在我们的app中跟踪所有的TouchStart事件，在接收到touchend事件的时候，触发一个click事件。最后，我们完善了快速点击的代码，把他变成了一个小而高效的库，叫做FastClick. 这个代码通过成百上千的用户测试，到目前为止已经比较健壮了。我们很想知道别人是如何解决类似的问题的，也想跟大家一起接受这个挑战并不断的提高我们自己的方式方法。所以我们开放了FastClick. 希望你能够试用它，并提出您的想法。

使用FastClick的时候，在需要使用的层上，实例化它。我们使用document.body是因为希望所有的按钮和链接都获得快速点击。在事件监听的时候，‘click’事件的forwardedTouchEvent属性将被设置为true.

如果在应用程序中，你使用按钮或者是ios风格的菜单，就能感受到明显的反应迟钝现象。下面用一个例子来说明，如何用FastClick来解决这个问题。

<button class=”fastclick” onclick=”someHandler()”>Fast click</button>
<button onclick=”someHandler()”>Slow click</button>
<script type='text/javascript'>
var button = document.querySelector(".fastclick");
new FastClick(button);
</script>

在这个例子中，属性值为fastclick的按钮，当你的手指触摸到屏幕以后，就能立马进行事件处理。而其他的按钮，触摸以后，经了一个延迟的时间才有反应。

不过，通过选择器选择的元素在接受代码合成的点击时，会有一些问题。所以如果把FastClick用到包含选择器的元素上，FastClick会忽略代码作用到选择器上的点击事件，只允许触发元素默认的点击事件。

如果你想让在FastClick层上的其他元素接受非代码合成的点击的话，你需要两个class的帮助，一个是clickevent，一个是touchandclickevent. 对任何在FastClick层上可点击的元素，触碰元素将会触发不同的效果。

（1）没有class值： 元素将只会接受来自FastClick的代码点击。默认的点击事件将会阻止掉。

（2）class值是clickevent 的：元素只会接受默认的点击事件，忽略掉FastClick.

（3）touchandclickevent : 元素 不仅会接受默认的点击事件，还会接受FastClick的事件，并且FastClick的事件会先被触发。

<div class="fastclick">
<button onclick="someHandler()">
Will receive programmatic click event接受FastClick的点击
</button>
<button class="clickevent" onclick="someHandler()">
Will receive non-programmatic click event只接受默认的点击事件
</button>
<button class="touchandclickevent" onclick="someHandler()">
Will receive both click events两种点击都支持
</button>
</div>
<script type='text/javascript'>
var button = document.querySelector(".fastclick");
new FastClick(button);
</script>

这个有用吗？试一下另外一个例子（http://labs.ft.com/wp-content/uploads/2011/08/fastclickdemo-input.html）。用点击事件来尝试触发input的focus事件。IOS上只会允许非程序的click触发。所以只有在class值为clickevent的时候，才管用

本文链接：http://www.cnblogs.com/lilyimage/p/3568773.html，转载请注明。

ASP.NET MVC 5 - 给电影表和模型添加新字段 - 葡萄城控件技术团队博客  阅读原文»

在本节中，您将使用Entity Framework Code First来实现模型类上的操作。从而使得这些操作和变更，可以应用到数据库中。

默认情况下，就像您在之前的教程中所作的那样，使用 Entity Framework Code First自动创建一个数据库，Code First为数据库所添加的表，将帮助您跟踪数据库是否和从它生成的模型类是同步的。如果他们不是同步的，Entity Framework将抛出一个错误。这非常方便的在开发时就可以发现错误，否则您可能会在运行时才发现这个问题。

为对象模型的变更设置 Code First Migrations

从解决方案资源管理器中双击Movies.mdf，打开数据库工具, 在数据库工具 （数据库资源管理器、 服务器资源管理器或 SQL Server对象资源管理器），右键单击Movies.mdf f，并选择删除。

Build应用程序，以确保没有任何编译错误。

从工具菜单上，单击库包管理器，然后点击程序包管理器控制台.

在程序包管理器控制台窗口，在提示符 PM> 后输入：

Enable-Migrations -ContextTypeName MvcMovie.Models.MovieDBContext

如上所示的Enable-Migrations 命令，会在Migrations文件夹下创建一个Configuration.cs 文件。

在Visual Studio 里面打开Configuration.cs 文件. 用下面的代码替换Seed函数：

protected override void Seed(MvcMovie.Models.MovieDBContext context)
{
context.Movies.AddOrUpdate( i => i.Title,
new Movie
{
Title = "When Harry Met Sally",
ReleaseDate = DateTime.Parse("1989-1-11"),
Genre = "Romantic Comedy",
Price = 7.99M
},

new Movie
{
Title = "Ghostbusters ",
ReleaseDate = DateTime.Parse("1984-3-13"),
Genre = "Comedy",
Price = 8.99M
},

new Movie
{
Title = "Ghostbusters 2",
ReleaseDate = DateTime.Parse("1986-2-23"),
Genre = "Comedy",
Price = 9.99M
},

new Movie
{
Title = "Rio Bravo",
ReleaseDate = DateTime.Parse("1959-4-15"),
Genre = "Western",
Price = 3.99M
}
);

}

右键单击红色波浪线下Movie，并选择"解析(Resolve)"，然后单击"using MvcMovie.Models;

这样做会增加下面的语句：

using MvcMovie.Models;

Code First Migrations调用Seed的方法，每个迁移（程序包管理器控制台 更新数据库），此方法用于updates数据（如果数据存在），或inserted数据。

在AddOrUpdate方法在下面的代码执行一个的"upsert"操作：

context.Movies.AddOrUpdate(i => i.Title,
new Movie
{
Title = "When Harry Met Sally",
ReleaseDate = DateTime.Parse("1989-1-11"),
Genre = "Romantic Comedy",
Rating = "PG",
Price = 7.99M
}

因为Seed方法与每个迁移同时运行时，故，你不能仅仅插入数据，因为当你正试图添加，可能已经完成了创建数据库后的第一次迁移。"upsert"操作阻止错误的发生，如果你尝试插入一个已经存在的行，它覆盖任何数据更改，当你在测试应用程序的同时。你可能不希望这样的事情发生：在某些情况下，当您更改数据测试时，你希望你的变化后数据库同步更新。在这种情况下，你想要做一个有条件的插入操作：只有当它不存在的时候，插入一行。
传递给