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

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

WEBPack NPM 工程安装。

npm install @joyzl/eno

然后在JS中引用

import "@joyzl/eno";

将JS实体对象填充到表单

　　假设有一个如下的HTML表单

	
	
	
	
		TYPE 1
		TYPE 2
	
	

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

import eno from "@joyzl/eno";

let entity = {
    // 这是实体对象
    "id": "iu7ytgfr5",
    "name": "无名",
    "email": "[email protected]",
    "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": "[email protected]",
    "type": "1"
}

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

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

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

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

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

[
    {
        "name": "Simon",
        "email": "[email protected]"
    },
    {
        "name": "Chen Luo",
        "email": "[email protected]"
    },
    {
        "name": "Li Xiao Ming",
        "email": "[email protected]"
    }
]

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

　　通过最简单的代码，让我们把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