Web前端开发命名规则.pdf

文档介绍：该【Web前端开发命名规则 】是由【小sjj】上传分享，文档一共【27】页，该文档可以免费在线阅读，需要了解更多关于【Web前端开发命名规则 】的内容，可以使用淘豆网的站内搜索功能，选择自己适合的文档，以下文字是截取该文章内的部分文字，如需要获得完整电子版，请下载此文档到您的设备，方便您编辑和打印。:.
SmartUI前台开发帮助



类型命名对象命名代码Demo
类型简写+P_+业务名(需求阶段已定义好)_+操作名
(Add/Edit/Search等)+操作对象+命名
text/passwordtxt<inputtype=”text”id=”txtSuppListName”>
input标签buttonbtn<inputtype="button"id=”txtSuppListName”>
checkboxchk<inputtype="checkbox"id=”chkSuppListName”>
radiordo<inputtype="radio"id="rdoSuppListIsStop"/>
hiddenhid<inputtype="hidden"id="hidSuppListNo"/>
filefle<inputtype="file"id="fleSuppFile"/>
textareatxt<textareaid="txtSuppEditNote"></textarea>
selectsel<selectid=”selSuppEditType”></select>
optionop<optionid=”opSuppEditName1”></option>
alnk<aid=”lnkSuppListName”></a>
常用
imgimg<imgid=”imgSuppListName”/>
labellbl<lableid=”lblSuppViewName”></label>
fontfnt<fontid=”fntSuppViewName”></font>
buttonbtn<buttonid=”btnSunnListSearch”></button>
(业务)命名(首字母小写)
div<divid="editSupp"></div>
ul<ulid="searchSupp"></ul>
ol<olid="searchSupp"></ol>
li<liid="searchSupp"></li>
dd<ddid="searchSupp"></dd>
容器标签
dt<dtid="searchSupp"></dt>
dl<dlid="searchSupp"></dl>
table<tableid="searchSupp"></table>
th<thid="searchSupp"></th>
tr<trid="searchSupp"></tr>
td<tdid="searchSupp"></td>
tbody<dlid="searchSupp"></dl>:.
thead<theadid="searchSupp"></thead>
tfoot<tfootid="searchSupp"></tfoot>
samp<sampid="searchSupp"></samp>
span<spanid="searchSupp"></span>
p<pid="searchSupp"></p>
hr<hr/>
其他
br<br/>
所有用于查询的标签,
特殊命名如:查询:txtsName,编辑:txtName
类型简写后加’s’

1)要求只能使用上述规定的标签
2)每个标签要求结构完整;
如:<span/>应写为:<span></span>
除hr、br、img、input外标签都应该是标签对完整的
<br/><hr/><img/>
3)除容器和文字标签外,不允许在标签中放置内容。
错误的写法:<inputtype="checkbox">库存</input>
正确的应该是:<inputtype="checkbox"value="库存"></input>
4)关于对象的样式设置应该尽量使用系统定义的样式,除特殊的情况。
如:<tdstyle="text-align:right;font-size:12px;width:30px">



类型命名对象命名代码Demo
(类型简写+命名)
stringstrvarstrSuppName
intivariSuppNo
基础数据类型
decmaildvardSuppNo
arrayarrvararrSuppNames
datedtvardSuppStopDateTime:.
JsonjsnvarjsnPostdata
扩展StringBulidersbvarsbSuppName
特殊对象类型object(class)命名
"_"+类型简写(包括Dom)+命var_strSuppName=‘’;
局部变量
名
全局变量类型简写(包括Dom)+命名varstrSuppName=‘’;
常用
function命名(首字母小写)functionaddSupp()
类型简写(包括Dom)+命名
functionparamfunctionaddSupp(suppid)
(全小写)

类型命名对象命名代码Demo
在编写js注释时,各首字母大写;可以只用or进
对象的类型名称行多个对象的串联,不允许有StringorJQSelect
空格
Dom对象Dom
JqueryDomJQDom<paramname="ctr"type="JQDom"></param>
类型定义JQ+选择器名+Str
字串String<paramname="data"type="String"></param>
Json对象Json<paramname="data"type="Json"></param>
Bool对象Bool<paramname="data"type="Bool"></param>
FunctionFunction<paramname="error"type="function"></param>
类型定义
DateDate
NumberNumber<paramname="error"type="Number"></param>
Html字串或DomDomStr<paramname="panel"type="DomStrorJQSelect">
复合命名
</param>
FunctionCodefncode<paramname="fncode"type="String">Function
特定命名
Code</param>
UICodeuicode<paramname="uicode"type="String">UICode</param>
主键key<paramname="key"type="Object">主键</param>
全局参数名称paramname<paramname="paramname"type="String">参数
name</param>

1)要求结构清晰,代码规范。
2)所有string对象必须以'单引号包括起来,如内部需要在使用',使用转义符\"
3)一个function中内容不能过长,应该适当根据功能拆分成多个function。
4)所有dom对象尽量全部使用jquery的方法进行操作
5)关于js数据类型的处理应尽量使用jshepler,:.
6)尽量使用局部变量,减少全局变量的使用,以减少内存的占用
7)减少js闭包的使用,尽量避免内存泄露的风险。
8)使用var弱类型对象时应该明确标示其作用范围,一旦含义改变时一定要注释清楚。
9)(jscontrols)编码,非特殊情况禁止直接调用控件(plugin)。
10)$ihelper库中已包含大多数情况的操作,基础操作应该都用$ihelper完成。


1)选择的性能的顺序是id>tag>class,所以使用时,尽量使用性能高的选择器。
2)有意识的用多重匹配的选择器
如:$('#id:tag')
3)尽量使用id选择器获取单个对象或者idselector的链结构方式查询
如:$('#parentidchild')
4)在使用数据对象,或是json对象时,最后一项一定不能加",",否则IE7下脚本会出错
5)所有的dom对象的样式设置必须使用css()样式设置的方式,不能使用width()这种直接设置的方式。


属性定义、私有变量、私有方法、主体方法

1)严格按定义的结构编写,注明实现功能及更新记录、注释清晰、标准化
2)控件编写之前,要将显示端html完成、css规范完成(所有命名必须有该plugin名称的前缀+‘-’+命名)。
3)属性定义根据情况定义初始化值
4)编写方法,需要详细了解基础库中的内容。判断是否是为可以为公用还是只能私有。
5)绝对禁止有固定的ID对象:.
6)对外部引入的控件,详细的使用实例,实例都需要完整;了解的代码和修改的功能都要详细注释。
7)尽量采取在jscontrol的方式去控制控件达到需要的效果。

对所有的plugins进行封装,对外统一出口,通过jsconfig设定各plugins属性初始化值


1)采用组合命名规则,基本标签:对象简写+‘-’+功能命名;子对象为父对象命名+‘-’+功能命名
如:button:btn-save
2)对于容器标签,则与对象命名相同即可
3)了解各浏览器hack的写法
4)明确各选择器的优先级,作用范围。

1)body,主要控制内的所有内容的基础样式,如字体样式、背景等
2)*,清空所有对象的有影响的默认样式
3)各类基础标签的通用样式
如:img{border-width:0px;}

1)。
2)子对象对采用链选择器的方式定义;
3)对象尽量使用class选择器去匹配;对于特殊功能的才考虑使用ID选择器;
4)标签选择器只能在全局CSS中定义,和子对象匹配的时候使用(也应尽量少使用),
其他时候禁止定义。
5)开发端禁止使用滤镜;设计端也应尽量少使用滤镜。
:.
基本布局类全小写
页面所有内容的容器page
页头header
导航navbar
左区域内容Content-left
主体内容Content-main
右区域内容Content-right
页脚footer
主菜单mainmenu
左菜单leftmenu
右菜单rightmenu

通用类命名
参考
登录loginbar
标志logo
子导航subnav
子菜单submenu
工具条toolbar
搜索search
搜索按钮btn-search
标签页tab
列表list
数据表grid
信息msg
提示tips
标题title
:.
网站地图sitemap

类型命名对象命名代码Demo
UICodeu_模块名_page命名u_plun_BaseInput
Fncodefn_模块简写+方法编号fn_ns01
公共内容
查询区域ps_模块名(PanelSearch)ps_User
列表区域pl_模块名(PanelList)pl_User
编辑区域pe_模块名(PanelEdit)pe_User
页面区域
编辑区域pv_模块名(PanelView)pv_User
页面区域父级容器c_页面区域命名c_pv_User

(Javascript)
结构对应脚本库说明
-business业务库目录
-$syscodeFunctionCode和UICode的配置常量
-config配置库
-sw-config-
-const常量
-sw-$iconstJS常量
-coreJs开发核心
-sw-control-
-sw-$icontrolJS控件
-sw-
-$sw架构的核心库,提供核心操作与公共方法
-sw-$ihelper页面初始化、查询、编辑、删除数据等等一系列操作
-jquery-
-jquery--
-jquery-
--
-plugins插件库
-:.
-jqplugin-
-
-:modalwindow、dialog、message
(App_Themes)
目录说明
-Default
-images图片
-baselayout基础布局图片
-controls各控件图片目录
-icons图标
-global全局图片
-site网站图片
-
-
-
-
-

:.


主要是javascript本身通用的对象的扩展和公共方法的封装。
类型方法参数说明返回值说明
CommonhasValue(value)value:[object],判断的值bool判断是否为空对象,常用于值的判断,如:
Function可以帮助处理json对象的0值的问题
strNotEmpty(value)value:[string],判断的值bool判断String是否为空,或是空白串(trim处理)
getStringValue(valuvalue:[object],判断的值String将对象转换成String,为空时返回''
e)
getJsonValue(data,data:jsonjson数据单行对象object获取单条数据data中属性名为propname
propname)propname:string属性名的值,出错时返回''
getRangeValue(valuevalue:[object],判断的值Object比较value,获取范围内数据.
,min,max)min:[object],最小值
max:[object],最大值
getUrlParam()Array获取Url参数
getSaveText(text)text:[string],需要格式化的字串String获取需要保存的文本,对文本内容进行格
式化
数据验证isInteger(value)value:[string],判断的值bool检查是否为整数
isFloat(value,value:[string],判断的值bool检查是否为Float
fraction)fraction:[int],小数位数
regTest(reg,value)reg:[int],正则表达式bool运行正则进行test验证:.
value:[string],判断的值
数据格式formatString(type,type:[string],格式类型object对String进行格式化,为空时返回''
化value,format)value:[string],值
format:[string],格式化配置(非必
须)
formatStringForView(type:[string],格式类型object将String格式化成显示的html格式,为空时
type,value,format)value:[string],值返回''
format:[string],格式化配置(非必
须)
toDateStr(value,value:[string],值String将数据转换成日期格式字串,为空时返回''
showtime,format)showtime:[bool],是否显示时间
(非必须)
format:[string],格式化配置(非
必须)
jsonToDate(value)value:[string],值,必须为jsondate将json字串日期转换成日期格式,为空时返
格式的时间回null
toDateNum(value)value:[date],值number将日期转换成日期数字
toDecimal(value,value:[string]值float将数据转换成Decimal格式,为空时返回''
fraction)fraction:[number],小数位,为空
时,使用系统统一格式(非必须)
toBool(value)value:[stringornumber],值bool将数据转换成Bool(0,1)值,为空时返回''
toBoolView(value,value:[string],值number将数据转换成Bool显示格式,为空时返回''
ishtml)ishtml:[bool],是否为html格式(非
必须)
toEnum(value,ename)value:[string],值string将数据转换成Enum文本,为空时返回''
ename:[string],枚举名称
StringBuiStringBuilder(value)value:[string],值StringBuil定义StringBuilder对象
lderder
:[string],合并的数据StringBuil添加字符串
(der
value)

isNotEmpty()
(清空内容
)
:[string],分割字符string转换为字符串返回
toString(split)

removeLastder
(text,paramtext:[string],格式化对象String占位符的string格式化
s)params:[array],参数数组,字串格式
()string去空
:[string],被替换的字符string扩展replace方法
(oldstr,newstr)newstr:[string],替换的字符:.
()dateString转换成日期
()datetimeString转换成日期时间
(format)format:[string],格式string格式化日期
isSameDay(d1,d2)d1:[date],日期1bool判断是否同一天
d2:[date],日期2
getDayNum(year,month)year:[number],年份获取月份中的天数
month:[number],月份
filegetFileName(file)file:[string],文件全名string获取文件名
getFileExtName(file)file:[string],文件全名string获取文件扩展名
encodeencode(str)str:[string],加密参数加密字串
decode(str)str:[string],加密参数解密字串
.$iconst(常量库)
主要记录js公共常量,用于多语言信息的处理,如:消息、枚举等
类型(首字母大写)对象说明
Common系统公共常量
Enum系统枚举
gender性别枚举
isstop是否停用枚举
Controls控件常量
grid
pager
modal
(配置库)
记录各种公共的配置信息,各plugin的公共配置项。
类型对象类型默认值说明
common系统公共配置
format格式化配置
chooserchooser控件的配置项的
:.
cssArrayindex:100,chooser的样式设置
width:0,
height:'',
left:2,
top:23
repeatTmlrepeat的通用模板
htmlhtml模板
ctrItem
.$sw(核心库)
类型方法/对象参数说明说明
全局参数$={urlParams:[array],url参数全参数对象
urlParams:nullcurrentDate:[datetime],当前时间
,currentDate:newDate()currentUI:[string],当前uicode
,currentUI:nullcontentID:[string],当前内容区域
,contentID:null区域id
,client:nullclient:[array],当前用户信息
,globalFn:nullglobalFn:[array],全局公共方法集
}合
$()从缓存中读取的全局对象、主要是服务端
的信息。
$(data)data:[array],参数对象设置全局参数,服务端的对象
$(fn)fn:[function],参数对象设置全局执行的方法【在加载主区域时执
行】
核心操作
$=function(data,url,data:stringpostData的对象post执行的操作
fnsucess,fnerror)url:string目标url
fnsucess:function请求成功后的
操作(非必须)
fnerror:function请求失败后的操
作(非必须)
$=function()
$=function(fncode,data,fncode:stringfunctionCode
fnsuccess,fnerror)data:string传入的对象参数(非
必须)
fnsuccess:function请求成功后的
操作(非必须)
fnerror:function请求失败后的操
作(非必须)
$=function(uicode,host,uicode:stringUICode
fnerror)host:DomStrorJQSelect填充的
对象:.
fnerror:function请求失败后的操
作(非必须)
$=function(fncode,data,fncode:stringfunctionCode
fnsuccess,fnerror)data:string传入对象的参数
fnsuccess:function请求成功后的
操作(非必须)
fnerror:function
请求失败后的操作(非必须)
$=functionuicode:stringUICode页面跳转
(uicode,host,fnerror)host:DomStrorJQSelect
填充的对象
fnerror:function
请求失败后的操作(非必须)
$=function(data)data:JsonJson字串Json转换成字符串
$=function(data)data:String要转换的字串字串转换成Json
$=function(data)data:,
$
=function()
公共方法
$=function(name)
$=function(name,
data)
$=function
(pageindex,pagesize,qvalue,
sortname,sortorder)
$=functionenumname:stringJS枚举名称动态获得定义的枚举数据
(enumname)
$=functionenumname:stringJS枚举名称动态获得定义的枚举数据,为空时返回''
(enumname,value)value:string值
bindEnumData(en,key,value)en:Array枚举数组动态绑定枚举数据
key:stringkey
value:stringvalue
核心插件
=function(name,
value,options)
(控件核心库)
类型方法参数说明说明
ajax处理
=functionajax:Jsonajax设置,包含:{url,执行ajax操作
(ajax)data,fnsucess,fnerror}四个对象
=function(url,url:string请求的地址,此处为执行ajax操作
data,fnsucess,fnerror)FunctionCode
data:StringorJsonPostDataJson字Evaluation