Web前端开发命名规则

整理文档很辛苦,赏杯茶钱您下走!

免费阅读已结束,点击下载阅读编辑剩下 ...

阅读已结束,您可以下载文档离线阅读编辑

资源描述

SmartUI前台开发帮助1.开发规范1.1.HTML1.1.1.HTML命名规范类型命名对象命名代码Demoinput标签类型简写+P_+业务名(需求阶段已定义好)_+操作名(Add/Edit/Search等)+操作对象+命名text/passwordtxtinputtype=”text”id=”txtSuppListName”buttonbtninputtype=buttonid=”txtSuppListName”checkboxchkinputtype=checkboxid=”chkSuppListName”radiordoinputtype=radioid=rdoSuppListIsStop/hiddenhidinputtype=hiddenid=hidSuppListNo/filefleinputtype=fileid=fleSuppFile/常用textareatxttextareaid=txtSuppEditNote/textareaselectselselectid=”selSuppEditType”/selectoptionopoptionid=”opSuppEditName1”/optionalnkaid=”lnkSuppListName”/aimgimgimgid=”imgSuppListName”/labellbllableid=”lblSuppViewName”/labelfontfntfontid=”fntSuppViewName”/fontbuttonbtnbuttonid=”btnSunnListSearch”/button容器标签(业务)命名(首字母小写)divdivid=editSupp/divululid=searchSupp/ulololid=searchSupp/olliliid=searchSupp/liddddid=searchSupp/dddtdtid=searchSupp/dtdldlid=searchSupp/dltabletableid=searchSupp/tableththid=searchSupp/thtrtrid=searchSupp/trtdtdid=searchSupp/tdtbodydlid=searchSupp/dltheadtheadid=searchSupp/theadtfoottfootid=searchSupp/tfootsampsampid=searchSupp/sampspanspanid=searchSupp/spanppid=searchSupp/p其他hrhr/brbr/特殊命名所有用于查询的标签,类型简写后加’s’如:查询:txtsName,编辑:txtName1.1.2.HTML编写要求1)要求只能使用上述规定的标签2)每个标签要求结构完整;如:span/应写为:span/span除hr、br、img、input外标签都应该是标签对完整的br/hr/img/3)除容器和文字标签外,不允许在标签中放置内容。错误的写法:inputtype=checkbox库存/input正确的应该是:inputtype=checkboxvalue=库存/input4)关于对象的样式设置应该尽量使用系统定义的样式,除特殊的情况。如:tdstyle=text-align:right;font-size:12px;width:30px1.2.JS1.2.1.Javascript1.2.1.1.JS命名规范类型命名对象命名代码Demo基础数据类型(类型简写+命名)stringstrvarstrSuppNameintivariSuppNodecmaildvardSuppNoarrayarrvararrSuppNamesdatedtvardSuppStopDateTimeJsonjsnvarjsnPostdata扩展StringBulidersbvarsbSuppName特殊对象类型object(class)命名常用局部变量_+类型简写(包括Dom)+命名var_strSuppName=‘’;全局变量类型简写(包括Dom)+命名varstrSuppName=‘’;function命名(首字母小写)functionaddSupp()functionparam类型简写(包括Dom)+命名(全小写)functionaddSupp(suppid)1.2.1.2.JS注释规范类型命名对象命名代码Demo在编写js注释时,各对象的类型名称首字母大写;可以只用or进行多个对象的串联,不允许有空格StringorJQSelect类型定义Dom对象DomJqueryDomJQDomparamname=ctrtype=JQDom/paramJQ+选择器名+Str字串Stringparamname=datatype=String/paramJson对象Jsonparamname=datatype=Json/param类型定义Bool对象Boolparamname=datatype=Bool/paramFunctionFunctionparamname=errortype=function/paramDateDateNumberNumberparamname=errortype=Number/param复合命名Html字串或DomDomStrparamname=paneltype=DomStrorJQSelect/param特定命名FunctionCodefncodeparamname=fncodetype=StringFunctionCode/paramUICodeuicodeparamname=uicodetype=StringUICode/param主键keyparamname=keytype=Object主键/param全局参数名称paramnameparamname=paramnametype=String参数name/param1.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.Jquery1.2.2.1.Jquery编写要求1)选择的性能的顺序是idtagclass,所以使用时,尽量使用性能高的选择器。2)有意识的用多重匹配的选择器如:$('#id:tag')3)尽量使用id选择器获取单个对象或者idselector的链结构方式查询如:$('#parentidchild')4)在使用数据对象,或是json对象时,最后一项一定不能加,,否则IE7下脚本会出错5)所有的dom对象的样式设置必须使用css()样式设置的方式,不能使用width()这种直接设置的方式。1.2.3.jqplugins1.2.3.1.jqplugins结构顺序属性定义、私有变量、私有方法、主体方法1.2.3.2.jqplugins编写要求1)严格按定义的结构编写,注明实现功能及更新记录、注释清晰、标准化2)控件编写之前,要将显示端html完成、css规范完成(所有命名必须有该plugin名称的前缀+‘-’+命名)。3)属性定义根据情况定义初始化值4)编写方法,需要详细了解基础库中的内容。判断是否是为可以为公用还是只能私有。5)绝对禁止有固定的ID对象6)对外部引入的控件,详细的使用实例,实例都需要完整;了解的代码和修改的功能都要详细注释。7)尽量采取在jscontrol的方式去控制控件达到需要的效果。1.2.4.icontrols对所有的plugins进行封装,对外统一出口,通过jsconfig设定各plugins属性初始化值1.3.CSS1.3.1.CSS基本命名规范1)采用组合命名规则,基本标签:对象简写+‘-’+功能命名;子对象为父对象命名+‘-’+功能命名如:button:btn-save2)对于容器标签,则与对象命名相同即可3)了解各浏览器hack的写法4)明确各选择器的优先级,作用范围。1.3.2.全局CSS1)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右菜单rightmenu1.3.5.CSS通用命名参考通用类命名参考登录loginbar标志logo子导航subnav子菜单submenu工具条toolbar搜索search搜索按钮btn-search标签页tab列表list数据表grid信息msg提示tips标题title网站地图sitemap1.4.SmartUI命名类型命名对象命名代码Demo公共内容UICodeu_模块名_page命名u_plun_BaseInputFncodefn_模块简写+方法编号fn_ns01页面区域查询区域ps_模块名(PanelSearch)ps_User列表区域pl_模块名(PanelList)pl_User编辑区域pe_模块名(PanelEdit)pe_User编辑区域pv_模块名(PanelView)pv_User页面区域父级容器c_页面区域命名c_pv_User2.前台目录结构说明2.1.脚本文件(Javascript)结构对应脚本库说明-business业务库目录-SystemCode.js$syscodeFunctionCode和UICode的配置常量-config配置库-sw-config-default.jsiconfig默认配置库-const常量-sw-const.js$iconstJS常量-coreJs开发核心-sw-control-core.jsictrcore控件核心支持库-sw-controls.js$icontrolJS控件-sw-prototype.jsJs对象扩展-ipsa.js$sw架构的核心库,提供核心操作与公共方法-sw-helper.js$ihelper页面初始化、查询、编辑、删除数据等等一系列操作-jquery-1.4.2.jsJquery开发版-jquery-1.4.2.min-vsdoc.jsJquery注释版-jquery-1.4.2.min.j

1 / 27
下载文档,编辑使用

©2015-2020 m.777doc.com 三七文档.

备案号:鲁ICP备2024069028号-1 客服联系 QQ:2149211541

×
保存成功