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