mobile组件开发有哪些不一样的

手机端组件开发，同pc上，有很多共同点，也有很多不同点

共同点：

1 组件实现功能一致，对外暴露接口一致

不同点：

1 考虑的浏览器兼容性不一样

2 对html5 和 css3 支持不一样

3 性能要求不一样。手机上，cpu 、内存性能同pc还有很大差距，这样在手机上要更关注性能一些

4 手机屏幕丰富多彩，这样就要求组件构建的时候，考虑到responsive design

5 可以实现的动画效果不一样

鉴于手机端和pc端要实现的功能一样，我们采用了pc端widget的框架。一方面是widget框架，不依赖jquery，非常独立适用，另一方面是尽量保持平台的一致性，减少迁移和学习成本。

因为手机端需要兼容的浏览器都比较高级，我们可以使用高级的属性来实现相同的功能

比如：手机端，dialog 组件

html 基本框架

<section class="dialog_mask">
    <div class="dialog_body">
    </div>
</section>
<style>
.dialog_mask{
    position: absolute;
}
.dialog_body{
    position:relative;
}
</style>

position:relative;这样的好处是dialog_body 可以通过margin: 0 auto;实现居中，不用js算。

1 如何实现蒙版效果？

通过background:rgba(0,0,0,0.75);

opacity 由于其继承性，子节点都会继承透明性，即使在子节点设置opacity=1；故如果用opacity，就需要把dialog_body 和dialog_mask 分开。然后用定位方法将他们重叠。

而background:rgba 只针对当前节点，不具备继承性。这样，dialog_mask 和 dialog_body 就可以放在一起了。

2 如果不需要蒙版，改怎么办？

dialog_mask{width:0;height:0;overflow:visible}

对比pc端的实现，手机端不需要iframe来遮挡select等控件；mask 和 dialog 都在一个结构里面，更完整，更稳定。

性能

手机端拥有高级的浏览器，但是cpu 和内存性能却跟pc差距大，在性能方面，我们需要着重考虑

因为transition 是浏览器级别的动作，比js更高效，同时如果开通硬件加速，动画效果更流畅。

例如在slide demo 组件中，

卡片的移动，通过transition 来实现动画效果

通过transform:translate3d(x,x,x)启动硬件加速和属性的改变。

动画：

css3加入了强大的动画，这样丰富了组件的表现能力

诸如：fade、flip 、turn 、flow、 slidefade 、slide 、slideup 、slidedown 等样式，都可以通过css来表示

例如：

flip效果：

.turn.out {
	transform: rotateY(-90deg) scale(.9);
	animation-name: flipouttoleft;
	animation-duration: 125ms;
}
@keyframes flipouttoleft {
    from { transform: rotateY(0); }
    to { transform: rotateY(-90deg) scale(.9); }
}
这就是flip的一个旋转效果。以后会加入到dialog组件中。参考；http://api.jquerymobile.com/dialog/