Web前端开发命名规则

《Web前端开发命名规则》由会员分享，可在线阅读，更多相关《Web前端开发命名规则（27页珍藏版）》请在金锄头文库上搜索。

1、Smart UI 前台开发帮助1. 开发规范1.1.HTML1.1.1. HTML 命名规范类型 命名对象 命名 代码 Demo类型简写+ P_+业务名(需求阶段已定义好)_+操作名（Add/Edit/Search 等）+ 操作对象+ 命名text/password txt button btn checkbox chk radio rdo hidden hid input 标签file fle textarea txt select sel option op a lnk img img label lbl font fnt 常用button btn （业务）命名（首字母小写）div ul

2、ol li dd dt dl table th tr td 容器标签tbody thead tfoot samp span p hr 其他br 特殊命名 所有用于查询的标签, 类型简写后加s 如：查询：txtsName ，编辑：txtName1.1.2. HTML 编写要求1) 要求只能使用上述规定的标签2) 每个标签要求结构完整；如：应写为: 除 hr、 br、img、input 外标签都应该是标签对完整的3) 除容器和文字标签外，不允许在标签中放置内容。错误的写法：库 存 正确的应该是：4) 关于对象的样式设置应该尽量使用系统定义的样式，除特殊的情况。如：1.2.JS1.2.1. Java

3、script1.2.1.1. JS 命名规范类型 命名对象 命名 代码 Demo(类型简写+命名)string str var strSuppName int i var iSuppNodecmail d var dSuppNoarray arr var arrSuppNames基础数据类型date dt var dSuppStopDateTimeJson jsn var jsnPostdata扩展 StringBulider sb var sbSuppName特殊对象类型 object(class) 命名局部变量 _+类型简写(包括 Dom)+命名 var _strSuppName = ;全

4、局变量 类型简写(包括 Dom)+命名 var strSuppName = ;function 命名（首字母小写） function addSupp()常用function param类型简写(包括 Dom)+命名（全小写） function addSupp(suppid)1.2.1.2. JS 注释规范类型 命名对象 命名 代码 Demo在编写 js 注释时，各对象的类型名称首字母大写；可以只用 or 进行多个对象的串联，不允许有空格StringorJQSelectDom 对象 DomJquery Dom JQDom JQ + 选择器名 + Str字串 String 类型定义Json 对象

5、Json Bool 对象 Bool Function Function Date Date类型定义Number Number 复合命名 Html 字串或 Dom DomStr 特定命名 FunctionCode fncode Function CodeUICode uicode UI Code 主键 key 主键 全局参数名称 paramname 参数name1.2.1.3. JS 编写要求1) 要求结构清晰，代码规范。2) 所有 string 对象必须以单引号包括起来，如内部需要在使用,使用转义符3) 一个 function 中内容不能过长，应该适当根据功能拆分成多个 function。4)

6、 所有 dom 对象尽量全部使用 jquery 的方法进行操作5) 关于 js 数据类型的处理应尽量使用 jshepler,类型的 prototype 来完成.6) 尽量使用局部变量，减少全局变量的使用，以减少内存的占用7) 减少 js 闭包的使用，尽量避免内存泄露的风险。8) 使用 var 弱类型对象时应该明确标示其作用范围，一旦含义改变时一定要注释清楚。9) 统一使用 ipsa2.0 的基础组件库（jscontrols）编码，非特殊情况禁止直接调用控件（plugin） 。10) $ihelper 库中已包含大多数情况的操作，基础操作应该都用$ihelper 完成。1.2.2. Jquery

7、1.2.2.1. Jquery 编写要求1) 选择的性能的顺序是 idtagclass,所以使用时，尽量使用性能高的选择器。2) 有意识的用多重匹配的选择器如： $(#id : tag)3) 尽量使用 id 选择器获取单个对象或者 idselector 的链结构方式查询 如： $(#parentid child)4) 在使用数据对象，或是 json 对象时，最后一项一定不能加,否则 IE7 下脚本会出错5) 所有的 dom 对象的样式设置必须使用 css()样式设置的方式，不能使用 width()这种直接设置的方式。1.2.3. jq plugins1.2.3.1. jq plugins 结构

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

9、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) 各类基础标签的通用样式 如：imgbo

10、rder-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-ri

11、ght页脚 footer主菜单 mainmenu左菜单 leftmenu右菜单 rightmenu1.3.5. CSS 通用命名参考通用类命名参考登录 loginbar标志 logo子导航 subnav子菜单 submenu工具条 toolbar搜索 search搜索按钮 btn-search标签页 tab列表 list数据表 grid信息 msg提示 tips标题 title网站地图 sitemap1.4.Smart UI 命名类型 命名对象 命名 代码 DemoUICode u_模块名 _page 命名 u_plun_BaseInput Fncode fn_模块简写+方法编号 fn_ns0

12、1公共内容查询区域 ps_模块名 (PanelSearch) ps_User列表区域 pl_模块名 (PanelList) pl_User编辑区域 pe_模块名 (PanelEdit) pe_User编辑区域 pv_模块名 (PanelView) pv_User页面区域父级容器 c_页面区域命名 c_pv_User页面区域2. 前台目录结构说明2.1.脚本文件（Javascript ）结构 对应脚本库 说明- business 业务库目录- SystemCode.js $syscode FunctionCode 和 UICode 的配置常量- config 配置库- sw-config-def

13、ault.js iconfig 默认配置库- const 常量- sw-const.js $iconst JS 常量- core Js 开发核心- sw-control-core.js ictrcore 控件核心支持库- sw-controls.js $ icontrol JS 控件- sw-prototype.js Js 对象扩展- ipsa.js $sw 架构的核心库，提供核心操作与公共方法- sw-helper.js $ihelper 页面初始化、查询、编辑、删除数据等等一系列操作 - jquery-1.4.2.js Jquery 开发版- jquery-1.4.2.min-vsdoc.

14、js Jquery 注释版- jquery-1.4.2.min.js Jquery 压缩版- jquery.json-2.2.min.js Json 转换库- plugins 插件库- chooser.js 选择控件- jqplugin-Grid.js Grid 控件- pager.js 翻页控件- modal.js Modal 类控件： modalwindow、dialog、message2.2.样式文件 说明(App_Themes)目录 说明- Default- images 图片- baselayout 基础布局图片- controls 各控件图片目录- icons 图标- global

15、 全局图片- site 网站图片- baselayout.css 基础布局样式- controls.css 控件样式- global.css 全局样式- site.css 网站样式- style.css 样式统一出口3. Js 类库说明3.1.Js 类库结构图3.2.类库 API3.2.1. jsPrototype主要是 javascript 本身通用的对象的扩展和公共方法的封装。类型 方法 参数说明 返回值 说明Common FunctionhasValue(value) value : object,判断的值 bool 判断是否为空对象，常用于值的判断，如：可以帮助处理 json 对象的

16、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