基于 Delphi 的前后端分离：之五，使用 HTMX 让页面元素组件化之面向对象的Delphi代码封装

前情提要

本博客上一篇文章，描述了使用 Delphi 作为后端的 Web Server，前端使用 HTMX 框架，把一个开源的前端图表 JS 库，进行了组件化。

上一篇文章仅仅是描述了简单的前端代码组件化的可能性，依然是基于前端库的 JS 字符串代码。

接下来，我们要把 JS 的字符串代码，变成 Delphi 的面向对象编程，封装为一个 Delphi 的类。

当然，最终输出给前端的，依然是 JS 字符串代码。

详情开始

需求描述

当前端需要一个图表组件的时候，后端的 Web Server 需要发送这个图表组件的代码。这个图表组件有很多变量，比如 Title，是 Light 模式还是 Dark 模式（显示在图表上，一个是白底，一个是黑底），等等。另外，图表的数据，也需要程序根据外来的数据进行赋值。外来数据，可能是一个来自数据库的 DataSet。

框架描述

因为上一篇博客里面用到的那个图表的 JS 代码，保存在一个外部文件中，我们把这部分代码的需要根据程序运行动态变化的部分拿出来，由我们的 Delphi 的对象去生成。不变的部分，依旧让它在这个外部文件里面，作为一个模板。

做一个包装这个图表的对象，在这个对象里面，处理这个图表有关的数据。这个对象最终将这些数据输出为 JSON 字符串作为前端图表的代码的一部分。

总之，就是把需要动态变化的部分，作为对象的属性参数。把图表的数据也是需要随时可以修改的，作为对象的方法。最终，这个对象，把数据打包为一个 JSON 字符串，然后加载外部模板文件，用这个 JSON 字符串替换掉模板文件里面的标志位，最终输出完整的图表的 JS 代码给客户端。

实现代码

图表组件的代码：

图表组件原本的代码如下：

<div id="chartContainer" style="height: 370px; width: 100%;"></div>

<script type="text/javascript">

var chart = new CanvasJS.Chart("chartContainer", {
	theme: "light1", // "light2", "dark1", "dark2"
	animationEnabled: false, // change to true		
	title:{
		text: "Basic Column Chart"
	},
	data: [
	{
		// Change type to "bar", "area", "spline", "pie",etc.
		type: "column",
		dataPoints: [
			{ label: "apple",  y: 10  },
			{ label: "orange", y: 15  },
			{ label: "banana", y: 25  },
			{ label: "mango",  y: 30  },
			{ label: "grape",  y: 28  }
		]
	}
	]
});
chart.render();

</script>

上述代码中，有关图表的数据是写死的。我们要把数据部分拿出来，用 Delphi 的对象来动态创建。抽调数据部分，留下不变的部分，作为模板。

图表组件的模板代码：

<div id="chartContainer" style="height: 370px; width: 100