Web前端开发-命名规则.doc

Smart UI前台开发帮助1、HTML命名规范类型命名对象命名代码DemoInput标签类型简写+ P_+业务名(需求阶段已定义好)_+操作名（Add/Edit/Search等）+ 操作对象+ 命名text/passwordtxtbuttonbtncheckboxchkradiordohiddenhidfilefle常用textareatxtselectseloptionopalnkimgimglabellblfontfntbuttonbtn容器标签（业务）命名（首字母小写）divulollidddtdltablethtrtdtbodytheadtfootsampspanp其他hrbr特殊命名所有用于查询的标签, 类型简写后加s如：查询：txtsName，编辑：txtName1.1.1、HTML编写要求1) 要求只能使用上述规定的标签2) 每个标签要求结构完整；如：应写为: 除hr、br、img、input外标签都应该是标签对完整的3) 除容器和文字标签外，不允许在标签中放置内容。错误的写法：库 存正确的应该是：4) 关于对象的样式设置应该尽量使用系统定义的样式，除特殊的情况。如：1、JS命名规范类型命名对象命名代码Demo基础数据类型(类型简写+命名)stringstrvar strSuppName intivar iSuppNodecmail dvar dSuppNoarrayarrvar arrSuppNamesdatedtvar dSuppStopDateTimeJsonjsnvar jsnPostdata扩展StringBulidersbvar sbSuppName特殊对象类型object(class)命名常用局部变量_+类型简写(包括Dom)+命名var _strSuppName = ;全局变量类型简写(包括Dom)+命名var strSuppName = ;function命名（首字母小写）function addSupp()function param类型简写(包括Dom)+命名（全小写）function addSupp(suppid)1.1、JS注释规范类型命名对象命名代码Demo在编写js注释时，各对象的类型名称首字母大写；可以只用or进行多个对象的串联，不允许有空格StringorJQSelect类型定义Dom对象DomJquery DomJQDomJQ + 选择器名 + Str字串String Json对象Json 类型定义Bool对象Bool FunctionFunction DateDateNumberNumber 复合命名Html字串或DomDomStr 特定命名FunctionCodefncodeFunction CodeUICodeuicode UI Code 主键key主键全局参数名称paramname参数name1.1.1、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、Jquery编写要求1) 选择的性能的顺序是idtagclass,所以使用时，尽量使用性能高的选择器。2) 有意识的用多重匹配的选择器如：$(#id : tag)3) 尽量使用id选择器获取单个对象或者idselector的链结构方式查询 如：$(#parentid child)4) 在使用数据对象，或是json对象时，最后一项一定不能加,否则IE7下脚本会出错5) 所有的dom对象的样式设置必须使用css()样式设置的方式，不能使用width()这种直接设置的方式。1、jq plugins结构顺序属性定义、私有变量、私有方法、主体方法1.1、jq plugins编写要求1) 严格按定义的结构编写，注明实现功能及更新记录、注释清晰、标准化2) 控件编写之前，要将显示端html完成、css规范完成（所有命名必须有该plugin名称的前缀+-+命名）。3) 属性定义根据情况定义初始化值4) 编写方法，需要详细了解基础库中的内容。判断是否是为可以为公用还是只能私有。5) 绝对禁止有固定的ID对象6) 对外部引入的控件，详细的使用实例，实例都需要完整；了解的代码和修改的功能都要详细注释。7) 尽量采取在jscontrol的方式去控制控件达到需要的效果。1.1.1、icontrols对所有的plugins进行封装，对外统一出口，通过jsconfig设定各plugins属性初始化值1、CSS基本命名规范1) 采用组合命名规则，基本标签：对象简写+-+功能命名；子对象为父对象命名+-+功能命名如：button：btn-save2) 对于容器标签，则与对象命名相同即可3) 了解各浏览器hack的写法4) 明确各选择器的优先级，作用范围。1.1.1、全局CSS1) body，主要控制内的所有内容的基础样式，如字体样式、背景等2) *，清空所有对象的有影响的默认样式3) 各类基础标签的通用样式 如：imgborder-width: 0px;1.1.1、CSS编写规范1) 使用CSS3.0的标准编写。2) 子对象对采用链选择器的方式定义；3) 对象尽量使用class选择器去匹配；对于特殊功能的才考虑使用ID选择器；4) 标签选择器只能在全局CSS中定义，和子对象匹配的时候使用（也应尽量少使用），其他时候禁止定义。5) 开发端禁止使用滤镜；设计端也应尽量少使用滤镜。1.1.1、CSS基本布局规范基本布局类全小写页面所有内容的容器page页头header导航navbar左区域内容Content-left主体内容Content-main右区域内容Content-right页脚footer主菜单mainmenu左菜单leftmenu右菜单rightmenu1.1.1、CSS通用命名参考通用类命名参考登录loginbar标志logo子导航subnav子菜单submenu工具条toolbar搜索search搜索按钮btn-search标签页tab列表list数据表grid信息msg提示tips标题title网站地图sitemap1.1.1、Smart UI命名类型命名对象命名代码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_User1.1、前台目录结构说明1.1.1、脚本文件（Javascript）结构对应脚本库说明- business业务库目录- SystemCode.js$syscodeFunctionCode和UICode的配置常量- config配置库- sw-config-default.jsiconfig默认配置库- const常量- sw-const.js$iconst JS常量- coreJs开发核心- sw-control-core.jsictrcore 控件核心支持库- sw-controls.js$ icontrol JS控件- 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.jsJquery压缩版- jquery.json-2.2.min.jsJson转换库- plugins插件库- chooser.js选择控件- jqplugin-Grid.jsGrid控件- pager.js翻页控件- modal.jsModal类控件：modalwindow、dialog、message1.1.1、样式文件 说明(App_Themes)目录说明- Default- images图片- baselayout基础布局图片- controls各控件图片目录- icons图标- global全局图片- site网站图片- baselayout.css基础布局样式- controls.css控件样式- global.css全局样式- site.css网站样式- style.css样式统一出口1、Js类库说明1.1、jsPrototype 主要是javascript本身通用的对象的扩展和公共方法的封装。类型方法参数说明返回值说明Common FunctionhasValue(value)value : object,判断的值bool判断是否为空对象，常用于值的判断，如：可以帮助处理json对象的0值的问题strNotEmpty (value)value : string,判断的值bool判断String是否为空,或是空白串(trim处理)getStringValue(value)value : object,判断的值String将对象转换成String，为空时返回getJsonValue(data,propname)data:json json数据单行对象propname:string 属性名object获取单条数据data中属性名为propname的值,出错时返回getRangeValue(value, min, max) value : object,判断的值min : object,最小值max : object,最大值Object比较value，获取范围内数据.getUrlParam()Array获取Url参数getSaveText (text)text: string,需要格式化的字串String获取需要保存的文本，对文本内容进行格式化数据验证isInteger(value)value : string,判断的值bool检查是否为整数isFloat(value,fraction)value : string,判断的值fraction: int, 小数位数bool检查是否为FloatregTest(reg, value)reg: int, 正则表达式value : string,判断的值bool运行正则进行test验证数据格式化formatString(type,value,format)type:string, 格式类型value:string, 值format:string,格式化配置(非必须)object对String进行格式化,为空时返回formatStringForView(type,value,format)type:string, 格式类型value:string, 值format:string, 格式化配置(非必须)object将String格式化成显示的html格式,为空时返回toDateStr(value, showtime, format)value:string,值showtime:bool, 是否显示时间(非必须)format:string,格式化配置(非必须)String将数据转换成日期格式字串,为空时返回jsonToDate(value)value:string, 值，必须为json格式的时间date将json字串日期转换成日期格式,为空时返回nulltoDateNum(value)value:date,值number将日期转换成日期数字toDecimal(value, fraction)value:string 值fraction:number,小数位, 为空时，使用系统统一格式(非必须)float将数据转换成Decimal格式,为空时返回toBool (value)value:string or number, 值bool将数据转换成Bool(0,1)值,为空时返回toBoolView(value, ishtml)value:string, 值ishtml:bool,是否为html格式(非必须)number将数据转换成Bool显示格式,为空时返回toEnum(value, ename)value:string, 值ename:string, 枚举名称string将数据转换成Enum文本,为空时返回StringBuilderStringBuilder(value)value:string,值StringBuilder定义StringBuilder对象StringBuilder.append(value)value:string ,合并的数据StringBuilder添加字符串StringBuilder. isNotEmpty()bool是否为空StringBuilder.clear()清空内容StringBuilder.toString(split)split:string,分割字符 string转换为字符串返回StringBuilder. removeLastStringBuilder删除最后一个添加的对象StringString.format(text,params)text:string, 格式化对象params:array,参数数组,字串格式String占位符的string格式化String.trim()string去空String. Replace (oldstr, newstr)oldstr:string,被替换的字符newstr:string,替换的字符string扩展replace方法String.toDate()dateString转换成日期String.toDateTime()datetimeString转换成日期时间DateDate.format(format)format:string,格式string格式化日期isSameDay(d1, d2)d1:date,日期1d2:date,日期2bool判断是否同一天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, 加密参数解密字串1.1.1、$iconst(常量库)主要记录js公共常量，用于多语言信息的处理，如：消息、枚举等类型（首字母大写）对象说明Common系统公共常量Enum系统枚举gender性别枚举isstop是否停用枚举Controls控件常量gridpagermodal1.1.1、iconfig(配置库)记录各种公共的配置信息，各plugin的公共配置项。类型对象类型默认值说明common系统公共配置format格式化配置chooserchooser控件的配置项的cssArrayindex: 100,width: 0, height: , left: 2, top: 23 chooser的样式设置repeatTmlrepeat的通用模板htmlhtml模板ctrItem1.1.1、$sw(核心库)类型方法/对象参数说明说明全局参数$sw.globalParams = urlParams: null , currentDate: new Date() , currentUI: null , contentID: null区域 , client: null , globalFn:nullurlParams:array,url参数currentDate:datetime,当前时间currentUI:string,当前uicodecontentID:string,当前内容区域idclient: array,当前用户信息globalFn:array,全局公共方法集合全参数对象$sw.loadGlobalParams()从缓存中读取的全局对象、主要是服务端的信息。$sw.setGlobalData (data)data:array,参数对象设置全局参数,服务端的对象$sw.addGlobalFn(fn)fn:function,参数对象设置全局执行的方法【在加载主区域时执行】核心操作$sw.ajax = function (data, url, fnsucess, fnerror)data:string postData的对象url:string 目标urlfnsucess:function 请求成功后的操作(非必须)fnerror:function 请求失败后的操作(非必须)post执行的操作$sw.PostData = function ()$sw.DO = function (fncode, data, fnsuccess, fnerror)fncode:string functionCodedata:string 传入的对象参数(非必须)fnsuccess:function请求成功后的操作(非必须)fnerror:function 请求失败后的操作(非必须)$sw.UI = function (uicode, host, fnerror)uicode:string UI Codehost: DomStrorJQSelect 填充的对象fnerror:function 请求失败后的操作(非必须)$sw.DL = function (fncode, data, fnsuccess, fnerror)fncode:string functionCodedata:string 传入对象的参数fnsuccess:function 请求成功后的操作(非必须)fnerror:function请求失败后的操作(非必须)$sw.GotoPage = function (uicode, host, fnerror)uicode:string UI Codehost: DomStrorJQSelect填充的对象fnerror:function请求失败后的操作(非必须)页面跳转$sw. toJsonStr= function (data)data:Json Json字串Json转换成字符串$sw.parseJSON = function (data)data: String 要转换的字串字串转换成Json$sw. parseBody = function (data)data: String 要转换的字串只针对data.Body转换,ipsa2.0特有格式$sw.CheckSilverlightInstalled = function ()公共方法$sw.GetParam = function (name)$sw.SetParam = function (name, data)$sw.bulidSearchParam = function (pageindex, pagesize, qvalue, sortname, sortorder)$sw.getEnum = function (enumname)enumname:string JS枚举名称动态获得定义的枚举数据$sw.getEnumText = function (enumname, value)enumname:string JS枚举名称value:string 值动态获得定义的枚举数据,为空时返回bindEnumData(en, key, value)en:Array 枚举数组key:string keyvalue:string value动态绑定枚举数据核心插件jQuery.cookie = function (name, value, options)1.1.1、Ictrcore(控件核心库)类型方法参数说明说明ajax处理ictrcore.ajax = function (ajax) ajax:Json ajax设置,包含：url，data，fnsucess，fnerror四个对象执行ajax操作ictrcore.DO = function (url, data, fnsucess, fnerror)url:string请求的地址，此处为Function Codedata: StringorJson PostData Json字串或Json 对象fnsuccess:function 请求成功后的操作fnerror:function 请求失败后的操作执行ajax操作ictrcore.setAjax = function (ajax, oldajax)ictrcore.setPsaAjax = function (fncode, postdata, fnsucess, fnerror)fncode:Function Codepostdata: StringorJson PostData Json字串或Json 对象将psa的ajax设置转换为Jquery的ajax设置控件设置ictrcore.upselector = function (ctr, selector, css)ctr:JQDom 控件selector: JQDomorDomStr选择器对象css:Json 样式对象设置选择控件弹出层loadingictrcore.loading = function (panel)panel:JQSelector 需要Loading的区域页面Loadingictrcore.loadingClose = function (panel)panel:JQSelector 需要Loading的区域remove页面Loadingmodalictrcore.modal = function ()页面modalictrcore.modalClose = function ()remove页面modaltemplatelistictrcore.teml = function (container, template, url, data, fnsucess,fnerror)container: JQuerySelect容器的选择器的字串template: DomStrorJQueryIDSelect模板字串url: String Function Codedata: StringorJson PostData json字串或是Json对象根据模板数据生成列表Repeat核心插件 tmpl 模板生成1.1.1、$icontrol(控件库)类型方法参数说明说明初始化$icontrol = function (panel)panel:JQSelect容器的选择器的字串,如：id：#id,tag:tag控件初始化，初始化panel proInput$Input = function (panel)panel:JQSelect容器的选择器的字串,如：id：#id,tag:tag完成基础输入控件的统一控制。统一样式设置、取值、赋值等。repeat$icontrol.repeat = function (container, template, jsndatas)container: StringorJQSelect容器的选择器的字串template: StringorJQIDSelect模板字串jsndatas:Json Json格式数据集合根据模板数据生成列表Repeat $icontrol.repeat.DO = function (container, template, fncode, postdata , fnsucess, fnerror)container: JQuerySelect容器的选择器的字串template: DomStror JQueryIDSelect 模板字串postdata: StringorJson Post Data json字串或是Json对象根据模板数据生成列表Repeatchooser$icontrol.chooserinit = function (ctr, options, jsndata)options: Array 设置项jsndata:json Json格式数据集合(非必须)初始化选择控件，注：控件设置属性ename，可以读取定义的枚举数据源$icontrol.chooser = function (ctr, type)ctr: DomStrorJQSelect触发选择的控件,类型可以为对象也可以为JQ选择字符type:string选择控件类型：1.ddl(下拉选择)，2.list(列表选择)初始化选择控件，注：控件设置属性ename，可以读取定义的枚举数据源$icontrol.chooser.bind = function (ctr, type, ismulti, jsndata)ismulti:bool 是否多选jsnData:json Json格式数据集合(非必须)初始化选择控件使用数据源$icontrol.chooser.setValue = function (id, value)value:string 值初始化选择控件使用数据源modalwin$icontrol.modalwin = function (target, id, title, width, height) uicode:string 目标地址id:string 弹出win的idtitle:string win的title打开模态窗口$icontrol.modalwin.close = function (id)id:string 弹出win的id关闭模态窗口message$icontrol.alert = function (msg, type)msg:string 弹出消息type:string消息类型(非必须)弹出消息方法$icontrol.show = function (msg, type, timeout)timeout:number 显示时间弹出消息方法$icontrol.confirm = function (msg, fnpass, fncancel)msg:string 确认消息fnpass:function 通过执行的方法fncancel:function 取消执行的方法(非必须)confirm操作grid$icontrol.grid = function (ctr,options,fncode,postdata,success) ctr: DomStrorJQSelect触发选择的控件,类型可以为对象也可以为JQ选择字符options:array Grid的设置项fncode:string Function Codepostdata: StringorJson Post Data json字串或是Json对象(非必须)fnsucess:function成功后执行的操作(非必须)初始化grid$icontrol.grid.reload = function (ctr, fncode, postdata, success)ctr: DomStrorJQSelect触发选择的控件,类型可以为对象也可以为JQ选择字符fncode:string Function Codepostdata: StringorJson Post Data json字串或是Json对象(非必须)fnsucess:function成功后执行的操作(非必须)grid reloadpager$icontrol.pager = function (ctr, totalrecord, fnpagechanged, options)ctr: DomStrorJQSelect触发选择的控件,类型可以为对象也可以为JQ选择字符totalrecord:string 总记录数fnpagechanged: function翻页执行的操作options:array pager的设置项(非必须)初始化翻页控件$icontrol.pager.change = function (ctr, pageindex, fnpagechanged)翻页控件翻页方法1.1.1. $ihelper(帮助库)类型方法参数说明说明页面区域生成$ihelper.createItemList = function (id, items, values, isview)id:string 需要生成区域的IDitems:Json 控件配置项集合values: Json 数据值，会根据field赋值给控件isview:bool是否是查看区域生成默认控件列表，如查询、编辑、查看$ihelper.createItem = function (panel, id, ops, values, isview)panel:JQDom生成区域id:id 控件id前缀ops:object 控件配置项values:Json数据值，会根据field赋值给控件isview:bool是否是查看区域生成控件项$ihelper.setInput = function (input, ops, values) input:JQDom生成区域ops:object 控件配置项values:Json数据值，会根据field赋值给控件设置input的属性、样式、值$ihelper.setView = function (lbl, ops, values) lbl:JQDom 生成区域ops:object 空间配置项values:Json数据值，会根据field赋值给控件设置View控件的属性、样式、值$ihelper.itemFormat = function (values, ops, isview)values:Json数据值，会根据field赋值给控件ops:object 控件配置项isview:bool 是否是查看区域设置View控件的属性、样式、值页面操作$ihelper.openModalWithKey = function (key, paramname, uicode, modalid, title, width, height)key:object 主键值paramname:string 参数nameuicode:string UI Codemodalid:string Modal窗口的IDtitle:string Modal窗口的标题根据key,打开modal查看窗口$ihelper.initLoadPage = function (paramname, fncode, fninit)paramname:string参数namefncode:string Function Codefninit:function 初始化方法初始化Load的页面$ihelper.search = function (fncode, searchid, gridid)fncode:string Function Codesearched:JQSelect查询区域选择字串gridid:string Grid选择字串查询操作，针对grid$ihelper.editInit = function (fncode, paramname, editid)fncode: String Function Codeparamname:string 查询区域选择字串edited:JQSelect 编辑区域选择字串编辑页面初始化操作$ihelper.save = function (fncode, editid, modalid, fnsuccess, fnerror)fncode:String Function Codeedited:JQSelect 编辑区域选择字串modalid:string modalwin的id保存操作$ihelper.gridDel = function (fncode, gridid, fnsuccess, fnerror)gridid:string Grid的id字串删除Grid数据$ihelper.del = function (fncode, json,