前端开发规范

前端开发规范一、静态界面规范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*7681440*9001600*9001680*10501920*1080）；f、项目提交内测之前，先通过我这一块的冒烟测试（提交内测的前两天反馈）；g、自测时，重点关注笔记本的适配问题，确保页面不变形；h、每天早晨上班更新SVN，晚上下班提交可以运行的代码；i、SVN提交时，做好注释；j、新开发的项目要写前端开发设计文档（包括几个方面：框架的选择、界面效果的实现、项目文件目录的构建、页面的拆分、功能模块的实现。）