前端开发规范总结

制定相关的开发规范，是为了约束开发人员编写的代码保持一致风格，提高代码可读性，提高团队协作效率，以便于前端后期的代码优化维护和维护人员添加功能， 最终保证输出可读性强和可维护的代码和高质量的文档。

项目结构规范

project  --项目名称
    assets  
        css    --样式文件 
        js     --存放JavaScript脚本  
        images --图片文件 
    api        --请求接口 
    bin        --二进制文件
    components --公共组件
    config     --配置文件
    local  
        cn     --中文资源文件  
        en     --英文资源文件
    utils    --存放工具类文件
    views    --页面文件
    temp     --存放临时文件资源
    mock     --模拟接口数据
    data     --数据文件

文件命名规范

文件名统一用小写的英文字母、数字和下划线的组合，其中不能包含汉字、空格和特殊字符。

命名原则思想：

1.使自己和工作组的每一个成员能够理解每一个文件的意义；

2.当我们在文件夹中使用“按名称排例”的规则，同一种大类的文件能够排列在一起，以便我们查找、修改、替换、计算负载量等操作。 

Html 命名

主页文件命名统一使用 index.htm，index.html，index.asp，index.asp 等文件名（小写）。

子页命名的原则首先应该以栏目名的英语翻译取单一单词为名称。例如： 关于我们（aboutus） 管理页面（manager） 订单（order）产 品（product ） 等。

Javascript 命名

弹出窗口（pop.js）， 请求（request.js），全局（global.js），api接口（api.js），权限（auth.js），存储（storage.js）等。

图片命名

图片的名称分为头尾两部分，用下划线隔开，头部分表示此图片的大类性质，尾部表示此图片二级类型。

如：轮播图（banner），标志性（logo），按钮（button），菜单（menu），导航（nav），地图（map），头部（head），底部（bottom）等。

主次如：share_sina.jpg，share_qq，share_baidu，banner_qq.gif，banner_sohu.gif，menu_product.gif，menu_job.gif 等。

CSS 命名规范

CSS样式可细分为3类：自定义样式、重新定义HTML样式、链接状态样式。

1. 自定义新的 CSS 样式，影响被使用本样式的区域，用于设定网页中局部的样式。

自定义样式名 “.”+“相应样式效果描述的单词或缩写”，例：“ .shadow ”；

文字样式名 “.no”+“字号”+“行距”+“颜色缩写”，例：“ .no12 ” 、“ .no12-24 ”；

2. 重新定义已有的HTML标签样式，影响全部的被设定标签样式，用于统一网页中某一标签的样式定义。

标签样式名 “HTML标签”，例：hr { border: 1px dotted #333333 }

3. 对链接不同状态设定特殊样式，影响被使用本样式区域中的链接。

只能修饰<a>标签： a.nav:link{ ... }

修饰所有包含有<a>标签的其他标签：nav.a:link{ ... } 

页面样式引用方式 <link rel="stylesheet" type="text/css" href="style/style.css"> 

页头：header  
页脚：footer
导航：nav 
子导航：subnav   
侧栏：sidebar  
栏目：column  
内容：content/container  
左右中：left right center  
登录：login  
标志：logo  
广告图：banner  
页面主体：main
新闻：news  
下载：download
菜单：menu  
子菜单：submenu  
搜索：search 
版权：copyright  
滚动：scroll  
内容：content  
标签页：tab  
列表：list  
提示：msg  
标题：title 

HTML 命名规范

- 网页 head 标签内的规范

网页显示字符集 ：<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">

网页简介： <META NAME="DESCRIPTION" CONTENT="介绍网页内容"> 

网页标题： <title>网页标题内容</title>

引入外部 css 文件： <link href="../css/style.css" rel="stylesheet" type="text/css"> 

引入外部 js 文件：<script language="javascript" src="script/demo.js"></script> 

- 网页字体

在设置文字字号样式和行间距应必须使用CSS样式表，内联样式，行内样式，禁止在页面中出现 <font size=?> 标记。 

在网页中中文应首选使用宋体。英文和数字首选使用 verdana 和 arial 两种字体。

在网页中的空白应该尽量使用 text-indent， padding，margin， hspace，vspace 以及透明的 gif 图片来实现。

- 网页链接

网页中的链接路径全部采用相对路径，一般链接到某一目录下的缺省文件的链接路径不必写全名，如不必这样：<a href=”news/index.html”> 而应该这样：<a href=”news/”>，所有内页指向首页的链接写成<a href=”/”> 。

当点击空链接时，它会自动将当前页面重置到首端，从而影响用户正常查阅内容，是用代码 “javascript:void(0)” 代替原来的 “#” 标记。

- 网页alt 和 title 属性

提示性语言标签，alt 用来给图片提示的。title 用来给链接文字或普通文字提示的。 如：<p title="给链接文字提示">文字</p>，<img src="图片.gif" alt="给图片提示"> 

JavaScript 命名规范

变量命名：驼峰命名，原生 JavaScript 变量要求是纯英文字母，首字母须小写，如 isLogin，flag； jQuery 变量要求首字符为'_'；其他与原生 JavaScript 规则相同； 如: _isLogin; 另外要求变量集中声明，避免全局变量。

类命名：首字母大写, 驼峰式命名. 如： Student，Teacher。

函数和方法命名：首字母小写驼峰式命名. 如：getStudent()，searchTeacher。

注：命名语义化，尽可能利用英文单词或其缩写；代码结构明了，加适量注释，提高函数重用率；注重与html分离, 减小reflow, 注重性能。

注释规范

1. html注释： 注释格式 <!--这儿是注释-->， '--'只能在注释的始末位置,不可置入注释文字区域。

2. css注释：注释格式 /*这儿是注释*/。

3. JavaScript注释：单行注释使用 '//这儿是单行注释' ；多行注释使用 /* 这儿有多行注释 */。

温馨提示

文章内容如果写的存在问题欢迎留言指出，让我们共同交流，共同探讨，共同进步~~~

文章如果对你有帮助，动动你的小手点个赞，鼓励一下，给我前行的动力。