一、基于HTML开发组件的设计思想
要想知道基于原生的HTML进行UI组件开发是什么鬼，您可以狠狠地点击这里：基于原生的HTML UI组件体验demo
点击上面的demo, 进入一个平凡的静态页面，引入眼帘的是一个普通的表单，里面的UI都是系统默认的，HTML功能也是原生的。
例如：
title提示
选择日期
点击提交的表单验证
UI虽然原始，但是功能却很健全。
例如：
男女款式、城市以及运费险对价格的影响
表单提交事件
下面，就是奇迹出现了，点击demo页面(下图所示)的按钮进行某项目UI组件资源的加载和初始化：
结果，一瞬间，上面原始粗糙的界面一下子变成了这样子：
妥妥的丑小鸭变成了白天鹅，包括之前原生的HTML功能。
例如：
title提示
选择日期
点击提交的表单验证
而，最最重要，和最最神奇的事情是：我们仅仅是引入了UI组件的一些CSS和JS，对，仅仅是引入和一点初始化，没有动之前一点点一丝丝的业务JS. 但是，之前的各种交互功能，却完全不受影响，反而体验更上两层楼!
请看下面的gif截图演示：
之所以这里的UI组件可以和业务相关JavaScript完全分离，同时可以无缝对接。就是因为设计理念上是基于原生的HTML实现的，让UI组件回归其本质或者说本职作用——UI.
二、基于原生HTML的UI组件开发
解决2个疑问：
- new DatePicker($("#date"), {
type: "date",
initDate: ..,
beginDate: ..,
endDate: ..,
onSelected: $.noop
});
API参数，事件的回调全部源自JS参数。而面向HTML的设计思想下的实现则是：
$("input").attr({ "min": "2015-12-27", "max": "2016-12-27" });UI组件会自动同步。没有任何组件相关的JS代码，也没有什么故弄玄虚，没有所谓的高屋建瓴，全是很简单基础的HTML操作。是不是这样的开发反而很省心，连小白用户也能上手?
于是乎，在多团队联合协作开发的时候，前端开发的进度并不会受UI组件开发影响，面向HTML，专心自身业务开发就可以了。
于是乎，实现了一个听上去很了不得的东西：前端分离。
不仅如此，厂子里有很多开发，负责内部项目，会写JS擅长业务功能实现，但是，UI这块是个软肋。OK，此时，我们这里面向HTML开发的UI组件体系就是其救星，对吧，直接引入CSS和JS，简单全局初始化一下(可能还有一些简单的微调)，结果，页面立马高大上了，是不是很有用!
4. 可以一次性全局处理
传统实现，每个具体业务的脚本里面要参与UI组件的具体API参数设置。而面向HTML的实现，API落地与具体的业务页面，于是乎，只要在项目的common.js中全局初始化一下，如下拉Select.init(), 具体的业务JS文件(绝大多数情况下)中就无需再出现UI组件相关的JS代码。
UI层的JS代码和业务层JS代码分离，实现进一步的「前端分离」，去耦合。对于日后的维护、升级等必定大有裨益。
四、总结
本文主讲设计思想，至于具体的技术细节，以后有机会会慢慢分享。越是简单的成品越是需要足够的积累。
然而，现在的我再重新评估UI组件的实现，还是有一些遗憾的，主要遗憾在于，HTML层→数据层→展现层这三层概念实现的时候并没有理得很清楚。目前，HTML层和展现层没有任何问题，但是，数据层，并没有完整贯穿整个UI组件体系，导致，本UI组件体系不能很好地吸引对JSON数据有着偏执爱好的开发，以及应付潜在的极端需求。
不过，不要担心，明年，也就是16年，我会对组件设计进一步增强，首先，不考虑IE7浏览器，于是可以做的事情就更多了;其次，清晰的数据层作为中间层的代码重构等。
以上就是基于原生HTML的UI组件开发的内容，更多相关内容请关注微课江湖（）！