【WEB前端开发规范】
<p style="text-align: center">WEB前端开发规范</p><p><strong>一、概述</strong></p>
<ul>
<li>提高团队协作效率</li>
<li>便于前端开发以及后期优化维护</li>
<li>方便新进的成员快速上手</li>
<li>输出高质量的代码</li>
<li>本规范文档一经确认, 前端开发人员必须按本文档规范进行前台页面开发。本文档如有</li>
<li>不对或者不合适的地方请及时提出，经讨论决定后可以更新此文档。</li>
</ul>
<p>二、基本准则</p>
<ul>
<li>符合 web 标准, 语义化 html, 结构表现行为分离, 兼容性优良。</li>
<li>代码要求简洁明了有序, 尽可能的减小服务器负载, 保证最快的解析速度。</li>
<li>开发时需要遵循如上基本准则，特殊情况可以有所宽限。</li>
</ul>
<p>三、文件规范</p>
<p> 3.1文件命名规则</p>
<p> 使用场景：在新建网页、图片、脚本、CSS 文件时，根据此规则给文件命名并放入指定位置。</p>
<p> 文件名称统一用英文字母和下划线的组合，其中不得包含汉字空格和特殊字符。</p>
<p> 命名原则的指导思想一是使得你自己和工作组的每一个成员能够方便的理解每一个文件的意义。</p>
<p> 3.1.1 页面命名</p>
<p>页面名称统一用大驼峰和下划线的组合，索引文件统一使用 Index.htm、Index.html Index.aspx、 Default.aspx、xxx_Default.aspx文件名,其他文件命名的原则首先应该以栏目名的英语翻译和改页面英文翻译为名称，列如：</p>
<table border="1" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td valign="top" width="277">
<p>页面</p>
</td>
<td valign="top" width="277">
<p>命名</p>
</td>
</tr>
<tr>
<td valign="top" width="277">
<p>知元编辑</p>
</td>
<td valign="top" width="277">
<p>Meta_Edit.aspx</p>
</td>
</tr>
<tr>
<td valign="top" width="277">
<p>知元浏览</p>
</td>
<td valign="top" width="277">
<p>Meta_View.aspx</p>
</td>
</tr>
<tr>
<td valign="top" width="277">
<p>节点编辑</p>
</td>
<td valign="top" width="277">
<p>Node_Edit.aspx</p>
</td>
</tr>
</tbody>
</table>
<p>3.1.2 图片命名</p>
<p>图片的名称分为头尾两部分，用下划线隔开，头部分表示此图片的大类性质。</p>
<p>例如：广告、标志、菜单、按钮等等。</p>
<ul>
<li>放置在页面顶部的广告、装饰图案等长方形的图片取名： banner</li>
<li>标志性的图片取名为： logo</li>
<li>在页面上位置不固定并且带有链接的小图片我们取名为 button</li>
<li>在页面上某一个位置连续出现，性质相同的链接栏目的图片我们取名： menu</li>
<li>装饰用的照片我们取名： pic</li>
<li>不带链接表示标题的图片我们取名： title</li>
</ul>
<p>范 例 ： banner_sohu.gif 、banner_sina.gif 、menu_aboutus.gif 、menu_job.gif、</p>
<p>title_news.gif、 logo_police.gif、 logo_national.gif 、pic_people.jpg</p>
<p>3.1.3 JavaScript、CSS、LESS文件命名</p>
<p>使用脚本功能的英文小写缩写命名。</p>
<p>例如：<strong><span style="color: rgba(255, 0, 0, 1)">广告条的 javascript 文件名为 ad.js，弹出窗口的 javascript 文件名为 pop.js，树形文件命名tree.js，节点导图的CSS文件node_mind.css，节点列表node_list.less。</span></strong></p>
<p><strong><span style="color: rgba(255, 0, 0, 1)">★3.2文件存放位置</span></strong></p>
<table border="1" cellspacing="0" cellpadding="0" align="left">
<tbody>
<tr>
<td valign="top" width="283">
<p>文件夹</p>
</td>
<td valign="top" width="265">
<p>说明</p>
</td>
</tr>
<tr>
<td valign="top" width="283">
<p>Configure</p>
</td>
<td valign="top" width="265">
<p>存放配置类的页面</p>
</td>
</tr>
<tr>
<td valign="top" width="283">
<p>Domain</p>
</td>
<td valign="top" width="265">
<p>存放应用类型相关的页面</p>
</td>
</tr>
<tr>
<td valign="top" width="283">
<p>ErrorPages</p>
</td>
<td valign="top" width="265">
<p>存放错误页面</p>
</td>
</tr>
<tr>
<td valign="top" width="283">
<p>Meta</p>
</td>
<td valign="top" width="265">
<p>存放相关知元的的页面</p>
</td>
</tr>
<tr>
<td valign="top" width="283">
<p>Node</p>
</td>
<td valign="top" width="265">
<p>存放相关的节点的页面</p>
</td>
</tr>
<tr>
<td valign="top" width="283">
<p>Pages</p>
</td>
<td valign="top" width="265">
<p>存放六大板块页面和其他页面</p>
</td>
</tr>
<tr>
<td valign="top" width="283">
<p>widget</p>
</td>
<td valign="top" width="265">
<p>存放ascx控件</p>
</td>
</tr>
</tbody>
</table>
<p> 一下文件夹存放在对应的大类文件夹下：</p>
<table border="1" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td valign="top" width="277">
<p>文件夹</p>
</td>
<td valign="top" width="277">
<p>说明</p>
</td>
</tr>
<tr>
<td valign="top" width="277">
<p>Images</p>
</td>
<td valign="top" width="277">
<p>存放图片</p>
</td>
</tr>
<tr>
<td valign="top" width="277">
<p>Css</p>
</td>
<td valign="top" width="277">
<p>存放css文件和less文件</p>
</td>
</tr>
<tr>
<td valign="top" width="277">
<p>Js</p>
</td>
<td valign="top" width="277">
<p>存放javascript文件</p>
</td>
</tr>
<tr>
<td valign="top" width="277">
<p>Fonts</p>
</td>
<td valign="top" width="277">
<p>存放字体文件</p>
</td>
</tr>
<tr>
<td valign="top" width="277">
<p>Media</p>
</td>
<td valign="top" width="277">
<p>存放多媒体文件</p>
</td>
</tr>
</tbody>
</table>
<p> </p>
<p> </p>
<p>3.3 HTML书写规范</p>
<p><strong>使用场景：</strong>书写 html 、aspx页面时，根据此规则对页面进行规范编写。</p>
<p>3.3.1head区块代码规范</p>
<p>head 区是指 HTML 代码的<head>和</head>之间的内容。</p>
<p>1. 网页显示字符集</p>
<p>简体中文：</p>
<p><meta http-equiv="Content-Type" content="text/html; charset=gb2312"></p>
<p>繁体中文：</p>
<p><meta http-equiv ="Content-Type" content ="text/html; charset=utf-8"></p>
<p>英 语：</p>
<p><meta http-equiv ="Content-Type" content ="text/html; charset=utf-8"></p>
<p>2. 搜索关键字（网站类型）</p>
<p>< meta name="keywords" content ="xxxx,xxxx,xxx,xxxxx,xxxx,"></p>
<p>3. 网页的 css 规范</p>
<p> <link href="/css/style.css" rel="stylesheet" type="text/css"></p>
<p>4. 网页标题 <title>xxxxxxxxxxxxxxxxxx</title></p>
<p> 可以选择加入的标签</p>
<p>1.公司版权注释</p>
<p><!--- The site is designed by EHM,Inc 07/2005 ---></p>
<p>2. 网页制作者信息</p>
<p><meta name="author" content="webmaster@maketown.com"></p>
<p>3. 网站简介</p>
<p><meta name="DESCRIPTION" content ="xxxxxxxxxxxxxxxxxxxxxxxxxx"></p>
<p><span style="color: rgba(255, 0, 0, 1)"><strong>4. 设定网页的到期时间。一旦网页过期，必须到服务器上重新调阅。</strong></span></p>
<p><meta http-equiv ="expires" content ="Wed, 26 Feb 1997 08：21：57 GMT"></p>
<p><strong><span style="color: rgba(255, 0, 0, 1)">5. 禁止浏览器从本地机的缓存中调阅页面内容。</span></strong></p>
<p><meta http-equiv ="Pragma" content ="no-cache"></p>
<p><strong><span style="color: rgba(255, 0, 0, 1)">6. 用来防止别人在框架里调用你的页面。</span></strong></p>
<p><meta http-equiv ="Window-target" content ="_top"></p>
<p><strong><span style="color: rgba(255, 0, 0, 1)">7. 自动跳转。</span></strong></p>
<p><meta http-equiv ="Refresh" content ="5;url=http：//www.yahoo.com">5 指时间停留 5 秒</p>
<p>8. 网页搜索机器人向导。用来告诉搜索机器人哪些页面需要索引，哪些页面不需要索引。</p>
<p><meta name="robots" CONTENT="none"></p>
<p>CONTENT 的参数有 all,none,index,noindex,follow,nofollow。默认是 all。</p>
<p>9. 图标 <link rel = "Shortcut Icon" href="favicon.ico"></p>
<p>3.3.2 body区块代码规范</p>
<p> Body区必须采用DIV+CSS布局，不允许不同类型的标签并列排序。</p>
<p>3.4 CSS书写规范</p>
<p><strong>使用场景</strong>：书写 CSS 样式时，根据此规则对 id 和 class 进行命名，并遵循书写规则，避免出现常犯错误，提高效率。</p>
<p>3.4.1 基本准则</p>
<p> 样式编写统一采用less预处理进行编写，通过Koala编译成CSS文件引入页面。编译时同一选择Source Map,输出方式选择compress。</p>
<p>CSS 样式分为 3 类：重新定义 HTML 样式、链接状态样式、自定义样式。</p>
<p><strong>1. </strong>重新定义 HTML 样式为设计师重新定义已有的 HTML 标签样式，影响全部的被设定标签样式，用于统一网页中某一标签的样式定义。样式名“HTML 标签”例：hr { border: 1px;dotted #333333 }</p>
<p><strong>2. </strong>链接状态样式为设计师对链接不同状态设定特殊样式，影响被使用本样式区域中的链接。</p>
<p>该样式写法有 2 种：a.nav:link(中间无空格) 、.nav a:link 第一种只能修饰<a>标签中；第二种可以修饰所有包含有<a>标签的其他标签。</p>
<p>3. 自定义的新 CSS 样式，影响被使用本样式的区域，用于完成网页中局部</p>
<p>的样式设定。样式名 “.”+“相应样式效果描述的单词或缩写”例：“ .shadow ”</p>
<p>文字样式样式名“.no”+“字号”+“行距”+“颜色缩写”例：“ .no12 ” 、“ .no12_24 ”</p>
<p>“.no12”类型一般出现在 public.css 文件中，只可选用，不可修改，避免名称含义和实际内容不符。自定义的样式名必须用有意义的命名。</p>
<p>比如：重要的新闻高亮显示（像红色），有两种写法：</p>
<p>red{color:red}；.important_news{color:red}；</p>
<p>命名规则：采用相应的英文单词或英文单词简写，单词之间使用下划线连接，例如：.btn_save</p>
<p>4. 页面内的样式加载必须用链接方式：</p>
<p><link rel="stylesheet" type="text/css" href="style/style.css"></p>
<p>5. 重新定义的最先，伪类其次，自定义样式最后，便于自己和他人阅读。</p>
<p>6. 一般不允许将样式的定义写在标签中（如：style=“color:red;”）；</p>
<p>7. 所有装饰性的图片（如背景图），要定义在 CSS 中；</p>
<p><strong><span style="color: rgba(255, 0, 0, 1)">3.4.2 注意细则</span></strong></p>
<p>1. class与id命名: 大的框架命名比如header/footer/wrapper/left/right之类的由设计框</p>
<p>架之人统一命名。其他样式名称由小写英文&数字&_来组合命名, 避免使用中文拼音, 尽量使用简易的单词组合; 总之, 命名要语义化, 简明化。</p>
<p>2. 规避 class 与 id 重名 , 不建议使用 id 选择器。</p>
<p>a. 通过从属写法规避, 示例见 d;</p>
<p>b. 取父级元素 id/class 命名部分命名, 示例见 d;</p>
<p>c. 重复使用率高的命名,可加代号加下划线起始, 比如 i_clear;</p>
<p>d. a、b 两条, 适用于在 2 中已建好框架的页面, 如, 要在 2 中已建好框架的页面代码<div id="mainnav"></div>中加入新的 div 元素,</p>
<p>按 a 命名法则: <div id="mainnav"><div class="firstnav">...</div></div>,</p>
<p>样式写法: #mainnav .firstnav{.......}</p>
<p>按 b 命名法则: <div id="mainnav"><div class="main_firstnav">...</div></div>,</p>
<p>样式写法: .main_firstnav{.......}</p>
<p><strong><span style="color: rgba(255, 0, 0, 1)">3. css 属性书写顺序, 建议遵循 布局定位属性-->自身属性-->文本属性-->其他属性。此条可根据自身习惯书写, 但尽量保证同类属性写在一起。</span></strong></p>
<p>文件夹 说明布局定位属性 Margin\padding\float\clear\position （ 相 应 的top,right,bottom,left）\display\visibility\overflow 等；自身属性 Width\height\background\ border；文本属性 font\color\text-align\text-decoration\</p>
<p>text-indent\ white-space\othertext\content 等；其他属性 list-style(列表样式)\vertical-align\cursor\z-index(层叠顺序)\zoom 等</p>
<p><strong><span style="color: rgba(255, 0, 0, 1)">4. 书写代码前, 考虑并提高样式重复使用率;</span></strong></p>
<p>5. 杜绝使用<meta http-equiv="X-UA-Compatible" content="IE=7" /> 兼容 ie8;</p>
<p>6. 避免兼容性属性的使用, 比如 text-shadow || css3 的相关属性;</p>
<p>7. 减少使用影响性能的属性, 比如 position:absolute || float ;</p>
<p>8. 重要图片加上 alt 属性；<strong><span style="color: rgba(255, 0, 0, 1)">重要的元素和截断的元素加上 title;</span></strong></p>
<p>9. 避免使用!important，!important 的优先级最高;</p>
<p>10. 必须为大区块样式添加注释, 小区块适量注释;</p>
<p>11. 代码缩进与格式: 建议单行书写, 可根据自身习惯, 后期优化统一处理;</p>
<p><strong><span style="color: rgba(255, 0, 0, 1)">12. Margin、padding、border、font 等样式尽可能采用合并写法;</span></strong></p>
<p>3.4.1 命名规则</p>
<table border="1" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td colspan="2" valign="top" width="553">
<p>页面结构</p>
</td>
</tr>
<tr>
<td valign="top" width="277">
<p>容器: container/wrap</p>
</td>
<td valign="top" width="277">
<p>整体宽度：wrapper</p>
</td>
</tr>
<tr>
<td valign="top" width="277">
<p>页头：header</p>
</td>
<td valign="top" width="277">
<p>内容：content</p>
</td>
</tr>
<tr>
<td valign="top" width="277">
<p>页面主体：main</p>
</td>
<td valign="top" width="277">
<p>页尾：footer</p>
</td>
</tr>
<tr>
<td valign="top" width="277">
<p>侧栏：sidebar</p>
</td>
<td valign="top" width="277">
<p>栏目：column</p>
</td>
</tr>
<tr>
<td valign="top" width="277">
<p>中间内容：center</p>
</td>
<td valign="top" width="277">
<p> </p>
</td>
</tr>
<tr>
<td colspan="2" valign="top" width="553">
<p>导航</p>
</td>
</tr>
<tr>
<td valign="top" width="277">
<p>导航：nav</p>
</td>
<td valign="top" width="277">
<p>主导航：mainbav/globalnav</p>
</td>
</tr>
<tr>
<td valign="top" width="277">
<p>子导航：subnav</p>
</td>
<td valign="top" width="277">
<p>顶导航：topnav</p>
</td>
</tr>
<tr>
<td valign="top" width="277">
<p>边导航：sidebar</p>
</td>
<td valign="top" width="277">
<p>左导航：leftsidebar</p>
</td>
</tr>
<tr>
<td valign="top" width="277">
<p>右导航：rightsidebar</p>
</td>
<td valign="top" width="277">
<p>边导航图标：sidebarIcon</p>
</td>
</tr>
<tr>
<td valign="top" width="277">
<p>菜单：menu</p>
</td>
<td valign="top" width="277">
<p>子菜单：submenu</p>
</td>
</tr>
<tr>
<td valign="top" width="277">
<p>标题: title</p>
</td>
<td valign="top" width="277">
<p> </p>
</td>
</tr>
<tr>
<td colspan="2" valign="top" width="553">
<p>功能</p>
</td>
</tr>
<tr>
<td valign="top" width="277">
<p>标志：logo</p>
</td>
<td valign="top" width="277">
<p>登陆：login</p>
</td>
</tr>
<tr>
<td valign="top" width="277">
<p>登录条：loginbar</p>
</td>
<td valign="top" width="277">
<p>注册：regsiter</p>
</td>
</tr>
<tr>
<td valign="top" width="277">
<p>产品：products</p>
</td>
<td valign="top" width="277">
<p>摘要:summary</p>
</td>
</tr>
<tr>
<td valign="top" width="277">
<p>广告/标语：banner</p>
</td>
<td valign="top" width="277">
<p>关键词：keyword</p>
</td>
</tr>
<tr>
<td valign="top" width="277">
<p>搜索：search</p>
</td>
<td valign="top" width="277">
<p>搜索输入框：search_input</p>
</td>
</tr>
<tr>
<td valign="top" width="277">
<p>状态：status</p>
</td>
<td valign="top" width="277">
<p>列表：list</p>
</td>
</tr>
<tr>
<td valign="top" width="277">
<p>按钮：btn</p>
</td>
<td valign="top" width="277">
<p>标签页：tab</p>
</td>
</tr>
<tr>
<td valign="top" width="277">
<p>当前的: current</p>
</td>
<td valign="top" width="277">
<p>皮肤：skin</p>
</td>
</tr>
<tr>
<td valign="top" width="277">
<p>小技巧：tips</p>
</td>
<td valign="top" width="277">
<p>活动：activities</p>
</td>
</tr>
<tr>
<td valign="top" width="277">
<p>充值：pay</p>
</td>
<td valign="top" width="277">
<p>推广：promotion</p>
</td>
</tr>
<tr>
<td valign="top" width="277">
<p>活动：activities</p>
</td>
<td valign="top" width="277">
<p>信息发布：information</p>
</td>
</tr>
<tr>
<td valign="top" width="277">
<p>地址：add</p>
</td>
<td valign="top" width="277">
<p>传真：fax</p>
</td>
</tr>
<tr>
<td valign="top" width="277">
<p>电话：tel</p>
</td>
<td valign="top" width="277">
<p>尺寸：size</p>
</td>
</tr>
<tr>
<td valign="top" width="277">
<p>品牌：brand</p>
</td>
<td valign="top" width="277">
<p>价格：price</p>
</td>
</tr>
<tr>
<td valign="top" width="277">
<p>服务：service</p>
</td>
<td valign="top" width="277">
<p>动态：trends</p>
</td>
</tr>
<tr>
<td valign="top" width="277">
<p>提交：submit</p>
</td>
<td valign="top" width="277">
<p>新闻：news</p>
</td>
</tr>
<tr>
<td valign="top" width="277">
<p>网站信息：siteinfo</p>
</td>
<td valign="top" width="277">
<p>购物车：shop</p>
</td>
</tr>
</tbody>
</table>
<p>3.5 JavaScript书写规范</p>
<p><strong>使用场景：</strong>书写 js 脚本时，根据此规则对变类、函数、变量命名，并遵循书写规则，避免出现常犯错误，提高脚本效率。</p>
<p>1. 书写过程中, 每行代码结束必须有分号; 原则上所有功能均根据 XXX 项目需求原生开发,以<strong><span style="color: rgba(255, 0, 0, 1)">避免网上 down 下来的代码造成的代码污染(沉冗代码 || 与现有代码冲突 || ...);</span></strong></p>
<p>2. 库引入: 原则上仅引入 jQuery 库,以及组件组开发的相关库。<strong><span style="color: rgba(255, 0, 0, 1)"> 若需引入第三方库, 须与团队其他人员讨论决定;</span></strong></p>
<p>3. 变量命名: 驼峰式命名. 原生 JavaScript 变量要求是纯英文字母, 首字母须小写, 如iTaoLun;<strong><span style="color: rgba(255, 0, 0, 1)"> jQuery 私有变量要求首字符为'_',</span> </strong>其他与原生 JavaScript 规则相同, 如:_iTaoLun; 另, 要求变量集中声明, 避免全局变量.</p>
<p>4. 类命名: 首字母大写，如 ITaoLun;</p>
<p>5. 函数命名: 首字母小写驼峰式命名. 如 iTaoLun();</p>
<p>6. 命名语义化, 尽可能利用英文单词或其缩写;</p>
<p>7. 尽量避免使用存在兼容性及消耗资源的方法或属性,<span style="color: rgba(255, 0, 0, 1)"><strong> 比如 eval() & innerText</strong></span>;</p>
<p>8. <strong><span style="color: rgba(255, 0, 0, 1)">后期优化中, JavaScript 非注释类中文字符须转换成 unicode 编码使用, 以避免编码错误时乱码显示;</span></strong></p>
<p>9. 代码结构明了, 加适量注释. 提高函数重用率;</p>
<p><strong><span style="color: rgba(255, 0, 0, 1)">★10. 注重与 html 分离, 减小 reflow, 注重性能.</span></strong></p>
<p>3.6 图片规范</p>
<p><strong>使用场景：</strong>引用添加图片文件时，根据此规则对图片格式进行选择以及命名存放。</p>
<p>1. 所有页面元素类图片均放入 images 文件夹,<strong><span style="color: rgba(255, 0, 0, 1)"> 测试用图片放于 images/demoimg 文件夹;</span></strong></p>
<p>2. 图片格式仅限于 gif || png || jpg ||svg;</p>
<p>3.7 注释规范</p>
<p><strong>使用场景：</strong>书写代码时，根据此规则对代码进行适当注释说明，方便自己或他人阅读和理解。</p>
<p>3.7.1 HTML注释</p>
<p>注释格式 <!--这儿是注释-->, '--'只能在注释的始末位置,不可置入注释文字区域。</p>
<p>3.7.2 CSS注释</p>
<p>1. 行间注释：直接写于属性值后面。</p>
<p>例： .search{ border:1pxsolid#fff;/*定义搜索输入框边框*/</p>
<p>background:url(../images/icon.gif)no-report#333;/*定义搜索框的背景*/ }</p>
<p>2. 整段注释：分别在开始及结束地方加入注释。</p>
<p>例：</p>
<p>/*=====搜索条=====*/</p>
<p>.search{ border:1pxsolid#fff;</p>
<p>background:url(../images/icon.gif)no-repeat#333;}</p>
<p>/*=====搜索条结束=====*/</p>
<p>3.7.3 JavaScript注释</p>
<p>JavaScript 注释, 单行注释使用'//这儿是单行注释' ,多行注释使用 /* 这儿有多行注释 */;</p><br><br>
来源：https://www.cnblogs.com/yizhiduxiublog/p/12376494.html
頁:
[1]