【问题】基于DOM指令的数据绑定和基于DOM属性的UI渲染能否结合?
发布于 11 年前 作者 a272121742 5474 次浏览 最后一次编辑是 8 年前

众所周知,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似乎很难整合到一起,过于单调。)

###八、问题###

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

2 回复

写那么多,哪像是在发表问题,倒好像是在发表论文。

每个框架都有自己不同的设计风格的吧,强行糅合两个框架肯定是不可取的。还有,没有明白你要说的意思,ExtJS貌似有jquery的整合插件,如果要使用两个或以上的框架,建议自己写适配器吧

回到顶部