昨天在腾讯大厦参与了鹅厂AlloyTeam召开的AC2015前端大会，度过了充满精彩和收获的一个下午，用一句话形容这次前端Event应该是“诚意满满，干货满满”。

说实话，这次AlloyTeam没有对与会人员做严格的身份认证，基本到了就能参与，因此整个腾大的多功能厅下午是爆满了人。我去的其实算早了，却也只能抢到很后面的座位。许多去的晚的同行都只好站着或坐地板上参与。

本次AC大会也做了全程的官方视频录制，据悉后续将在慕课网上线，届时有兴趣的朋友可以去关注下。

大会起始环节是一个神秘项目的首秀—— 一款H5游戏坦克争霸（TankStrike）的公开，它的线上地址可以戳这里体验。

坦克争霸是一款挺全面也颇具特色的web游戏，你可以选择不同属性的坦克（有的血量厚，有的速度快）来应战，战斗时也除了常规的开火还能打出定位导弹，能根据敌方坦克的移动而修改自身弹道方向。

具体的玩法和特性就留给大家去线上体验了，这里不赘言，作为腾讯内部玩H5玩的最溜的AlloyTeam来说，能开发出这样优秀有趣的作品倒也情理之中。

接着是 show girls 们来拉动现场气氛了，据说都是我厂可爱的妹子们~

有一种团队叫AlloyTeam+

这是第一个分享环节，由 AlloyTeam 的 Leader 于涛主持，介绍了此次召开AC大会的初衷——AlloyTeam每年都有许多酷炫好玩的开源项目，希望每年都能有这样的机会跟大家一同分享。

这意味着后续每一年，AlloyTeam都会召开一次AC大会，作为深圳的一次前端盛事了（不过还是建议明年好好验下参会者身份嘛，不然对早早报名了的朋友不太公平）

于先生接着做了前端行业趋势的分析，如PPT所示是酱的，看着是机会多多：

当前前端领域的工程师可以说是越来越多，因此才能招到漂亮的女神妹子来撸码，不过他也因此抛出一个看法—— “市场不是缺少前端，而是缺少优秀的前端工程师”。

随着前端领域技术点的日益丰富，前端行业虽然入门简单，却存在深入难的瓶颈，因此鼓励大家做到“精于业务而不限于业务”。

另外于先生也分享了其对当前行业技术趋势的归纳——”移动化“和”复杂化“，表示当前前端技术已逐步渗透到移动端领域，我们还可以利用它来完成许多复杂的动画和游戏。

接着是向与会者介绍了 AlloyTeam 团队，包括名字的寓意、团队的规模和运作方式等，也介绍了这些年来 AlloyTeam 的一些重要的开源项目，包括应用在web QQ上的、CodeTank在线（玩）学（游）代（戏）码平台、H5体感游戏“墙来了”、H5专业级图像处理引擎AlloyImage、 AlloyStick骨骼动画引擎等，也透露了16年的主要研发项目为在线创作平台iPresst和在线动画创建平台AlloyAnimation。

最后于先生表示将在未来开启“+计划”，把AlloyTeam团队开源，做第一个“无边界的开放技术组织”，有兴趣有能力的小伙伴可以加入成为AlloyTeam的合作伙伴，拥有参与项目的机会，从而同步获得更多AlloyTeam的资源和技术经验，还有机会进入AlloyTeam的名人榜呢~

我有我特色——开发眼中的移动交互

第二个分享环节是号称”老教授“的潘佳韩主持，他把简单的页面拆分为MVC模式——M代表”HTML"，V代表“CSS",C代表”JS“（就一个比喻，不要跟我们常规说的MVC框架搞混了），从这个角度来厘清PC web开发与移动web开发的差异（交互角度上）。

老教授针对不同案例都录制了一些交互对比视频，主要是”点击“和”长列表滚动“俩种行为的交互对比，从而讲了一些基础概念、常见交互问题和解决方案。

1. 点击交互

鉴于很多PC web的页面是没有针对浏览器来做移动开发的，所以当用户用移动设备访问这些页面时，经常需要通过手势来放大缩小视口中的内容，为了方便，常规移动端浏览器都提供了双击放大/缩小视口内容的功能，因此，浏览器对”click“点击事件做了300ms的延迟来区分单击和双击事件（如果没有延迟，双击的第一击可能就触发了其它的行为）。

但是当你的页面已经是基于移动端来做开发的，这300ms的延迟就显得多余了，会让很多单击事件显得滞后，造成糟糕的交互体验。

常规我们会使用 zepto 的 tap 事件来替代 click，tap 实际上是由 touchstart、touchmove、touchend 三个手势事件来协调完成事件判断是否触发的——当用户手势滑动距离够短、时间足够快，那么就触发对应的绑定事件。

不过话说这里到没提到常用的 fastclick~

另外在交互优化这块也建议我们要关注点击态的反馈——用户点击的瞬间要有及时的外观反馈。

我们常常会利用 :active 伪类来设置某元素被点击时的点击态样式，但也存在一个问题——滚动页面的元素的时候也会触发该反馈。建议的解决方案却也简单：点击元素时动态给其加上带点击态的class，再在150ms后动态去掉该样式。

2. 长列表滚动

开始先抛出了两个概念——”全局滚动“ 和 ”局部滚动“，前者指滚动条位于body或更顶层，后者指滚动条位于body下的某节点内。

然后是写样式最常遇到的滚动问题了—— ios在”全局滚动“的情况下默认开启弹性滚动特性，但在”局部滚动“的情况下则不开启，导致滚动内容时显得非常干涉。

建议的解决方案如下：

.scroll-elm{overflow:auto}

另外ios在滚动时还容易出现一个出界bug——已经滚到边缘时再继续拉动会拉出一些没内容的空白区域，这个区域的背景色还很可能跟滚动列表的背景颜色不同：

就此ios 滚动bug的解决方案有：

⑴ 引入 scrollFix 解决（具体查看这篇文章；

⑵ 全局滚动改为局部滚动，页面的固定区域禁止touchmove默认事件；

另外关于”出界“部分背景色跟滚动列表不一致的，老教授建议不要直接设置滚动元素的背景色，另外说了个好消息——ios8开始，safari出界部分的背景色已经可以和 body 背景色保持一致。

至于安卓设备，其在局部滚动的情况下可能会存在反应滞后、滚动条断开的bug，因此老教授建议安卓页面尽量都采用全局滚动的页面结构。

那么当你的页面有上下固定、中间滚动的需求时，应当如何将其作为全局滚动的形式呢？机智的老教授给了答案：

话说这里其实我也存在一个问题——安卓和ios可能需要匹配不同的样式来做滚动优化，那么如何做一套样式匹配两种情况呢？

刚好后面的问答环节有人问到同样的问题，老教授表示可以在一开始时通过ua识别来给页面html标签加上对应的样式（比如），以这种形式来让页面节点获取到对应的样式（比如 .ios-style div{...}）。

点击和滚动的交互优化讲完，老教授开始分享”键盘定制“的交互优化——通过不同场景出来不同键盘：

建议开发时依据场景给 input 标签设定好对应的 type 值（url / email/ tel / number / search）来拉起对应的键盘。

不过注意在 ios9 中使用 type='search' 的情况下，要求 input 得挂在 <form> 下才会展示出对应外观，所以常规就是乖乖裹层 <form> 然后禁用 onsubmit 的默认行为。

此处也简单介绍了pattern特性的使用：