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
——————————

原文鏈接：https://blog.csdn.net/simonzhangxi/article/details/149214448