Web组件开发

用了三天，看完了慕课网阿当的一个教程：阿当大话西游之WEB组件（我承认我偷懒了）。

打个广告，我一直关注慕课网，但这个课程是在w3cTech微信公众号上看到的，推荐关注。

其实，之前在知乎就看到过相关的讨论，比如在如何提高Javascript开发技能？这个问题先，司徒正美的回答：

许多UI库，像UIkit就只会将boostrap那一套东西抄过来，改一改就是一个新UI库，简单是浪费人力物力。UI要有底层库，通常我们是使用jquery或zepto这些标库做底子。（在这之前，你要有框架，库，底层库，核心库，模块，插件，标库这些概念）像avalon则是自己做底层库。其次是基于它们做一个widget的基类，然后所有UI组件都是从基类上设计出来。只有拥有同一套的接口的组件，才方便人家学习使用。比如说，隐藏显示，在boostrap是使用toggle这个方法实现的，在别的库是使用show, hide这两个方法实现的。这只是方法，让用户直接执行，没有回转的余地。这就需要onShow, onHide这些回调函数。此外，组件在初始化与销毁时也要有回调函数， onInit, onDestroy。这些功能点，都是要阅读大量的UI库才能积累出来。毕竟有许多人之前也用过一两个UI库，有一些功能他们自然而然就想调用某方法，结果到用你这库时，这功能竟然是缺失的，也没有相近解决方法，那么你就大大失败了！

最后你要知道你要开发那些组件，光是boostrap那十来个组件是远远不够的，每个公司的业务情况不一样，就会产生各种针对业务的组件，比如说城市选择组件， 具有联动效果的双日历。像富文本编辑器就制定性就更多，不可能将一个开源的editor的那有功能都引进来，那太大了！

司徒大大的回答就点名了组件开发的要害，和阿当的视频教程不谋而合，更准确的说是，组件开发已经形成了这样一个套路，大牛们早已炉火纯青，我等小辈还在苦苦追寻，但是大牛的分享让人豁然开朗，虽然不能一口吃成胖子，但是也建立了这样的思想，在具体的项目实战中，可以进行实践应用。

阿当的讲授是渐进增强的（原谅我用了这么个词）。整个课程以弹窗组件为示例，进行Web组件开发的讲解，最先是做一个简单的组件，然后慢慢进行拆分，增加事件监听，增加基类，从简单到复杂，循序渐进，很适合我们初学者。

组件分为四层：

我们再去看看司徒正美的答案，UI库通常用一个库做底子，就是框架Core那一层（教程里使用的jquery），为我们封装了浏览器底层的API，并且不担心浏览器的兼容性。框架之上，我们需要封装我们自己的组件，这里也可以分为两部分，框架通用组件（教程里的widget基类）和定制组件（弹窗组件）。

司徒正美简简单单的答案，阿当用3个小时给我们进行了详细的解释。

阿当最后提到的组件MVC化，还有最近兴起的Web Component等等，都是组件化的新方向，感觉hold不住了。。。

2015年3月25日更新

今天在微博上看到了这篇文章：2015前端组件化框架之路，对于这些并不能完全领会，因为对于MVC、MVVM不是很了解。

大牛们在纠结如何进行技术选型，我们再纠结学习什么。。前端的技术就是如此，更迭速度太快，而且又受限制于浏览器这样一个环境，当然除去了node之类的东西。文章最后也写到：这是一个最好的时代，也是一个最坏的时代。确实如此，技术更迭快，让我们应接不暇，但也说明我们可以学习可以尝试的东西也是更多。