UI层开发规范.docx

文档介绍：UI层开发规范页面展示代码规范按照命名规范为页面元素命名。(参照附录一)正确使用服务器控件和HTML控件,若无需服务端处理均使用HTML控件。隐藏字段统一采用HiddenField(特殊情况除外)。尽量不使用table布局方式。尽量避免直接在布局代码中书写style,script。css引用放置在页面head中,js引用放置在页面尾部紧贴</body>标签。避免在布局代码中或者JavaScript中出现图片的src为空。在写链接地址时以‘/’结束,例如ttp://现 。不使用html中的图片缩放,尽量采用图片读取时设定图片大小。当前无用的代码不允许在源代码中直接注释,要将其删除。页面逻辑代码规范尽量避免数据重复加载以及回传时不必要的数据加载。页面呈现时不显示的内容尽量避免加载。对异常做适当的处理,避免出现原始的错误页,如404错误。避免没用到的命名空间引入。代码结构化。减少单个方法或事件的代码量,提取重复使用的代码,提高代码的可读性且易维护。当前无用的代码不允许在源代码中直接注释,要将其删除。CSS规范常用类的命名应尽量以常见英文单词为准,做到通俗易懂。CSS类的名称统一命名为:控件(模板、页面)名称的缩写(小写)+常用英文单词(参照附录二:常用类/ID命名规范表,注意首字母大写),:srcSearchBox{…};如果控件名类似的情况下,例如:,可以取名称前n个字母的缩写:.pdetConfirm{}.onfirm{}文档的结构化书写:页面CSS文档都应采用结构化的书写方式,逻辑清晰易于阅读。每个样式属性尽量都写在一栏中,太长的话可以换行。分割注释中可使用中文,但是必须添加***@charset"utf-8"。分割注释,控件、页面、模板等分别在开始及结束地方加入注释,以控件(页面、模板等)名称+开发人员名字简写命名,如:/*-zhaowy*/.mainMenu{width:100%;height:30px;background:url(images/)repeat-x;}.mainMenuulli{float:left;line-height:30px;margin-right:1px;cursor:pointer;}派生选择器:可以使用派生选择器给一个元素里的子元素定义样式,在简化命名的同时也使结构更加的清晰化,如:.mainMenuulli{background:url(images/);}不同类有相同属性及属性值的缩写:对于两个不同的类,但是其中有部分相同甚至是全部相同的属性及属性值时,应对其加以合并缩写,特别是当有多个不同的类而有相同的属性及属性值时,合并缩写可以减少代码量并易于控制。如:.mainMenu{background:url(../images/);border:1pxsolid#333;width:100%;height:30px;overflow:hidden;}.subMenu{background:url(../images/);bo