Smart UI前台开发帮助
1. 开发规范
1.1. HTML
1.1.1. HTML命名规范
类型 | 命名对象 | 命名 | 代码Demo |
input标签 | 类型简写+ P_+业务名(需求阶段已定义好)_+操作名（Add/Edit/Search等）+ 操作对象+ 命名 | ||
text/password | txt | <input type=”text” id=”txtSuppListName”> | |
button | btn | <input type="button" id=”txtSuppListName”> | |
checkbox | chk | <input type="checkbox" id=”chkSuppListName”> | |
radio | rdo | <input type="radio" id="rdoSuppListIsStop"/> | |
hidden | hid | <input type="hidden" id="hidSuppListNo"/> | |
file | fle | <input type="file" id="fleSuppFile"/> | |
常用 | textarea | txt | <textarea id="txtSuppEditNote" ></textarea> |
select | sel | <select id=”selSuppEditType”></select> | |
option | op | <option id=”opSuppEditName1”></option> | |
a | lnk | <a id=”lnkSuppListName”></a> | |
img | img | <img id=”imgSuppListName” /> | |
label | lbl | <lable id=”lblSuppViewName”></label> | |
font | fnt | <font id=”fntSuppViewName”></font> | |
button | btn | <button id=”btnSunnListSearch”></button> | |
容器标签 | （业务）命名（首字母小写） | ||
div | <div id="editSupp"></div> | ||
ul | <ul id="searchSupp"></ul> | ||
ol | <ol id="searchSupp"></ol > | ||
li | < li id="searchSupp"></ li > | ||
dd | < dd id="searchSupp"></ dd > | ||
dt | < dt id="searchSupp"></ dt > | ||
dl | < dl id="searchSupp"></ dl > | ||
table | < table id="searchSupp"></ table > | ||
th | < th id="searchSupp"></ th > | ||
tr | < tr id="searchSupp"></ tr > | ||
td | < td id="searchSupp"></ td > | ||
tbody | < dl id="searchSupp"></ dl > | ||
thead | < thead id="searchSupp"></ thead > | ||
tfoot | < tfoot id="searchSupp"></ tfoot > | ||
samp | < samp id="searchSupp"></ samp > | ||
span | < span id="searchSupp"></ span > | ||
p | < p id="searchSupp"></ p > | ||
其他 | hr | <hr /> | |
br | < br /> | ||
特殊命名 | 所有用于查询的标签, 类型简写后加’s’ | 如：查询：txtsName，编辑：txtName | |
1.1.2. HTML编写要求
1) 要求只能使用上述规定的标签
2) 每个标签要求结构完整；
如：<span/>应写为: <span></span>
除hr、br、img、input外标签都应该是标签对完整的
<br /><hr/><img />
3) 除容器和文字标签外，不允许在标签中放置内容。
错误的写法：<input type="checkbox">库 存</input>
正确的应该是：<input type="checkbox" value="库存" ></input>
4) 关于对象的样式设置应该尽量使用系统定义的样式，除特殊的情况。
如：<td >
1.2. JS
1.2.1. Javascript
1.2.1.1. JS命名规范
类型 | 命名对象 | 命名 | 代码Demo |
基础数据类型 | (类型简写+命名) | ||
string | str | var strSuppName | |
int | i | var iSuppNo | |
decmail | d | var dSuppNo | |
array | arr | var arrSuppNames | |
date | dt | var dSuppStopDateTime | |
Json | jsn | var jsnPostdata | |
扩展 | StringBulider | sb | var sbSuppName |
特殊对象类型 | object(class) | 命名 | |
常用 | 局部变量 | "_"+类型简写(包括Dom)+命名 | var _strSuppName = ‘’; |
全局变量 | 类型简写(包括Dom)+命名 | var strSuppName = ‘’; | |
function | 命名（首字母小写） | function addSupp() | |
function param | 类型简写(包括Dom)+命名（全小写） | function addSupp(suppid) | |
1.2.1.2. JS注释规范
类型 | 命名对象 | 命名 | 代码Demo |
在编写js注释时，各对象的类型名称 | 首字母大写；可以只用or进行多个对象的串联，不允许有空格 | StringorJQSelect | |
类型定义 | Dom对象 | Dom | |
Jquery Dom | JQDom | <param name="ctr" type="JQDom"></param> | |
JQ + 选择器名 + Str | |||
字串 | String | <param name="data" type="String"> </param> | |
Json对象 | Json | <param name="data" type="Json"> </param> | |
类型定义 | Bool对象 | Bool | <param name="data" type="Bool"> </param> |
Function | Function | <param name="error" type="function"> </param> | |
Date | Date | ||
Number | Number | <param name="error" type="Number"> </param> | |
复合命名 | Html字串或Dom | DomStr | <param name="panel" type="DomStrorJQSelect"> </param> |
特定命名 | FunctionCode | fncode | <param name="fncode" type="String">Function Code</param> |
UICode | uicode | <param name=" uicode " type="String"> UI Code </param> | |
主键 | key | <param name=" key " type="Object">主键</param> | |
全局参数名称 | paramname | <param name="paramname" type="String">参数name</param> | |
1.2.1.3. JS编写要求
1) 要求结构清晰，代码规范。
2) 所有string对象必须以'单引号包括起来，如内部需要在使用',使用转义符\"
3) 一个function 中内容不能过长，应该适当根据功能拆分成多个function。
4) 所有dom对象尽量全部使用jquery的方法进行操作
5) 关于js数据类型的处理应尽量使用jshepler,类型的prototype来完成.
6) 尽量使用局部变量，减少全局变量的使用，以减少内存的占用
7) 减少js闭包的使用，尽量避免内存泄露的风险。
8) 使用var弱类型对象时应该明确标示其作用范围，一旦含义改变时一定要注释清楚。
9) 统一使用ipsa2.0的基础组件库（jscontrols）编码，非特殊情况禁止直接调用控件（plugin）。
10) $ihelper库中已包含大多数情况的操作，基础操作应该都用$ihelper完成。
1.2.2. Jquery
1.2.2.1. Jquery编写要求
1) 选择的性能的顺序是id>tag>class,所以使用时，尽量使用性能高的选择器。
2) 有意识的用多重匹配的选择器
如：$('#id : tag')
3) 尽量使用id选择器获取单个对象或者idselector的链结构方式查询
如：$('#parentid child')
4) 在使用数据对象，或是json对象时，最后一项一定不能加",",否则IE7下脚本会出错
5) 所有的dom对象的样式设置必须使用css()样式设置的方式，不能使用width()这种直接设置的方式。
1.2.3. jq plugins
1.2.3.1. jq plugins结构顺序
属性定义、私有变量、私有方法、主体方法
1.2.3.2. jq plugins编写要求
1) 严格按定义的结构编写，注明实现功能及更新记录、注释清晰、标准化
2) 控件编写之前，要将显示端html完成、css规范完成（所有命名必须有该plugin名称的前缀+‘-’+命名）。
3) 属性定义根据情况定义初始化值
4) 编写方法，需要详细了解基础库中的内容。判断是否是为可以为公用还是只能私有。
5) 绝对禁止有固定的ID对象
6) 对外部引入的控件，详细的使用实例，实例都需要完整；了解的代码和修改的功能都要
详细注释。
7) 尽量采取在jscontrol的方式去控制控件达到需要的效果。
1.2.4. icontrols
对所有的plugins进行封装，对外统一出口，通过jsconfig设定各plugins属性初始化值
1.3. CSS
1.3.1. CSS基本命名规范
1) 采用组合命名规则，基本标签：对象简写+‘-’+功能命名；子对象为父对象命名+‘-’+功能命名
如：button：btn-save
2) 对于容器标签，则与对象命名相同即可
3) 了解各浏览器hack的写法
4) 明确各选择器的优先级，作用范围。
1.3.2. 全局CSS
1) body，主要控制内的所有内容的基础样式，如字体样式、背景等
2) *，清空所有对象的有影响的默认样式
3) 各类基础标签的通用样式
如：img{border-width: 0px;}
1.3.3. CSS编写规范
1) 使用CSS3.0的标准编写。
2) 子对象对采用链选择器的方式定义；
3) 对象尽量使用class选择器去匹配；对于特殊功能的才考虑使用ID选择器；
4) 标签选择器只能在全局CSS中定义，和子对象匹配的时候使用（也应尽量少使用），
其他时候禁止定义。
5) 开发端禁止使用滤镜；设计端也应尽量少使用滤镜。
1.3.4. CSS基本布局规范
基本布局类 | 全小写 | ||
页面所有内容的容器 | page | ||
页头 | header | ||
导航 | navbar | ||
左区域内容 | Content-left | ||
主体内容 | Content-main | ||
右区域内容 | Content-right | ||
页脚 | footer | ||
主菜单 | mainmenu | ||
左菜单 | leftmenu | ||
右菜单 | rightmenu | ||
1.3.5. CSS通用命名参考
通用类命名参考 | |||
登录 | loginbar | ||
标志 | logo | ||
子导航 | subnav | ||
子菜单 | submenu | ||
工具条 | toolbar | ||
搜索 | search | ||
搜索按钮 | btn-search | ||
标签页 | tab | ||
列表 | list | ||
数据表 | grid | ||
信息 | msg | ||
提示 | tips | ||
标题 | title | ||
网站地图 | sitemap | ||
1.4. Smart UI命名
类型 | 命名对象 | 命名 | 代码Demo |
公共内容 | UICode | u_模块名_page命名 | u_plun_BaseInput |
Fncode | fn_模块简写+方法编号 | fn_ns01 | |
页面区域 | 查询区域 | ps_模块名 (PanelSearch) | ps_User |
列表区域 | pl_模块名 (PanelList) | pl_User | |
编辑区域 | pe_模块名 (PanelEdit) | pe_User | |
编辑区域 | pv_模块名 (PanelView) | pv_User | |
页面区域父级容器 | c_页面区域命名 | c_pv_User | |
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论