使用ENO将您的JSON对象生成HTML显示

原创已于 2025-07-11 14:15:41 修改 · 435 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#json #html #javascript #eno #前端

于 2025-07-09 07:51:35 首次发布

　　ENO 是简单易用，性能卓越，自由灵活开源的 WEB 前端组件；实现 JSON 与 HTML 互操作的 JavaScript 函数库。没有任何其它依赖，足够轻量。

WEBPack NPM 工程安装。

npm install @joyzl/eno

然后在JS中引用

import "@joyzl/eno";

将JS实体对象填充到表单

　　假设有一个如下的HTML表单

<form id="form2">
	<input name="id" type="hidden" />
	<input name="name" type="text" />
	<input name="email" type="email" />
	<select name="type" >
		<option value="1">TYPE 1</option>
		<option value="2">TYPE 2</option>
	</select>
	<textarea name="remark"></textarea>
</form>

　　通过以下代码将实体对象，设置到表单中，实体对象可以从服务器请求获得，有我们需要设置到表单供用户编辑的值

import eno from "@joyzl/eno";

let entity = {
    // 这是实体对象
    "id": "iu7ytgfr5",
    "name": "无名",
    "email": "simon@joyzl.com",
    "type": "2",
    "remark": "这是备注"
}
eno.set("#form2", entity);

　　实体对象中的字段会根据表单中标签的属性 name 将其对应填充，用户就可以编辑了。

从表单获取JS实体对象

　　用户编辑完成后，我们还要将值取回来不是吗，然后检查验证后提交给服务器，这不是常规的操作吗。通过以下简单的代码我们可以将表单的值获取回来。

import eno from "@joyzl/eno";

let entity = eno.get("#form1");
console.log(entity);

　　获得对象将根据表单的标签名称 name 建立 JSON对象，大概是下面的样子。

{
    "id": "iu7ytgfr5",
    "name": "无名",
    "email": "xxxx@joyzl.com",
    "type": "1"
}

　　ENO 不限制是不是表单，普通的HTML标签也可以设置值和获取值，基本规则就是标签的 name 属性。

　　这不是小儿科吗？接下来大家最关心的来了；

JS实体对象数组构建HTML列表

　　假设我们有多个实体对象构成的数组，例如从服务器读取而来的用户列表 JSON，通常需要展示为列表给用户看，在提供些操作给用户。

　　我们有下面的示例JSON对象实例，就是简单的用户信息。

[
    {
        "name": "Simon",
        "email": "simon@joyzl.com"
    },
    {
        "name": "Chen Luo",
        "email": "cl@joyzl.com"
    },
    {
        "name": "Li Xiao Ming",
        "email": "lxm@joyzl.com"
    }
]

　　然后需要建立一些HTML标签，用来指示如何呈现这些用户信息，如下面所示；这是展示单个用户信息的标签模板，它可以位于我们的HTML文件中。

<div id="list1" class="g v vm1 brs">
	<div class="secondary pm">
		<div name="name"></div>
		<div name="email"></div>
	</div>
</div>

　　通过最简单的代码，让我们把JSON对象按我们期望的方式构建为列表把；

import eno from "@joyzl/eno";

let entities = [{...}];

// 构建列表
eno.sets("#list1", entities);

　　一切顺利，我们将看见你的HTML变成了如下面所示的列表

ENO还有更多功能辅助这些操作，更多信息去看看这个开源项目吧

https://gitcode.com/joyzl/eno

https://gitee.com/joyzl/eno

https://github.com/JoyLinks/eno