【问题】Nodejs中基于DOM指令的数据绑定和基于DOM属性的UI渲染能否结合？

【问题】Nodejs中基于DOM指令的数据绑定和基于DOM属性的UI渲染能否结合？

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

###八、问题###

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


4 回复

结合您的问题，我们可以探讨一下Node.js中基于DOM指令的数据绑定和基于DOM属性的UI渲染是否能够结合。在前端框架中，Angular和Kendo-UI分别代表了基于DOM指令的数据绑定和基于DOM属性的UI渲染。根据您的描述，尝试将两者结合遇到了一些挑战。

示例代码

假设我们尝试将Angular（用于数据绑定）和Kendo-UI（用于UI渲染）结合。以下是一个简单的示例：

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Angular + Kendo-UI Example</title>
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2023.2.712/styles/kendo.default-v2.min.css">
</head>
<body ng-app="app" ng-controller="MainCtrl">
    <div kendo-grid="grid"
         k-options="gridOptions"
         k-data-source="dataSource">
    </div>

    <script src="https://code.angularjs.org/1.8.2/angular.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2023.2.712/js/kendo.all.min.js"></script>
    <script>
        angular.module('app', [])
            .controller('MainCtrl', function($scope) {
                $scope.dataSource = new kendo.data.DataSource({
                    data: [
                        { name: 'John Doe', age: 30 },
                        { name: 'Jane Doe', age: 25 }
                    ]
                });

                $scope.gridOptions = {
                    columns: [
                        { field: "name", title: "Name" },
                        { field: "age", title: "Age" }
                    ],
                    dataSource: $scope.dataSource
                };
            });
    </script>
</body>
</html>

解释

  1. HTML结构：我们定义了一个<div>元素，它使用Kendo-UI的kendo-grid指令来创建一个表格。
  2. Angular模块和控制器：我们定义了一个Angular模块和控制器，其中包含一个数据源和表格选项。
  3. 数据源：数据源使用Kendo-UI的DataSource对象来管理数据。
  4. 表格选项：表格选项定义了列和数据源。

遇到的问题

尽管上述示例看起来简单，但在实际应用中可能会遇到以下问题：

  1. DOM操作冲突：Kendo-UI在渲染表格时会重写DOM，这可能导致Angular的数据绑定失效。
  2. 数据同步问题：Kendo-UI的数据处理方式可能与Angular的数据绑定机制不兼容，导致数据不同步。

结论

结合Angular和Kendo-UI确实存在一定的难度，主要是由于两者在DOM操作和数据同步方面的差异。解决这个问题可能需要深入了解每个框架的工作原理，并进行一些自定义的调整。如果遇到这些问题，可以考虑寻找专门针对这些框架集成的解决方案，或者选择一个更统一的框架来简化开发流程。


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

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

Node.js 主要用于后端开发，而 DOM 操作通常是在浏览器环境中进行的，比如在前端框架中（如 Angular、React 等）。如果你想要在 Node.js 中实现基于 DOM 指令的数据绑定和基于 DOM 属性的 UI 渲染的结合，通常需要借助虚拟 DOM 库，如 preact 或 inferno。

以下是一个简单的示例，使用 preact 和自定义的属性绑定来模拟数据绑定的效果：

// 安装 preact
// npm install preact

import { h, render, Component } from 'preact';

class App extends Component {
  constructor() {
    super();
    this.state = { name: 'World' };
  }

  handleChange(event) {
    this.setState({ name: event.target.value });
  }

  render() {
    return (
      <div>
        <input type="text" value={this.state.name} onChange={(event) => this.handleChange(event)} />
        <h1>Hello, {this.state.name}!</h1>
      </div>
    );
  }
}

render(<App />, document.body);

在这个示例中，我们创建了一个简单的应用，使用 Preact 来渲染一个输入框和一个标题。输入框的值绑定到组件的状态，当输入框的值发生变化时，状态更新，标题也会随之更新。这实际上是一种简单的数据绑定和 DOM 属性的结合。

然而，真正的复杂场景下，结合 Angular 和 Kendo-UI 这样的框架可能会比较困难，因为它们的操作方式和数据流管理方式不同。如果需要结合多种框架的功能，可能需要考虑使用更现代的框架，如 Vue.js 或 Svelte，这些框架在设计时已经考虑了这种集成的需求。

回到顶部