前端基础：聊聊Web常见交互处理时的一些注意事项和方案
发布/
小网
数据源/原创
简单聊聊Web界面上常见的一些交互以及以UI开发时的一些小方案，让您快速有效的构建Web应该程序。
【HTML】
定义结构，把页面的基石（结构/骨架）搭建好。
【CSS】
对页面结构（骨架）进行润色和布局。
【JAVASCRIPT】
让页面动起来，并辅助增加HTML和CSS不能完成的功能。
1. 表单验证
2. 数据列表
3. 信息对话框
4. 交互弹层
5. 信息提示
6. ActionSheet
7. Tab Frame
8. 纪灯片
9. ...
上节介绍了一些常见的UI（数据）交互，那么在UI结构如何设计呢？下面介绍一下博主的一些设计原则。我们在开发时候，一般是一个数据（UI）模块由一外父级节点包含他内部的子数据（UI）片断。总结一下，我们可以遵循以下的一些原则：
a) 单一原则(1)
<box></box>
b) 1对1原则(1...1)
<box> <item></item> </box>
c) 1对n原则(1...n)
<box> <item></item> <item></item> <item></item> </box>
d) 1+组合(1...n...n)
<box> <group> <item></item> <item></item> </group> <group> <item></item> <item></item> </group> </box>
e) 并列组合(1 + 1...1 / 1...n / 1...n...n)
<box><box> <box></box> <!-- /////////////////////// --> <box></box> <box> <item></item> </box> <!-- /////////////////////// --> <box></box> <box> <item></item> <item></item> <item></item> </box> <!-- /////////////////////// --> <box></box> <box> <group> <item></item> <item></item> </group> <group> <item></item> <item></item> </group> </box>
1. 表单结构(1...n...n)
<div class="dataform"> <form name="dataform"> <figure class="dataform-block"> <figcaption class="dataform-caption flexbox middle"> <span>基础信息</span> </figcaption> <dl class="dataform-item flexbox top left"> <dt> <span>纯文本字段：</span> </dt> <dd> <div class="text-wrapper">text field</div> </dd> </dl> <dl class="dataform-item flexbox top left"> <dt> <span>普通文本：</span> </dt> <dd> <div class="input-wrapper flexbox top left wrap"> <input type="text" class="text" name="" placeholder="请输入key"> <span class="helptext">限输入200个汉字</span> </div> <ins class="icofont retmsg">返回信息</ins> <!-- <ins class="icofont retmsg error">返回信息</ins> <ins class="icofont retmsg success">返回信息</ins> <ins class="icofont retmsg info">返回信息</ins> <ins class="icofont retmsg alarm">返回信息</ins> --> </dd> </dl> </figure> <dl class="dataform-item flexbox top left"> <dt> <span>下拉选择：</span> </dt> <dd> <div class="input-wrapper flexbox top left wrap"> <cite class="selectbox flexbox middle justify"> <select> <option>请选择</option> <option value="1">中国</option> <option value="1">美国</option> <option value="1">英国</option> </select> <i class="icofont"></i> </cite> <cite class="selectbox flexbox middle justify"> <select> <option>请选择</option> <option value="1">中国</option> <option value="1">美国</option> <option value="1">英国</option> </select> <i class="icofont"></i> </cite> <a href="#" class="helplink">添加所属地</a> <a href="#" class="helplink">添加所属地</a> <a href="#" class="helplink">添加所属地</a> </div> </dd> </dl> <dl class="dataform-item dataform-btns flexbox top left"> <dt> <span> </span> </dt> <dd> <div class="input-wrapper flexbox top left wrap"> <button type="button" class="button orange">确定</button> </div> </dd> </dl> </form> </div>
2. tab面板基础结构（1...n...n）
<div class="tab-frame"> <ul class="tab-menus flexbox middle justify"> <li class="on" data-tab-menu="menu1" data-action-click="go://tab#menu1" data-tab-request="">menu1</li> <li data-tab-menu="menu2" data-action-click="go://tab#menu2" data-tab-request="">menu2</li> </ul> <div class="tab-bodies"> <div class="tab-body" data-tab-body="menu1"> </div> <div class="tab-body" data-tab-body="menu2"> </div> </div> </div>
3. 数据列表面板基础结构（1...n...n）
<div class="dataset"> <!-- 数据渲染容器 --> <div class="dataset-items"> <div class="dataset-item"></div> <div class="dataset-item"></div> </div> <!-- 无数据显示 可根据情况进行删减 --> <div class="dataset-nodata"> <span class="icofont info">暂无数据</span> </div> <!-- 加载更多数据 可根据情况进行删减 --> <div class="dataset-moredata"> <span class="icofont">点击加载更多</span> </div> <!-- 传统分页栏 可根据情况进行删减 --> <div class="dataset-pagebar flexbox middle center"> <cite>总<em>120</em>条记录</cite> <ul class="pagebar flexbox"> <li class="pre-page" data-action-click="go://url#?page=1">上一页</li> <li class="page" data-action-click="go://url#?page=1">1</li> <li class="ellipsis">...</li> <li class="page" data-action-click="go://url#?page=1">9</li> <li class="page" data-action-click="go://url#?page=1">10</li> <li class="page" data-action-click="go://url#?page=1">11</li> <li class="page on" data-action-click="go://url#?page=1">12</li> <li class="page" data-action-click="go://url#?page=1">13</li> <li class="page" data-action-click="go://url#?page=1">14</li> <li class="ellipsis">...</li> <li class="page" data-action-click="go://url#?page=1">9999</li> <li class="next-page" data-action-click="go://url#?page=1">下一页</li> <li class="jump"> <form method="get" name="jump" action="/?q=" class="flexbox middle right"> <cite>共 100 页</cite> <span>到</span> <input type="text" name="page"> <span>页</span> <button type="submit" class="button">GO</button> </form> </li> </ul> </div> </div>
4. ActionSheet基础结构（1 + 1...1 / 1...n / 1...n...n）
<div class="mod-actionsheet mod-actionsheet-mask exit"></div> <div class="mod-actionsheet mod-actionsheet-panel exit sheetbox"> </div>
5. 逻辑交互浮层基础结构（1...1）
<div class="mod-logicbox-mask"> <div class="mod-logicbox-box abs-center"> <!-- 这里是内容 --> </div> </div>
1. HTTP错误页面
a) 404错误页面
b) 403无权限访问界面
c) 500内部程序错误
2. 程序业务逻辑异常统一通知界面（有发生非常严重的异常时唤起的界面）
3. 网络异常通知界面（APP/小程序等）
4. 统一功能唤起界面（如果有）
a) 信息确认界面
b) 第三方服务唤起时的等待过度页
1. Normal状态
2. Hover状态
3. Visited状态
4. Active状态
5. Focus状态
6. Disabled状态
7. Loading状态
统一数据协议更方便的前后端数据交互的沟通和协作开发，提升前端开发效率，使其不完全依赖后端接口就可以进行数据交互。数据结构示例：
JSON
{
"code":"-1",
"message":"Unknown Error",
"helperMessage":"",
"success":false,
"timestamp":1524318609033,
"token":"",
"expired":false,
"pageIndex":0,
"pageSize":20,
"recordSize":0,
"dataSet":null
}XML
<response> <code>-1</code> <message>Unknown Error</message> <helperMessage></helperMessage> <success>false</success> <timestamp>1524318696907</timestamp> <token></token> <expired>false</expired> <pageIndex>0</pageIndex> <pageSize>20</pageSize> <recordSize>0</recordSize> <dataSet></dataSet> </response>
1. 初始状态
2. 触发状态
a) hover
b) active
3. 发送请求
4. 等待服务器响应
a) loading
b) Progress
5. 中断请求
a) abort
b) timeout
6. 服务器响应完成
a) success
b) failure
c) parse error
d) no data
7. HTTP异常