ID命名规范 · EasyWeb开发文档3

# ID命名规范 ## 1.7.ID命名规范 ID命名规范是SPA单页面版强烈建议的，非SPA单页版也建议ID参考此规范来命名。 **总体命名规则xxxXxxXxx** * 第一个xxx 模块名，比如用户模块`user` * 第二个Xxx 功能描述，比如添加`Add` * 第三个Xxx 元素类型，比如按钮`Btn` 例如页面是user.html，它的各个元素命名如下： **按钮的命名** ~~~  <button id="userAddBtn" class="layui-btn">添加</button> <button id="userEditBtn" class="layui-btn">修改</button> <button id="userDelBtn" class="layui-btn">删除</button> ~~~ **表格的命名** ~~~  <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> ~~~ **一个页面有多个表格的命名** ~~~   <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> ~~~ **表单弹窗的命名** ~~~  <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> ~~~ **页面其他弹窗的命名** ~~~   <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命名** ~~~   <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"`等 | **页面的命名** ~~~  <body id="userApp"></body> ~~~ > 以上规则只是规范，非必须要求