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