好!欢迎访问迷津渡口 现在时间是: 天气 °C ~ °C

迷津渡口

越感到迷惑 越接近真理

前端规范--写更好的代码

本文目录

规范说明

此为前端开发团队遵循和约定的代码书写规范,意在提高代码的规范性和可维护性。
此规范为参考规范,不全是硬性要求,部分硬性约定见下一条书写规范,统一团队编码规范和风格。让所有代码都是有规可循的,并且能够得到沉淀,减少重复劳动。

结构说明

-- 项目结构
----|---- CSS文件结构
----|---- JS文件结构

书写规范

样式与内容分离

项目结构

--- 
 |---- index.html             入口页    
 |---- js/                    JS //具体见JS细化结构                 
 |---- css/                   CSS //具体见CSS细化结构

重构步骤约定

注: 此时文件中不包含任何一个 id="xxx"
为上一步书写 CSS style
[至此重构完成]
开始书写js交互文件,使用ID和Class定位被操作句柄
向index.html中需要的地方添加id="xxx"及data-xxx="xxx"
[至此交互效果完成]

命名规范

  • 文件及文件夹: 全部英文小写字母+数字或连接符"-,_",不可出现其他字符 如:../css/style.css, jquery.1.x.x.js

  • 文件:调用/libs文件需包含版本号,压缩文件需包含min关键词,其他插件则可不包含 如:/libs/jquery.1.9.1.js/libs/modernizr-1.7.min.jsfileuploader.jsplugins.js

  • ID: 匈牙利命名法 & 小駝峰式命名法
    如:firstNametopBoxListfooterCopyright

  • Class: [减号连接符]
    如:top-itemmain-boxbox-list-item-1

  • 尽量使用语义明确的单词命名,避免leftbottom等方位性的词语

格式&编码

  • 文本文件:.xxxUTF-8(无BOM) 编码

  • 图片文件:.png(PNG-24) .jpg(压缩率8-12)

  • 动态图片:.gif

  • 压缩文件:.tar.gz.zip

CSS 细化规范

CSS 文件结构

--- ../css/
 |---- css/libs/reset.css                  CSS reset文件
 |---- … … 
 |---- css/images/                         主 CSS-sprite 图片     
 |---- css/style.css                       主 CSS 样式表
 |---- … … 
 |---- css/images/xxx/sprite.png           xxx 的 CSS-sprite 图片
 |---- css/xxx-style.css                   xxx 的 样式表

CSS(含Less) 文件结构

--- ../css/
 |---- css/libs/reset.less            CSS reset文件
 |---- css/libs/elements.less         Less 函数复用文件
 |---- … … 
 |---- css/images/                         主 CSS-sprite 图片     
 |---- css/style.less                      主样式Less
 |---- css/style.css                       less -> css 自动生成
 |---- … … 
 |---- css/images/xxx/sprite.png           xxx 的 CSS-sprite 图片
 |---- css/xxx-style.less                  xxx 的 Less
 |---- css/xxx-style.css                   less -> css 自动生成

使用Less

在.less文件头部引入 reset.less & elements.less,之后调用如下属性传参即可,具体使用说明见 -> Lesselements 官方文档

@import "libs/reset.less";  
@import "libs/elements.less";

.gradient
.bw-gradient
.bordered
.drop-shadow
.rounded
.border-radius
.opacity
.transition-duration
.rotation
.scale
.transition
.inner-shadow
.box-shadow
.columns
.translate

CSS reset

CSS reset 文件使用:reset.cssreset.less

  • reset文件用于重设各个浏览器的默认样式方案,解决其引起的耦合问题。

  • 也可使用.clearfix清除浮动

CSS 注释格式约定

/*
@name: Drop Down Menu
@description: Style of top bar drop down menu.
@require: reset.css
@author: Andy Huang(andyahung@geekpark.net)
*/

其中,@require为可选项

  • CSS换行制表:使用 2或4个空格,而非[Tab]

  • 书写格式:

    • CSS名称+冒号+属性
      如:.box1 {float:left;}

    • 建议保留{左侧空格,字体名用\包含
      如:.box1,.box2,.box3 {font-family:Courier,'Courier New';}

    • 避免中文,或使用转义,推荐前者
      如:font-family: "Microsoft YaHei";font-family:\5fae\8f6f\96c5\9ed1;

CSS各属性的排列顺序:不做硬性要求

如:以下2种顺序均可

.box {
  /* 顺序1 */
  background: none repeat scroll 0 0 transparent;
  bottom: 11px;
  position: relative;
  width: 22px;
  z-index: 33;
}
.box {
  /* 顺序2 */
  z-index: 33;
  width: 22px;
  bottom: 11px;
  background: transparent none repeat scroll 0 0 ;
  position: relative;
}

CSS嵌套规则

/* 推荐嵌套层级 */
.ui-icon-rarr{}
.ui-icon-larr{}
.ui-title{}
.ui-nav .ui-list{}
.ui-table .ui-list{}

/* 不推荐 */
.ui-icon-rarr{}
.ui-icon-larr{}
.ui-title{}
.ui-list{}
.ui-nav{}

CSS格式化

勿格式化,保留下面这种格式,增加可读性和可维护性,后期后台程序(如:PHP/Python)会将CSS压缩成 一行 输出:

.box{
  /* 勿格式化,增加可读性 */
  background: none repeat scroll 0 0 transparent;
  bottom: 11px;
  position: relative;
  width: 22px;
  z-index: 33;
}

XHTML 细化规范

HTML 注释格式约定

<!--
@name: Drop Down Menu
@description: Style of top bar drop down menu.
@author: Andy Huang(andyahung@geekpark.net)
-->

<div id="header">
    <div class="xxx">
        <span>HTML行内注释格式</span>
    </div>
</div><!-- #header end-->
  • HTML换行缩进:采用 2 空格

HTML嵌套规则

/* 推荐嵌套层级 */
  <ul class="ui-nav">
    <li class="ui-nav-item"> some text
      <ul class="ui-nav-item-child">
        <li> some text
          <ul class="ui-list">
            <li class="ui-list-item"> some text</li>
          </ul
        ...
       </ul>
    </li>
    <li
    ...
  </ul>

* 第一行统一使用HTML5标准:

<!DOCTYPE html>
<html dir="ltr" lang="zh-CN">
<head>
  <meta charset="utf-8" />
  <title>极客公园 | 创新者社区</title>
  <meta name="keywords" content="xxxx, xxx, xxxxx" />
  <meta name="description" content="xxxxxxxxxxxxxxxxxxxx" />

Meta 的使用:(需要根据具体需求按需选择)可参看:cool-head

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta http-equiv="Cache-Control" content="max-age=7200" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="http://feeds.geekpark.net/" />
<link rel="shortcut icon" href="favicon.ico">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">

<script type="text/javascript" src="/js/xxx.js"></script>
<link rel="stylesheet" href="/css/xxx.css">

<script type="text/javascript">
    //Google 统计代码 的位置在离</head>最近的位置
</script>


  • <img>标签默认缺省格式:<img src="xxx.png" alt="缺省时文字" />避免出现src="" 问题

  • <a>标签缺省格式:<a href="###" title="链接名称">xxx</>注:target="_blank"根据需求决定

  • <a>标签预留链接占位符使用###,参见:a标签占位符问题

  • 所有标签需要符合XHTML标准闭合

  • 一律统一标签结尾斜杠的书写形式:<br /><hr />注意之间空格

  • 避免使用已过时标签,如:<b><u><i>而用<strong><em>等代替

  • 使用data-xxx来添加自定义数据,如:<input data-xxx="yyy"/>

  • 避免使用style="xxx:xxx;"的内联样式表

  • 特殊符号使用参考HTML 符号实体

JS 细化规范

JS 文件结构

---/js/
|---- /libs/plugin-1/       使用到的js插件1  
|---- /libs/plugin-2/       使用到的js插件2  
|---- /libs/plugin-3/       使用到的js插件3  
|---- script.js             单独书写的js  
|---- plugins.js            调用的plugins汇总  
|---- juqery-1.9.x.min.js   调用jq库文件
  • JS 换行缩进:采用 4 空格

  • 结束行需添加分号;

  • jQuery变量要求首字符为$, 私有变量:首字符为_; 尽量避免全局变量.

  • 避免使用 eval(),setTimeOut使用调用函数,考虑重绘,回流 操作对页面影响  参看:reflows,repaints

  • JS调试使用console.log()及console.dir()进行,避免使用弹出框,线上版需要注释所有调试代码

  • JS压缩混淆工具: JS Compressor 如果使用了压缩,需要留name-src.js在同路径供今后修改使用

jQuery Call
<!-- Grab Google CDN jQuery. fall back to local if necessary -->  
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>  
<script>!window.jQuery && document.write('<script src="js/jquery-1.7.2.min.js"><\/script>')</script>
jQuery Plugin
JSON格式规范

参考JSON Style Guide翻译,原版:Google JSON Style Guide

HTML 细化规范

  • HTMLhead部分的结构参看:cool-head (摘取必要内容即可)

  • css文件置于都 头部

  • jQuery及Google Analytics引用置于 头部

  • 其他效果js及统计代码文件置于 尾部

  • HTML 代码尽量过一遍HTML5 验证

  • HTML 占位图片使用 temp.im & placehold.us 图片服务

Responsive Web 规范

从设计之处就坚持"Mobile First"的理念,在重构页面的时候要灵活采取响应式的解决方案。

响应式实现途径

* 设置 meta viewport 属性

<meta name="viewport" content="width=device-width, initial-scale=1" />

* 引入不同尺寸设备的样式表

<link rel="stylesheet" type="text/css" href="style.css" media="screen, handheld" />
<link rel="stylesheet" type="text/css" href="enhanced.css" media="screen  and (min-width: 40.5em)" />
<!--[if (lt IE 9)&(!IEMobile)]>
<link rel="stylesheet" type="text/css" href="enhanced.css" />
<![endif]-->

* 使用 CSS Media Queries 方法

@media screen and (max-width: 40.5em) {
  .product-img {
    width: auto;
    float: none;
  }
}
@media screen and (max-width: 480px) {
}

* JS控制导航栏在 resize 事件 触发后的可见性,如:

$(w).resize(function(){ //Update dimensions on resize
  sw = document.documentElement.clientWidth;
  sh = document.documentElement.clientHeight;
  checkMobile();
});
//Check if Mobile
function checkMobile() {
  mobile = (sw > breakpoint) ? false : true;
  if (!mobile) { //If Not Mobile
    $('[role="tabpanel"],#nav,#search').show(); //Show full navigation and search
  } else { //Hide 
    if(!$('#nav-anchors a').hasClass('active')) {
      $('#nav,#search').hide(); //Hide full navigation and search
    }
  }
}

响应式解决方案

* 弹性图片

img {
  max-width: 100%;
  height: auto;
  width: auto\9; /* ie8 */
}

* 自适应嵌入媒体

.video embed, .video object, .video iframe {
  width: 100%;
  height: auto;
}

* 禁用iPhone字体自适应功能:

html {
  -webkit-text-size-adjust: none;
}

* 让 IE 9 以下的IE版本支持响应式:

<!--[if lt IE 9]>
  <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->

Newletter 制作规范

  • CSS只可使用 内联样式表 ,如:style="margin:0;"

  • 设计之初遵循: 图上无文本,文本后无底纹 的规则

  • 使用MailChimp HTML Email CSS Fix参看下文链接

  • 引入CSS Reset for HTML Email参看下文链接

  • 使用Table布局而非DIV

  • 所有图片使用IMG标签,如:<img style="style="display:block" "src="" />

  • 可以适当使用占位符spacer.gif

  • 多用<br />换行而非<p>

  • 整体最佳宽度为:550-600px

  • 不使用Javascript

  • 正式发送给用户之前,多次测试

更多细节参考下面链接:
12 Killer Tips and Tricks for Building HTML Email
Coding HTML Newsletters (EDM)

生产力工具推荐

for Mac OS

for more app detial check -> IUSETHIS

前端相关工具(Mac)
其他效率工具
前端相关工具(Windows)
其他效率工具(Windows)

其他收集

相关技巧

Wiki page index

使用团队

此规范基于 MIT License 开源,持续更新维护中,可Star或Fork本项来形成你的规范,请以 创建[issues] 的方式反馈,或发起Pull Request

点赞0
 标签: 前端规范
   支持一下
挤眼 亲亲 咆哮 开心 想想 可怜 糗大了 委屈 哈哈 小声点 右哼哼 左哼哼 疑问 坏笑 赚钱啦 悲伤 耍酷 勾引 厉害 握手 耶 嘻嘻 害羞 鼓掌 馋嘴 抓狂 抱抱 围观 威武 给力
 点赞
 签到
 表情
 图片
 代码
提交评论

清空信息
关闭评论
bookoobeats
 bookoobeats 约 17 小时前回复
#125
<a href="http://www.findatrans.com/lyst-polo-ralph-lauren-linen-military-workshirt-in-white-for-men-poloh">lyst polo ralph lauren linen military workshirt in white for men</a> <a href="http://www.isabellerigal.com/mens-nike-free-run-2-gold-pink-shoesi">mens nike free run 2 gold pink</a> <a href="http://www.esnafkocaeli.com/nike-lunarglide-6-womens-blue-pink-shoesk">nike lunarglide 6 womens blue pink</a> <a href="http://www.dkdjabar.com/nike-kobe-10-elite-oransje-gr%C3%A5-obuvq">nike kobe 10 elite oransje gr氓</a> <a href="http://www.jamiecirillo.com/herre-nike-air-max-tailwind-7-lyser%C3%B8d-skoj">herre nike air max tailwind 7 lyser酶d</a> <a href="http://www.xpostshopx.com/nike-kyrie-1-grigio-argento-scarpeq">nike kyrie 1 grigio argento</a>
bookoobeats http://www.bookoobeats.com/
perialetheia
 perialetheia 2019-03-20 12:30回复
#124
<a href="http://www.brentgattis.com/jordan-air-jordan-3-retro-hvid-bl%C3%A5-gr%C3%A5-butyd">jordan air jordan 3 retro hvid bl氓 gr氓</a> <a href="http://www.lfptrade.com/air-max-90-rosso-croc-kurpesc">air max 90 rosso croc</a> <a href="http://www.phihochwei.com/dam%C3%A4nner-big-pony-polo-rosa-gelb-polos">dam盲nner big pony polo rosa gelb</a> <a href="http://www.pobert.com/hommes-nike-shox-deliver-or-gris-butyf">hommes nike shox deliver or gris</a> <a href="http://www.qrsdeals.com/ralph-lauren-tracksuit-jaune-rose-polou">ralph lauren tracksuit jaune rose</a> <a href="http://www.taxhelpcentre.com/adidas-zx-750-gr%C3%BCn-equipm%C3%A4nnert-chaussuresf">adidas zx 750 gr眉n equipm盲nnert</a>
perialetheia http://www.perialetheia.com/
hiyawigs
 hiyawigs 2019-03-19 16:49回复
#123
<a href="http://www.twistnik.com/air-jordan-retro-30.5-blanco-negro-zapatosl">air jordan retro 30.5 blanco negro</a> <a href="http://www.pkbocrangsu.com/nike-air-max-sequent-2-mens-grey-black-shoesk">nike air max sequent 2 mens grey black</a> <a href="http://www.celudela.com/nike-free-run-5.0-kvinner-rosa-gr%C3%B8nn-obuvi">nike free run 5.0 kvinner rosa gr酶nn</a> <a href="http://www.fooksung.com/adidas-tubular-runner-svart-svart-obuvk">adidas tubular runner svart svart</a> <a href="http://www.ankaramarti.com/nike-air-max-90-hyp-frm-hvit-r%C3%B8d-obuvi">nike air max 90 hyp frm hvit r酶d</a> <a href="http://www.gcpoloclub.com/mujer-nike-air-max-95-blanco-negro-rosado-zapatosl">mujer nike air max 95 blanco negro rosado</a>
[url=http://www.hiyawigs.com/]hiyawigs[/url]
hobbyfreaks
 hobbyfreaks 2019-03-19 09:09回复
#122
<a href="http://www.evorewards.com/nike-lunarglide-7-s%C3%B8lv-hvit-kurpesf">nike lunarglide 7 s酶lv hvit</a> <a href="http://www.kfmimarlik.com/nike-flyknit-roshe-run-rouge-door-schuhef">nike flyknit roshe run rouge door</a> <a href="http://www.larozena.com/nike-air-max-tailwind-7-hommes-fonctionnement-chaussure-width-obuvg">nike air max tailwind 7 hommes fonctionnement chaussure width</a> <a href="http://www.lebosmartlipo.com/air-jordan-retro-12-gul-s%C3%B8lv-chaussuresa">air jordan retro 12 gul s酶lv</a> <a href="http://www.mobilsevgili.com/nike-air-max-lunar-1-vert-orange-butya">nike air max lunar 1 vert orange</a> <a href="http://www.ochapan.com/nike-lebron-13-enfants-argent-gris-obuvd">nike lebron 13 enfants argent gris</a>
hobbyfreaks http://www.hobbyfreaks.com/
otuzbircek
 otuzbircek 2019-03-19 02:27回复
#121
<a href="http://www.laketreepress.com/dam%C3%A4nner-air-jordan-retro-13-wei%C3%9F-orangen-schuhel">dam盲nner air jordan retro 13 wei脽 orangen</a> <a href="http://www.prohaarklinik.com/nike-air-pegasus-92-oranger-bleu-chaussuresq">nike air pegasus 92 oranger bleu</a> <a href="http://www.bonfanticare.com/mujeres-nike-blazer-blanco-amarillo-zapatosl">mujeres nike blazer blanco amarillo</a> <a href="http://www.antoniopagni.com/air-jordan-cp3-mintgr%C3%B8n-lilla-skoj">air jordan cp3 mintgr酶n lilla</a> <a href="http://www.wcshosting.com/kvinners-nike-air-max-zero-r%C3%B8d-gr%C3%A5-obuvi">kvinners nike air max zero r酶d gr氓</a> <a href="http://www.biddingstream.com/mujeres-nike-roshe-run-slip-p%C3%BArpura-oro-zapatosp">mujeres nike roshe run slip p煤rpura oro</a>
otuzbircek http://www.otuzbircek.com/
minnfluencer
 minnfluencer 2019-03-18 09:10回复
#120
<a href="http://www.clumsford.com/nfl-keelan-cole-black-84-jacksonville-jaguars-nike-backer-pullover-hoodie-nfls">nfl keelan cole black 84 jacksonville jaguars nike backer pullover hoodie</a> <a href="http://www.mjchronicles.com/hommes-nike-dunk-rose-bleu-scarpeg">hommes nike dunk rose bleu</a> <a href="http://www.moviezluv.com/nike-free-run-3-5.0-oransje-r%C3%B8d-obuvd">nike free run 3 5.0 oransje r酶d</a> <a href="http://www.oregoncuisine.com/nike-free-5.0-tr-fit-4-bleu-scarpea">nike free 5.0 tr fit 4 bleu</a> <a href="http://www.perokokbijak.com/nike-roshe-yeezy-boost-arancia-oro-schuhec">nike roshe yeezy boost arancia oro</a> <a href="http://www.primehostinc.com/nike-george-fant-jersey-74-nfl-seattle-seahawks-long-sleeve-t-shirt-womens-backer-navy-blue-nflr">nike george fant jersey 74 nfl seattle seahawks long sleeve t shirt womens backer navy blue</a>
minnfluencer http://www.minnfluencer.com/
trancelater
 trancelater 2019-03-17 19:00回复
#119
<a href="http://www.castalresources.net/nike-air-max-95-jacquard-rojo-negro-obuvf">nike air max 95 jacquard rojo negro</a> <a href="http://www.cattivacosmetics.net/nike-blazer-vintage-femminile-kurpese">nike blazer vintage femminile</a> <a href="http://www.causses.net/nike-air-max-thea-premium-cargo-kaki-light-ash-vert-kurpesf">nike air max thea premium cargo kaki light ash vert</a> <a href="http://www.cconmausa.net/nike-free-trainer-5.0-bl%C3%A5-lagoon-schuheg">nike free trainer 5.0 bl氓 lagoon</a> <a href="http://www.centralplainslifts.net/femmes-nike-zoom-pegasus-33-noir-rouge-scarpef">femmes nike zoom pegasus 33 noir rouge</a> <a href="http://www.chateaulalinde.net/hommes-nike-free-run-4.0-v3-tout-vert-kurpesa">hommes nike free run 4.0 v3 tout vert</a>
trancelater http://www.trancelater.net/
joalby
 joalby 2019-03-17 08:52回复
#118
<a href="http://www.thecarolinatc.com/bon-march%C3%A9-nike-shox-avenue-femmes-vert-sneakerc">bon march茅 nike shox avenue femmes vert</a> <a href="http://www.ventnorlife.com/hermes-small-shoulder-bag-hermesr">hermes small shoulder bag</a> <a href="http://www.edenwins.com/nike-air-force-1-puerto-rico-sko-shoesv">nike air force 1 puerto rico sko</a> <a href="http://www.viagradc.com/coach-diaper-bag-baby-blue-cross-coachc">coach diaper bag baby blue cross</a> <a href="http://www.duranerdogan.com/air-max-1-huarache-hybrid-shoesc">air max 1 huarache hybrid</a> <a href="http://www.newmadagasca.com/ladies-black-adidas-gazelle-skos">ladies black adidas gazelle</a>
joalby http://www.joalby.com/
attivopizza
 attivopizza 2019-03-17 03:45回复
#117
<a href="http://www.diplomabroad.com/nike-air-max-2016-white-shoesk">nike air max 2016 white</a> <a href="http://www.trechadental.com/r%C3%B8d-nike-darwin-skol">r酶d nike darwin</a> <a href="http://www.akhbarsanaye.com/nike-dunk-high-svart-kvinners-obuvk">nike dunk high svart kvinners</a> <a href="http://www.timxes.com/full-bianca-adidas-superstar-scarpei">full bianca adidas superstar</a> <a href="http://www.leadercheetah.com/nike-air-max-tn-hombres-rojo-zapatosh">nike air max tn hombres rojo</a> <a href="http://www.arealleader.com/2018-nike-air-max-air-max-2018-orange-sort-skok">2018 nike air max air max 2018 orange sort</a>
attivopizza http://www.attivopizza.com/
cobimusic
 cobimusic 2019-03-16 12:54回复
#116
<a href="http://www.elalmacenito.com/womens-nike-new-york-giants-10-eli-manning-limited-pink-rush-fashion-nfl-jersey-nfls">womens nike new york giants 10 eli manning limited pink rush fashion nfl jersey</a> <a href="http://www.gldstore.com/nike-hyperrev-2016-gr%C3%A5-hvid-scarpeg">nike hyperrev 2016 gr氓 hvid</a> <a href="http://www.globalgtprc.com/kobe-10-high-for-vendita-zillow-obuvc">kobe 10 high for vendita zillow</a> <a href="http://www.prototipes.com/hommes-nike-air-max-2017-noir-bleu-scarpea">hommes nike air max 2017 noir bleu</a> <a href="http://www.tasdizayni.com/lebron-12-alle-star-game-schuheb">lebron 12 alle star game</a> <a href="http://www.wsphotel.com/nike-womens-al-davis-limited-olivecamo-jersey-oakland-raiders-nfl-82-2017-salute-to-service-nflr">nike womens al davis limited olivecamo jersey oakland raiders nfl 82 2017 salute to service</a>
cobimusic http://www.cobimusic.com/
顶部留言底部
 00:00/00:00
我想和你虚度时光 - 花房姑娘(9)
  1. 我想和你虚度时光
  2. 花房姑娘
  3. 恋恋风尘
  4. 我喜爱一切不彻底的事物
  5. 我的心里是满的
  6. Long Way
  7. 给少年的歌
  8. 晴日共剪窗
  9. 天上的月你的脸