原生OR模拟

我最近又陷入了模拟控件和原生控件的纠结中。

早期我们做PC端网页开发,就已经讨论过一次模拟控件(表单)和原生控件(表单),当初各种各样的理由,我们很推崇原生控件(标准化、语义化、渐进增强)

但是最近这两年接触Mobile端的网页开发后,我的立场摇摆了。

原生控件

优点:使用简单,”兼容性强”

使用简单很好理解,表单元素就那么几个,其DOM Event和DOM Attr也屈指可数,使用起来非常方便。

为什么要给兼容性强打上引号呢?因为单独使用,的确兼容性很强,Web标准。

缺点:“兼容性差”

为什么又是兼容性呢?主要体现在Mobile端的浏览器,对于可交互元素,尤其是表单元素,有很多特殊的处理。

FastClick好用吗?iScoll好用吗?都很好用,但为什么网上那么多负面的评论?

去仔细看内部的源码,里面由非常多可交互元素的hack,并且都留有issue单。就是因为不同浏览器、甚至同一款浏览器的不同版本,对这种可交互元素的处理机制不一,导致各种各样未知bug。而这种bug,只能case by case的修复。

这里我又想黑一下自己的公司,X5也有很多case by case的自认为的对可交互元素的处理机制优化。

模拟控件

优点:完美还原交互,兼容性强

设计还原能力,就不用说了,自己写的业务实现,可以完美实现各种交互效果(当然仅限于当前科技范畴了)

而兼容性,因为采用的是最基础的手段,所以满大街的设备都会支持,并且都当做普通的DIV\CSS\JS来处理,不会有什么特殊情况,也不需要case by case的去解决一些兼容问题。

缺点:不标准,复用性不高,开发成本大

这种控件针对性很强,也就导致了复用性不高。

因为不是标准控件,所以所有东西都需要自己实现,大量边界条件需要自己想清楚,开发成本很大。

结语

其实我也不知道该怎么结束这个话题、我也在纠结中~~~

WebComponent也好,以前的htc也罢,还有React Canvas,不也是为了解决这种问题嘛(看上去这三个好像差很远,尤其是React Canvas。但其实都一样,都是用自定义的东西去统一实现输入输出,从而避免浏览器的差异化处理)。

也许未来移动端浏览器对于可交互元素的处理趋向一致和稳定后,我们的想法又会变得不一样。

 

最后补一句,我纠结的问题,是移动端富交互的场景,普通的展示型页面,还是该怎么来怎么来,不受影响的。