众所周知，JS的发展迅速，出现了很多前端优秀框架。这类的框架（不是类库）大致可以分为两类，一类是程序架构类型的框架，一种是UI设计类的框架。这两种框架有什么区别，我按照我自己学习的成果给大家讲一讲，并且引出我后面的问题，相信也是很多人遇到的问题。

###一、程序架构类型的框架###

在前端，我们比较常用的就是三大语言，HTML、CSS、JavaScript，HTML负责做前端视图的结构，CSS负责视图的样式，JavaScript的功能就很多了，更抽象的说是通过改变视图结构、样式等进行良好的交互。且不说JS能操作DOM和BOM，但就一个大型的项目，JS写多了就会显的累赘，书写麻烦，维护坑爹。一类用于程序架构的框架由此诞生，例如Angular.js，他没有提供所谓的UI，仅仅只是通过标记的形式来扩展HTML的能力。书写的格式是MVC，但支持双向绑定的特定又更像MVVM，他代码可以表现的很清晰明了，同时又能实现以往需要大量代码才能实现的功能。同样，Knockout.js也是如此优秀的框架。

###二、UI设计类的框架###

当然会有人提出基于CSS的设计框架bootstrap，不错，他简简单单只是从CSS入手，与JS解耦分离，能展示比较基本的界面美观。可是作为程序员，更多的希望他们的操作都是面向对象的，因此，用JS来操作UI组件，变的是如此的需要。早期的DOJO，后来的ExtJS，都从一定程度上简化了程序员对界面的美化操作，更直观的以对象形式去构造界面。包括如今的Kendo-UI，也是优秀的UI框架。

###三、他们的优势和劣势###

架构框架，典型的抛弃了设计的角度，更多的为今后程序的修改、扩展做铺垫，让应用更加的平滑、持久，有良好架构的框架，还能有效的帮助测试。但做的再好，人们依然感到美中不足，对的，他没有美观的UI。         UI框架，典型的照顾程序员，将设计好的组件以对象呈现，拥有更好的开发速度。即便默认的UI风格不满足需求，还对应有UI的重写以及扩展。但再美观，功能再强，DOM上的渲染始终是耗时，他会重写很多DOM元素，以及在原有的DOM内外扩展N多的DOM。

###四、他们能结合吗？###

至少我尝试过，挺困难的。以下几点很难平衡： 1.代码简洁、架构清晰，层次分明 2.业务和逻辑分离，模型和数据分离，视图和模板分离 3.不破坏原有结构，实现开发分离独立

###五、为什么无法结合？###

个人觉得无法结合原因是开发模式的问题。前端的开发模式有2种，一种结构化，一种组件化。 结构化的开发模式往往是先写HTML标记语言，通过一些可视化工具，HTML写完的时候，对应的视图其实就已经出现了，然后就需要进行修整理、填色、实现动态功能。组件化的开发模式对应的基本没有HTML文件，全部交由JS去在DOM层上渲染修改，JS的代码完成并不能很直观的表现出来，而且UI和动画写死，扩展并不容易。         我起初做过这样的例子，试图将Angular和Kendo-UI结合，但是失败了。我始终认为，Kendo-UI就是帮我进行页面渲染的， 他甚至连我的数据都不应该碰到，而结果是他的没碰我的数据。我先用Angular设计前端模板页面，然后编写JS交由$http去帮我取出数据，由于页面上绑定了数据，我不需要手工处理，取出来的数据就自然的渲染到了HTML模板上，还是双向绑定。HTML代码写的非常简洁，明了，运行后数据都出现在了前端，虽然样式不好看。第二步我就开始添加Kendo-UI了，按照官网给出的例子，只需要一句代码就能实现。结果意想不到，美观度样式是有了，但是所有的数据都没有了。后来又尝试了ExtJS来进行UI渲染，结果也是UI出来了，数据没有了。原因是什么呢？经过几番周折，原因找到了：         Angular的数据绑定不是复制，而是真正的映射，相信大家对这两个概念都不陌生。大多数UI框架将后台取出的框架渲染到组件中，都是采用的复制方式，取出的数据不会缓存到内存中，除非他提供这样的机制并且你也这么做了。复制的方式我们可以做实验，你在前端视图对值进行了修改，后端的值是无法动态发生改变，除非你调用getValue类似的操作。而你把JS获取的数据作为全局对象进行操作时，视图的值也不会因为原始数据的变化而变化。映射的方式都大不一样了，双向的绑定使得他们任意的改变都会影响彼此。Angular做的是映射，他是通过HTML结构化标记来做映射的，关键就是这个标记，标记是写在HTML标签上的，只要标签发生了改变，就相当于断开或改变原有映射关系。Kendo-UI在做视图渲染的时候，就会将原有的HTML标签进行重绘、改写，在原有DOM内外添加新的DOM。标签的变化使得Angular无法找到作为数据映射的标记，因此数据只会在缓存中存在，却无法再Kendo-UI渲染过的视图上存在。

###六、就不能有一个JS框架是能整合这两个特性的吗？###

有，真的有，Kendo-UI就具备UI和架构（MVVM），但是经过反复的使用，依然会遇到之前的问题。grid-table-row-template和mvvm-binding-tempate这两个案例，前者是将table（原生的HTML标签）渲染成为Grid控件，同时可以指定”行模板“，后者是将数据通过MVVM的模式绑定到模板中，他们就是不能中和在一起，搞的我痛苦不已。最后，虽然实现了一种能结合的方法，但是代码怎么看怎么恶心，又根本不像MVVM的写法或者MVC的架构。

###七、结论###

其实不难发现，要想整合这两种特性，就是要避开他们操作的数据，UI框架和架构框架都是试图在DOM上做额外的渲染来实现想要的功能的。除非，有一个框架做到了，那就不必要大费周章的去把两个框架弄到一起。         （新出的几个框架api都很详细，例子也很详尽，但最大的问题就是2个demo似乎很难整合到一起，过于单调。）

###八、问题###

关于以上，大家看过后不知道有什么看法，有没有能提供帮助或者线索的，以及你们现在用一些新的框架时是如何同其他框架做整合的。