ID命名規范 · EasyWeb開發文檔

## 1.7.ID命名規范 ID命名規范是SPA單頁面版強烈建議的，非SPA單頁版也建議ID參考此規范來命名。 **總體命名規則xxxXxxXxx** - 第一個xxx &emsp; 模塊名，比如用戶模塊`user` - 第二個Xxx &emsp; 功能描述，比如添加`Add` - 第三個Xxx &emsp; 元素類型，比如按鈕`Btn` 例如頁面是user.html，它的各個元素命名如下： **按鈕的命名** ```html  <button id="userAddBtn" class="layui-btn">添加</button> <button id="userEditBtn" class="layui-btn">修改</button> <button id="userDelBtn" class="layui-btn">刪除</button> ``` **表格的命名** ```html  <table id="userTable" lay-filter=""userTable"></table>  <form class="layui-form" id="userTbSearchForm" lay-filter="userTbSearchForm">   <button class="layui-btn" lay-filter="userTbSearch" lay-submit>搜索</button> </form>  <script type="text/html" id="userTbBar"> <a class="layui-btn" lay-event="edit">修改</a> <a class="layui-btn" lay-event="del">刪除</a> </script>  <script type="text/html" id="userTbState"> <input type="checkbox" lay-filter="userTbStateCk" value="{{d.userId}}" lay-skin="switch" lay-text="正常|鎖定" {{d.state==0?'checked':''}}/> </script> ``` **一個頁面有多個表格的命名** ```html   <table id="userOrderTable" lay-filter=""userOrderTable"></table>  <script type="text/html" id="userOrderTbBar"> <a class="layui-btn" lay-event="edit">修改</a> <a class="layui-btn" lay-event="del">刪除</a> </script> ``` **表單彈窗的命名** ```html  <script type="text/html" id="userEditDialog">  <form id="userEditForm" lay-filter="userEditForm" class="layui-form model-form">   <button class="layui-btn" lay-filter="userEditSubmit" lay-submit>保存</button> </form> </script> ``` **頁面其他彈窗的命名** ```html   <script type="text/html" id="userInfoDialog">  <form id="userInfoForm" lay-filter="userInfoForm" class="layui-form model-form">   <button class="layui-btn" lay-filter="userInfoSubmit" lay-submit>保存</button> </form> </script> ``` 表單里面的input建議少用id，只用name，取input的值通過監聽表單提交來取，用input通過`$('#xxxForm [name="xxx"]')`來寫。 **其他元素ID命名** ```html   <select id="userRoleSel"></select>  <input id="userCommentsEdt" /> ``` **元素類型簡寫** 元素 | 簡寫 | 描述 --- | --- | --- 按鈕類 | `Btn` | `<button>`、`.layui-btn`等輸入類的 | `Edt` | EditText的簡寫，`input`、`textarea`等選擇類的 | `Sel` | 下拉框、多選下拉框等表格 | `Table` | `id="userTable"`、`id="userOrderTable"`等表格附加組件 | `Tb` | `id="userTbBar"`、`id="userOrderTbBar"`等彈窗 | `Dialog` | `id="userEditDialog`、`id="userInfoDialog"`等表單 | `Form` | `id="userEditForm`、`id="userInfoForm"`等表單提交按鈕 | `Submit` | `id="userEditSubmit"`、`id="userInfoSubmit"`等 **頁面的命名** ```html  <body id="userApp"></body> ``` > 以上規則只是規范，非必須要求