前端传中文文件名_思程科技前端开发规范 V1.0

前端开发规范 V1.0

目录

一、目录层次规范

二、通用规范

三、 HTML规范

四、 CSS规范

五、 JavaScript规范

六、浏览器兼容性要求

七、浏览器兼容问题

八、表单规范

九、SEO优化

十、页面布局规范

编写目的

为了制作出符合W3C规范的HTML页面，提高浏览器加载HTML页面的性能，开发出规范的WEB程序，编写了本规范。

一、目录层次规范

静态文件和资源按以下目录存放：

根目录：

1、样式文件夹 ( 主要存放页面样式文件，文命夹名：css)

2、图片文件夹 ( 主要存放图片文件, 文命夹名：images)

3、JS文件夹 ( 主要存放JS文件，文命夹名：js )

4、外部引入文件夹(主要存放js库、插件、UI组件库，文件夹名：ui)

5、模板文件(如：index.html 、 product.html 、 list_news.html)

6、页面cssjs命名统一跟html一致：detail.html、detail.css、detail.js

二、通用规范

1. 网页HTML代码按W3C标准编写。

1. 文件内容编码统一为UTF-8

1. css样式属性或者JavaScript代码后加";" 方便压缩工具断句

1. TAB键用4个空格代替，代码缩进一律4个空格

1. 能用html+css解决的，尽量不要用js

1. 网页里所有图片，建议定义高度宽度。可防止图片尺寸不合适页面变形、浏览器预知图片尺寸提高渲染性能。

1. 产品图片一般宽高比为4：3或3：2，也适合数码相机拍摄的照片的宽高比。

1. 多个小图标合并成一个较大的图片文件，加快下载速度，用css控制显示使用哪一区域。

1. 表格、列表要制做出多行的样例数据，要考虑文字超宽情况的处理。

1. 表格要制做出"有数据时"、"无数据时"两种情况。

1. 提交表单用button标签,不要用img、a标签。

1. 表单要制作出表单验证不通过时的错误提示信息。

1. 禁止引互联网上的js、css、图片，所有静态资源都应包含在本地文件夹中。

1. 不建议使用iframe等重量级的元素。

1. 页面中不可有404错误、js错误。

三、HTML规范

1. 标签、属性、属性命名由小写英文、数字和_组成，且所有标签必须闭合，属性值必须用双引号"",避免使用中文拼音尽量简易并要求语义化。

1. 为每个HTML页面的第一行添加标准模式的声明，。

1. 文档类型声明统一为HTML5声明类型，编码统一为UTF-8，。

1. IE支持通过特定标签来确定绘制当前页面所应该采用的IE版本,。

1. 非特殊情况下CSS样式文件外链至HEAD之间， JavaScript文件外链至页面底部。

1. 引入JavaScript库文件，文件名须包含库名称及版本号及是否为压缩版，例：jQuery-1.8.3.min.js。

1. 引入JavaScript插件，文件名格式为库名称+.+插件名称，例：jQuery.cookie.js

1. JavaScript获取单个元素时，通常使用document.getElementById来获取dom元素，document.getElementById兼容所有浏览器，但IE浏览器会混淆元素的ID和name属性，所以要区分ID和name命名。

1. HTML中对于属性的定义，确保全部使用双引号，绝不要使用单引号。

1. 多用无兼容性问题的HTML内置标签,比如span、em、strong、div等

四、css规范

1. 兼容多个浏览器时，将标准属性写在底部。

1. 在没有必要的情况下避免元素选择器叠加 Class、ID 使用。

1. 使用z-index属性尽量z-index的值不要超过150(通用组件的除外)，页面中的元素内容的z-index不能超过10(提示框等模块除外但维持在150以下)，不允许直接使用(999~9999)之间大值。

1. 不要在标签上直接写样式，不要将CSS样式写为单行，避免使用filter，使用after或overflow的方式清浮动

1. 伪类书写顺序，link--visit--focus--hover--active

1. css属性书写顺序, 建议遵循 布局定位属性-->自身属性(宽高..)-->文本属性–>其他属性

1. 标准格式：

五、JavaScript规范

1. 常量名、URL的变量、ID变量 ，全部大写并单词间用下划线分隔 如：CSS_BTN_CLOSE、TXT_LOADING

1. 对象的属性、方法名、变量名、函数名，用小驼峰式：current、defaultConfig

1. 构造函数、类名，用大驼峰式 ：Current、DefaultConfig

1. 长语句可考虑换行，换行的地方，行末必须有逗号或者运算符

1. 一个函数作用域中所有的变量声明尽量提到函数首部，用一个let声明，不允许出现两个连续的let声明，尽量使用let不使用var

1. 无论是函数声明式还是函数表达式，'('前不要有空格，但'{'前一定要有空格，函数调用 括号前不需要空格

1. 参数之间用'，'分隔，注意逗号后有一个空格

1. 对象属性名不需要加引号，对象以缩进的形式书写，不要写在一行

1. 数组，对象最后不要有逗号

1. 永远不要直接使用undefined进行变量判断，应使用typeof和字符串'undefined'对变量进行判断

1. 用'===' ，'!==' 代替 '==' ，'!= ' ，避免隐式转换

1. for-in循环体中必须用hasOwnProperty方法检查成员是否为自身成员，避免来自原型链上的污染。

1. 不要在内置对象的原型上添加方法，如Array, Date

1. 变量不要先使用后声明，避免在内层作用域的代码里声明了变量，之后却访问到了外层作用域的同名变量

1. 不要直接使用构造函数

1. debugger不能出现在提交的代码里

1. 对上下文this的引用只能使用'_this'， 'that'， 'self'其中一个来命名

1. 最外层使用单引号

六、浏览器兼容性要求

检查网页的兼容性，必需兼容(IE6、IE7、IE8、IE9、IE10、IE11、火狐、Google、360、遨游)等浏览器。HTML页面以上浏览器中可正常展示、正常操作、不变形、不串位。

七、浏览器兼容问题

参考文档：

1. css3新增的选择器都不支持，举个栗子 :nth-child, :nth-last-child, :nth-of-type

1. css3新增的伪元素，::before 前面带两个冒号的都是css3新增的，可以用css2.1的:after, :before

1. 颜色不支持，rgba(), hsl(), hsla()

1. 元素透明度 opacity:1;ie8不识别； filter: alpha(opacity:100) ie8识别；两个属性都要写

八、表单规范

1.表单验证规范

表单验证有两道，前端js验证、后端java验证，两道都要验证。不可只使用前端js验证，这是不安全的可被绕过的。

前端统一使用jquery-validate表单验证框架，参考：js表单验证有全局开关，可关闭，用于检查服务端的表单验证是否合格

2.表单method的选择

要正确选择表单的method，

做"搜索"时要使用get方法，做"保存"时要使用post方法。1、列表页上的搜索功能，form提交统一使用get方式，method="get"，可防止刷新浏览器弹出"确认提交"的弹窗。2、编辑页上的保存功能，form提交都应使用post方式method="post"。

会提交表单， button的type默认是submit, 要写才是普通按钮

3.页面等待提示

1、提交表单要有等待提示。2、要有蒙层，防止再次点击"保存"按钮，使用jqueryValidate验证框架时，在submitHandler时，都有蒙层 layer.msg('正在提交，请稍等...', {icon: 16,shade: 0.30,time: 0});

表单操作--保存，使用layer，提示"请等待"

表单操作--成功，(列表页)，提示使用layer，成功进显示3秒，失败时显示6秒，单击鼠标提示条消失。表单操作--搜索，若1.5秒未完成，提示"请等待"。表单操作–删除，确认框使用layer，并增加了键盘事件，回车是确认，Esc是取消。若1.5秒未完成，提示"请等待"。

ajax提交表单，当网速慢、系统响应慢时，应给出"请稍等"的提示。

form表单提交时：使用了jqueryValidate验证框架，在submitHandler时，都会蒙层 。

九、SEO优化

1. 标题采用h1、h2、h3、h4、h5……标签，一个页面里h1只出现一次，二级栏目使用H2，让搜索引擎能够分辨清晰网页那一块很重要，那一块次之。这会让SEO优化工作效率提高很多。

1. 栏目标题要用文字去写，除图片效果、复杂的背景外，可以用图片，其它的都要直接用文字去写，而不是用图片，(如：产品分类，公司简介等)

1. 尽量少写JS，重要信息不可使用js输出，不然搜索引擎无法抓取重要信息。

十、网页布局规范

1. 页面总本采用div+css布局。

1. 列表采用 ul li标签布局。

1. 表单、表格可采用table标签布局。

1. 总体布局分为头部、主体、底部，3个大部分。

1. 头部、底部为公共调用，html代码块要统一，被任何页include都不变型

整体布局：

```头部```

`````主体```

```底部```

主体框架布局：

新闻模块内容

产品模块内容

案例模块内容

模块布局：

新闻

更多

• 列表标题05-08
• 列表标题05-08