中文精品人妻一二三区,综合艹艹艹人妻,中精品一区二区

一、文件命名

文件名不得含有空格
文件名建議只使用小寫(xiě)字母，不使用大寫(xiě)字母。( 為了醒目，某些說(shuō)明文件的文件名，可以使用大寫(xiě)字母，比如README、LICENSE。 )
文件名包含多個(gè)單詞時(shí)，單詞之間建議使用半角的連詞線 ( - ) 分隔。
引入資源使用相對(duì)路徑，不要指定資源所帶的具體協(xié)議 ( http:,https: ) ，除非這兩者協(xié)議都不可用。

//不推薦：
<script src="http://cdn.com/foundation.min.js"></script>
// 推薦：
<script src="http://cdn.com/foundation.min.js"></script>

1.Js 文件命名規(guī)范

字母全部小寫(xiě)
不要帶空格
用破折號(hào)（-）連接單詞
庫(kù)文件可用逗點(diǎn)（.），用于體現(xiàn)版本或從屬關(guān)系
示例：
vue.min.js
vue-router.js
jquery.form.js
jquery-1.4.2.min.js

文件夾及文件命名
用簡(jiǎn)短有意義的英文或者拼音（不能出現(xiàn)中文命名）來(lái)命名。
①文件夾命名規(guī)則: 全部小寫(xiě)。例如(emotions, download, mail)。
②html,js,css文件命名規(guī)則: 第一個(gè)單詞首字母小寫(xiě),之后每個(gè)單詞首字母大寫(xiě),html文件后綴名統(tǒng)一為.htm。例如(index.htm, customizeCity.htm, register.js, dateSelect.js, base.css, mapApply.css)。 
③圖片命名規(guī)則: 第一個(gè)單詞首字母小寫(xiě),之后每個(gè)單詞首字母大寫(xiě),或者全部小寫(xiě),單詞間用下劃線連接。例如(btn_sign.gif, bgTipBox.png)。

二、HTML命名規(guī)范及格式規(guī)范

HTML代碼所有的標(biāo)簽名和屬性應(yīng)該都為小寫(xiě)，雖然HTML代碼是不區(qū)分大小寫(xiě)的，但是W3C的規(guī)范建議小寫(xiě)；屬性值應(yīng)該使用雙引號(hào)閉合。

<!--不推薦示例：標(biāo)簽名稱(chēng)大寫(xiě)，或者大小寫(xiě)混合；屬性值沒(méi)有用雙引號(hào)閉合-->
<IMG src=demo.jpg alt='test' />
推薦示例：
<!—推薦示例：標(biāo)簽名稱(chēng)小寫(xiě)；屬性值用雙引號(hào)閉合-->
<img src="demo.jpg" alt="test" />

給所有的關(guān)鍵元素定義元素的id和class，便于和CSS、JavaScript交互。因?yàn)閕d名稱(chēng)和class名稱(chēng)有可能作為檢索值用在JavaScript代碼中，所以命名一定要規(guī)范，這樣才能保證不會(huì)出現(xiàn)不必要的重復(fù)而導(dǎo)致Bug的產(chǎn)生。
推薦的做法是根據(jù)語(yǔ)義和DOM樹(shù)的層級(jí)關(guān)系來(lái)定義合適的名稱(chēng)，名稱(chēng)中全部使用小寫(xiě)，id名稱(chēng)中的關(guān)鍵詞用下劃線（_）連接，class的關(guān)鍵詞用中劃線（–）連接，這樣可以最大限度地保證命名的不重復(fù)。

<!--不推薦示例：命名簡(jiǎn)單隨意，很難保證命名不重復(fù)-->
<div id="Reader">
   <div id="introduce" class="Introduce ">
      …
   </div>
</div>
<!--推薦示例：根據(jù)語(yǔ)義以及上下層級(jí)關(guān)系定義名稱(chēng)-->
<div id="reader">
   <div id="reader_introduce" class="reader-introduce">
      …
   </div>
</div>

如果class名稱(chēng)僅作為JavaScript調(diào)用的“鉤子”，則可在名稱(chēng)中添加“js”前綴。
示例代碼：

<!--class名稱(chēng)僅作為JavaScript調(diào)用的"鉤子"，可在名稱(chēng)中添加"js"前綴-->
<ul id="js_reader_menu">
   <li class="menu-toc js-active">Toc</li>
   <li class="menu-store js-active">Store</li>
   <li class="menu-library">Library</li>
   <li class="menu-news">News</li>
</ul>

HTML代碼的層級(jí)縮進(jìn)為4個(gè)空格。如果元素包含子元素，則此元素對(duì)應(yīng)的起始標(biāo)簽和閉合標(biāo)簽分別單獨(dú)占用一行。

<!--不推薦示例：標(biāo)簽樹(shù)形層級(jí)之間沒(méi)有縮進(jìn)或者縮進(jìn)混亂-->
<ul>
<li>item1</li><li>item2</li>
<li>item3</li><li>item4</li></ul>
推薦示例：
<!--推薦示例：利用縮進(jìn)體現(xiàn)元素的層級(jí)關(guān)系-->
<ul>
   <li>item1</li>
   <li>item2</li>
   <li>item3</li>
   <li>item4</li>
</ul>

給HTML代碼添加必要的注釋。頁(yè)面HTML代碼的注釋不宜過(guò)多，添加的原則是在保證代碼維護(hù)性的基礎(chǔ)上盡量讓HTML代碼簡(jiǎn)潔?；谶@樣的原則，可以在頁(yè)面的公共部分（如頁(yè)面的頭部、尾部以及側(cè)邊欄等）、頁(yè)面經(jīng)常變化的部分（如廣告欄）以及需要后端代碼注入的部分添加注釋。注釋添加的位置在要注釋的代碼上部并單獨(dú)占用一行，不要在代碼行的后面直接添加。
示例代碼：

<body>
   <!--main header-->
   <div id="reader_header">
      ...
   </div>
    <!--main content-->
   <div id="reader_content">
     ...
      <!--動(dòng)態(tài)綁定列表: toc-->
     <ul id="reader_content_toc">
      </ul>
   </div>   
    <!--main footer-->
   <div id="reader_footer">
      ...
   </div>
</body>

三、CSS命名規(guī)范及格式規(guī)范

推薦的CSS類(lèi)的命名規(guī)則和元素的id命名規(guī)則相似，只是組成類(lèi)名稱(chēng)的關(guān)鍵字的連接符為中劃線
示例代碼：

.reader-content-title {
   ...
}

為了避免class命名的重復(fù)，命名時(shí)取父元素的class名作為前綴。

/* 父元素的樣式聲明 */
.reader-content {
   ...
}
/* 子元素的class名稱(chēng)以父元素中的class名稱(chēng)作為前綴 */
.reader-content-body {
   ...
}

在CSS樣式定義中，左大括號(hào)放置在選擇器的同一行，并和選擇器之間添加一個(gè)空格分隔，在保證可讀性的基礎(chǔ)上縮短代碼的行數(shù)；在樣式聲明中，屬性名稱(chēng)和值之間用一個(gè)空格分隔，提高代碼可讀性。

/* 不推薦示例：CSS樣式定義中的左大括號(hào)單獨(dú)占一行；樣式聲明沒(méi)有縮進(jìn)或縮進(jìn)混亂；屬性名稱(chēng)和值之間沒(méi)有用空格分隔*/
.reader-content-title 
{
background:#FFF;
   ...
}
/* 推薦示例：CSS樣式定義中的左大括號(hào)放置在選擇器的同一行；樣式聲明中屬性名稱(chēng)和值之間用一個(gè)空格分隔*/
.reader-content-title {
   background: #FFF;
   ...
}

多個(gè)選擇器具有相同的樣式聲明時(shí)，每個(gè)選擇器應(yīng)該單獨(dú)占一行，便于閱讀和維護(hù)。
示例：

//不推薦示例：多個(gè)選擇器具有相同的樣式聲明時(shí)，所有選擇器放置于同一行/
h1,h2,h3 {
font-weight: normal;
line-height: 1.2;
}
//推薦示例：多個(gè)選擇器具有相同的樣式聲明時(shí)，每個(gè)選擇器應(yīng)該單獨(dú)占一行/
h1,
h2,
h3 {
font-weight: normal;
line-height: 1.2;
}

樣式聲明的順序按字母順序排列，不考慮瀏覽器前綴。單純靠手寫(xiě)代碼并保證樣式聲明按照一定的順序是不現(xiàn)實(shí)的。建議使用一些CSS美化工具做樣式聲明排序的工作。
示例代碼：

/樣式聲明的順序以字母序排列/
.reader-content-title {
background: #FFF;
border: 1px solid;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
color: black;
text-align: center;
}

樣式定義按照模塊來(lái)分組，相同模塊的樣式定義放在一起，不同模塊的定義之間用一個(gè)空行分割。
示例代碼：

// reader header/
.reader-header-title {

...
}
.reader-header-introduce {
...
}

//reader footer/
.reader-footer-copyright{

...
}
.reader-footer-links {

...
}

CSS中的注釋非常重要，能對(duì)CSS樣式起到解釋和說(shuō)明的作用，提高了CSS代碼的可讀性。有些開(kāi)發(fā)者可能擔(dān)心添加過(guò)多的注釋會(huì)讓CSS文件行數(shù)增多，其實(shí)不用擔(dān)心，可以在發(fā)布網(wǎng)站的時(shí)候?qū)SS文件進(jìn)行壓縮，這個(gè)過(guò)程中會(huì)去掉所有的注釋。在CSS樣式文件中添加注釋主要有兩種類(lèi)型：文件頭部的文件信息注釋和正文中的解釋說(shuō)明性注釋。文件信息一般包括文件版本、版權(quán)信息以及作者等；解釋說(shuō)明性的注釋有給模塊的注釋和單獨(dú)給選擇器的注釋?zhuān)K的注釋則需要添加注釋表明模塊樣式定義的開(kāi)始和結(jié)束，CSS選擇器的注釋需要添加在選擇器的上一行，而不是和選擇器相同一行。
示例代碼：

/ 注釋規(guī)范說(shuō)明：文件頭部的文件信息注釋 /
/*!

reader content v1.0
*
Copyright 2012
Dual licensed under the MIT or GPL Version 2 licenses.
*
Designed and built by dangjian
*/
/ 注釋規(guī)范說(shuō)明：模塊樣式定義的開(kāi)始和結(jié)束 /
/ Content containers start /
/ 注釋規(guī)范說(shuō)明：注釋需要添加在選擇器的上一行，而不是和選擇器相同一行 /
/ content title /
.reader-content-title {
...
}
...
/ Content containers end /

四、JavaScript命名規(guī)范及格式規(guī)范

JavaScript局部變量命名采用首字母小寫(xiě)，其他單詞首字母大寫(xiě)的方式。命名時(shí)建議采用有意義的單詞命名，不推薦使用標(biāo)識(shí)變量類(lèi)型的前綴，如int、str、obj等。不推薦使用單詞縮寫(xiě)命名，變量以縮寫(xiě)命名則降低了其可讀性。如果認(rèn)為變量名太長(zhǎng)而使JavaScript腳本文件變大，則可以在發(fā)布階段通過(guò)JavaScript腳本混淆壓縮等手段來(lái)縮小文件。
不推薦示例：

// 不推薦示例：變量命名首字母大寫(xiě)
var ReaderBookmark = 'bookmark';
// 不推薦示例：變量命名意義不明確
var object = {};
// 不推薦示例：變量命名以類(lèi)型作為前綴
var strName = 'Note';
// 不推薦示例：變量命名使用語(yǔ)義不明確的縮寫(xiě)
var newNT = function(){

…
}

推薦示例：
// 推薦示例：變量命名語(yǔ)義明確
var bookmarkDefaultTitle = 'Untitled Bookmark';

現(xiàn)在流行JavaScript的面向?qū)ο缶幊蹋敲淳蜁?huì)有公有或私有接口的概念。原則上公有接口的命名為首字母大寫(xiě)，私有接口的命名為首字母小寫(xiě)。
示例代碼：

Reader.Content = function(){
// 私有變量
var info, title;
// 私有方法
var getContent = function(){

  ...
};

return {

  // 公有方法
  SetTitle: function(contentTitle){
     title = contentTitle;
  },
  // 公有屬性
  ContentInfo: info
}
}();

jQuery框架在項(xiàng)目中使用廣泛，推薦給jQuery類(lèi)型變量添加“$”作為前綴。
示例代碼：
var $tocTitle = $('.reader-toc-title');

左大括號(hào)應(yīng)該在行的結(jié)束位置，而不應(yīng)該單獨(dú)一行，因?yàn)檫@樣增加了不必要的行數(shù)。應(yīng)該一直使用大括號(hào)括起邏輯塊，即使邏輯只有一行，也應(yīng)該用大括號(hào)括起來(lái)，以便提高代碼的可讀性和可維護(hù)性。
示例代碼：

//左大括號(hào)應(yīng)該在行的結(jié)束位置，而不應(yīng)該單獨(dú)一行
for (var i=0; i<100; i++) {
doSomething(i); 
}

//應(yīng)該一直使用大括號(hào)括起邏輯塊，即使邏輯只有一行

var isFound = false;
if (statement) {
isFound = true;
}

JavaScript中可以用單引號(hào)或者雙引號(hào)定義字符串，但是因?yàn)榱?xí)慣于定義HTML的元素屬性值時(shí)使用雙引號(hào)，而JavaScript中又經(jīng)常包含HTML代碼，所以字符串定義使用單引號(hào)也可方便于在字符串內(nèi)部包含含有雙引號(hào)的HTML代碼。
示例代碼：

var content = '…';

空格的作用是提高代碼的可讀性，在函數(shù)參數(shù)的逗號(hào)后面使用一個(gè)空格，在操作符前后各使用一個(gè)空格。另外，使用一個(gè)空行來(lái)區(qū)分業(yè)務(wù)邏輯段。
示例代碼：

doSomething(myChar, 0, 1);

while (x === y){
...
}

JavaScript語(yǔ)句結(jié)束時(shí)應(yīng)該添加一個(gè)分號(hào)。語(yǔ)句結(jié)束是否添加分號(hào)這個(gè)話題曾經(jīng)引起很大的討論，大名鼎鼎的Bootstrap框架中的JavaScript語(yǔ)句結(jié)束就沒(méi)有添加分號(hào)。著名的框架都不在語(yǔ)句行尾添加分號(hào)，這里有必要簡(jiǎn)單介紹一下在行尾推薦添加分號(hào)的理由。首先來(lái)看看JavaScript是如何看待分號(hào)的。JavaScript有自動(dòng)插入分號(hào)的算法，在沒(méi)有添加分號(hào)的JavaScript語(yǔ)句的結(jié)束處會(huì)自動(dòng)添加一個(gè)分號(hào)，但是如果語(yǔ)句的下一行以“[”、“（”、“+”、“-”、“/”開(kāi)頭則不會(huì)在此語(yǔ)句后面添加分號(hào)?？此坪侠淼脑O(shè)計(jì)，但其實(shí)如果應(yīng)用不慎就會(huì)導(dǎo)致一些莫名其妙的錯(cuò)誤，如下這個(gè)示例是由于自動(dòng)添加分號(hào)而導(dǎo)致的邏輯錯(cuò)誤。
錯(cuò)誤示例：

return
{
a + b
}

按照自動(dòng)添加分號(hào)的算法，會(huì)在return后面添加一個(gè)分號(hào)，代碼等價(jià)于：

// return 后面會(huì)添加一個(gè)分號(hào)
return ；
{
a + b
}

其結(jié)果自然會(huì)返回undefined，而不是期望的值。其實(shí)這個(gè)詭異的問(wèn)題可以通過(guò)規(guī)定左大括號(hào)必須放置在前一個(gè)語(yǔ)句結(jié)尾處的方式來(lái)解決。
上面的例子是在不想添加分號(hào)的地方被自動(dòng)添加了分號(hào)，而下面的例子則是因?yàn)闆](méi)有在該添加分號(hào)的地方添加分號(hào)而導(dǎo)致的邏輯錯(cuò)誤。
錯(cuò)誤示例：

var b = function(){
return function(){return 1}
}
var a = b
(function(){
...
})()

根據(jù)自動(dòng)添加分號(hào)的算法，“var a = b”這行語(yǔ)句的后一行代碼以左小括號(hào)開(kāi)頭，不會(huì)為這行語(yǔ)句自動(dòng)添加分號(hào)，此行代碼等價(jià)于：

var b = function(){
return function(){return 1}
}
var a = b(function(){
...
})()

這完全背離了代碼表達(dá)的初衷。當(dāng)然，可以給以“[”、“（”、“+”、“-”、“/”開(kāi)頭的語(yǔ)句前添加一個(gè)分號(hào)來(lái)避免出現(xiàn)這樣的邏輯錯(cuò)誤，但是這也是一種“丑陋”的方案。
JavaScript這種有缺陷的自動(dòng)添加分號(hào)的算法希望開(kāi)發(fā)者格外小心。開(kāi)發(fā)者明白這些缺陷則有助于在實(shí)際的開(kāi)發(fā)過(guò)程中避免犯錯(cuò)誤。盡管在語(yǔ)句結(jié)尾添加分號(hào)和不添加分號(hào)都會(huì)有一些問(wèn)題存在，但是考慮到大多數(shù)開(kāi)發(fā)者已有的習(xí)慣，還是建議給語(yǔ)句的結(jié)尾添加分號(hào)。
因?yàn)镴avaScript代碼在前端中是邏輯性最強(qiáng)的，所以需要添加足夠的注釋來(lái)保證代碼的可讀性。在JavaScript代碼中，如果注釋未占有多行，那么建議使用//，不推薦使用/**/。注釋?xiě)?yīng)該單獨(dú)占用一行，而不是寫(xiě)在和代碼相同一行的右邊。和CSS代碼的注釋規(guī)范相似，JavaScript代碼的注釋主要也是文件信息注釋和代碼邏輯注釋。
示例代碼

/ 文件頭部的文件信息注釋 /
/*!

reader content v1.0
*
Copyright 2012
Dual licensed under the MIT or GPL Version 2 licenses.
*
Designed and built by dangjian
*/
Reader.Content = (function(){
return {

 // reader初始化
 Init: function(){
    ...
  };
};
})();

五、圖片命名

1、圖片的名稱(chēng)分為頭尾兩部分，用下劃線隔開(kāi)，頭部分表示此圖片的大類(lèi)性質(zhì)，例如：廣告、標(biāo)志、菜單、按鈕等等

2 、常規(guī)命名

2.1 放置在頁(yè)面頂部的廣告、裝飾圖案等長(zhǎng)方形的圖片取名：banner

2.2 標(biāo)志性的圖片取名為：logo

2.3 在頁(yè)面位置不固定并且?guī)в墟溄拥男D片我們?nèi)∶篵utton

2.4 在頁(yè)面上某一個(gè)位置連續(xù)出現(xiàn)，性質(zhì)相同的鏈接欄目的圖片我們?nèi)∶簃enu

2.5 裝飾用的照片我們?nèi)∶簆ic

2.6 不帶鏈接表示標(biāo)題的圖片我們?nèi)∶簍itle

3 范例

banner_sohu.gif

banner_sina.gif

menu_aboutus.gif

menu_job.gif

title_news.gif

logo_police.gif

logo_national.gif

pic_people.jpg

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av

前端命名規(guī)范

前端命名規(guī)范

一、文件命名

1.Js 文件命名規(guī)范

二、HTML命名規(guī)范及格式規(guī)范

三、CSS命名規(guī)范及格式規(guī)范

四、JavaScript命名規(guī)范及格式規(guī)范

五、圖片命名

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九 欧美,1769亚洲,黄色成人av

前端命名規(guī)范

一、文件命名

1.Js 文件命名規(guī)范

二、HTML命名規(guī)范及格式規(guī)范

三、CSS命名規(guī)范及格式規(guī)范

四、JavaScript命名規(guī)范及格式規(guī)范

五、圖片命名

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av

一、文件命名

二、HTML命名規(guī)范及格式規(guī)范

五、圖片命名