前端开发规范

前端开发规范

一、静态界面规范

1、项目文件的创建如下：

注：a、静态页的制作必须按照上图所示文件目录；b、media.css 样式表只能写媒体查询；c、base.css样式表是清除默认样式，原则上是不许改动；d、bgImages文件夹只能放背景图，products 文件放产品图；

2、命名规范

a、html文件的命名必须有实际意义，根据页面展示的主体功

能命名；

b、样式的类名定义尽量做到语义化，但是不能过长；

c、图片的命名尽量做到语义化，不能随意命名；

注：可以参考一些第三方UI插件的命名规则（如：easy-ui、

bootstrap）；

3、HTML文件规范

a、标签的使用和嵌套尽量遵循W3C的标准；

b、页面中组合式标签严禁随意进行嵌套（如：ul、dl）；

c、页面中标题尽量使用h1~h5这样的标签；

d、内联元素和内联块元素严禁嵌套块级元素；

e、元素使用浮动后必须在父级清理浮动；

f、静态图片尽量通过背景图来实现；

g、按照页面的功能模块添加注释，统一写在模块的开始；

4、CSS文件规范

a、涉及到css3的样式统一加上兼容性前缀；

b、css3动画的定义统一放到样式的最顶部；

c、原则上是不能在结构中定义样式；

d、尽量不要使用！Important这样的后缀；

e、样式尽量做到公用，避免大量定义类名；

f、根据样式的功能添加注释，统一写在模块的开始；

二、数据交互

1、项目文件的创建前端部分如下：

注：a、Resources文件中的文件目录与静态界面中的一致；b、Areas文件和Views文件中的文件目录和后台协商，尽量根据

功能进行视图的拆分；c、Scripts文件中存放第三方插件；d、

Shared文件夹中放一些公用的视图，如项目中文件的引入、公

用的弹框等；e、文件的头部统一按上图所示

2、JavaScript代码规范

a、将公用的JS文件统一封装在common.js文件中；

b、方法都要添加注释，注明该方法的功能以及参数的作用；

c、方法名要有语义化，使用驼峰命名的规则；

d、尽量不要使用全局变量，变量要语义化，使用驼峰命名；

e、将交互代码写在对应的拆分视图的头部，并做好注释；

f、JS代码中尽量不要直接操作样式，可以通过类名；

g、代码尽量做到工整，不要随意乱放；

h、页面不用的定时器统一清掉；

i、一个方法不要过于复杂，要便于维护，原则上不超过80行；

j、公用的第三方库版本要统一，不得重复添加；

3、项目中的注意事项

a、在修改项目中的样式问题时，自己重新定义类名，不要原有样式上修改；

b、添加样式时，统一写在样式表的最底部，标注添加日期；

c、开发过程中没有特殊要求，统一兼容到IE9以上（包括IE9）；

d、兼容主流的浏览器（火狐，谷歌浏览器、360的两种模式）；

e、笔记本的适配尺寸（1366*768 1440*900 1600*900

1680*1050 1920*1080）；

f、项目提交内测之前，先通过我这一块的冒烟测试（提交内测的前两天反馈）；

g、自测时，重点关注笔记本的适配问题，确保页面不变形；

h、每天早晨上班更新SVN，晚上下班提交可以运行的代码；

i、SVN提交时，做好注释；

j、新开发的项目要写前端开发设计文档（包括几个方面：框架的选择、界面效果的实现、项目文件目录的构建、页面的拆分、功能模块的实现。）