xufei

# MVVM时代的Web控件 ——基于AngularJS实现 前不久，Yahoo宣布了一个消息，[停止YUI框架的开发](https://news.ycombinator.com/item?id=8243523)，令人很多感慨。YUI作为最知名的控件库之一，影响了几乎整整一代前端开发人员。 现在这个时代，除了最基本的模式，控件库已经被极大地多样化，差异化了，所以，不用尝试在一个控件中考虑太多，你再考虑也考虑不完需求，反而会把代码变得臃肿。 一些前端MV*模式和Web Components的流行，使得我们可以用更轻松快捷的方式组织界面，在这个过程中，需要重新考虑控件和普通业务界面的分界，控件的概念实际上已经淡化了。 是不是我们就不再需要Web控件库了？也不是。在很多场景下，还是会出现一些固定的UI模式，如果有较好的封装，会对业务开发提供很大的便利。现在流行的新框架很多，AngularJS，Polymer，React，每种都有自己的一套理念，目前各自的生态圈都是不如jQuery的，但我们如果硬把jQuery的控件拖过来，也会很别扭，那怎么办呢？ 毛主席教导我们，自己动手，丰衣足食。全新的引擎，就应当有全新的外围，不能开着坦克还射箭，我们试试来自己搞一下。 用每种框架实现控件，都需要遵循它的理念，利用它的优势特性，然后用一些特殊优化来绕过它的弱点。 本文主要基于AngularJS框架，对构建一个Web应用中可能会面临的“控件”进行一些探讨，用下面几个典型的控件实现来大致说明它们的理念差异。 ## 控件的分类方式 对于不同类型的控件，我们的处理方式是不同的，先作一下分类： ### 容器 所谓容器，意思是主要用于放置一些东西，最多也就做一下状态切换之类的工作，比较典型的是Panel，TabNavigator，Accordion。 在ExtJS这样的控件库里，会有Panel这种纯静态容器，这样的容器其实完全没有封装的必要，封装了可以省一点点编码量，但无足轻重，所以我们无视它。 另有一些界面容器，之前我们会把它做成控件，比如Accordion，TabNavigator，但其实它的内部实现并不复杂，无非是选中项切换，创建或者移除子项等等，而且，还要顺便提供一大堆的参数配置，用于实现界面。 比如，jQuery UI的Accordion实现：[https://github.com/jquery/jquery-ui/blob/master/ui/accordion.js](https://github.com/jquery/jquery-ui/blob/master/ui/accordion.js)，内部封装了各种DOM操作，把HTML打成碎片混在JavaScript中，如果想要做一些UI层面的调整，非常困难。 在MVVM时代，如果借助数据绑定的力量，有可能把这个控件的实现改得跟原先完全不一样。 在AngularJS的主页上，有这么一个Demo： ``` HTML ``` 这个Demo做了两个自定义的标签，用于简化实现TabNavigator的HTML代码。原先我们可能要这么写： ``` HTML Home...

大家在这里推荐一些比较好的书吧？