原生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。但其实都一样，都是用自定义的东西去统一实现输入输出，从而避免浏览器的差异化处理）。

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

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