溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
項目：用項目對應的英文單詞命名
文件及文件夾:
全部英文小寫字母，可以使用中線，不可出現其他字符，如login,my-order
調用 `/lib`里面的文件需包含版本號，壓縮文件需包含`min`關鍵詞，其他插件則可不包含，如：`/lib/jquery.1.9.1.js`
文本文件： `.xxx` UTF-8_\(無BOM\)_ 編碼
圖片文件： `.png` _(PNG-24)_ `.jpg` _(壓縮率8-12)_
動態圖片： `.gif`
壓縮文件： `.tar.gz` `.zip``.rar`
所有的命名用小寫的英文單詞
不使用簡單的方位詞直接命名，如"left"，"bottom"
不縮寫單詞，除非一看就明白的單詞
長名稱或詞組可以使用下劃線作為連接符
避免選擇器嵌套層級過多，少于3級
不要隨意使用id，id應該按需使用，而不能濫用
使用CSS縮寫屬性 ，比如padding:0 10px 5px 5px等等，這樣精簡代碼同時又能提高用戶的閱讀體驗。
命名參考如下：
| CSS樣式命名 | 說明 |
|---|---|
| 網頁公共命名 | |
| wrapper | 頁面外圍控制整體布局寬度 |
| container或content | 容器,用于最外層 |
| layout | 布局 |
| head, header | 頁頭部分 |
| foot, footer | 頁腳部分 |
| nav | 主導航 |
| sub_nav | 二級導航 |
| menu | 菜單 |
| sub_menu | 子菜單 |
| side_bar | 側欄 |
| sidebar_l, sidebar_r | 左邊欄或右邊欄 |
| main | 頁面主體 |
| tag | 標簽 |
| msg message | 提示信息 |
| tips | 小技巧 |
| vote | 投票 |
| friendlink | 友情鏈接 |
| title | 標題 |
| summary | 摘要 |
| login_bar | 登錄條 |
| search_input | 搜索輸入框 |
| hot | 熱門熱點 |
| search | 搜索 |
| search_output | 搜索輸出和搜索結果相似 |
| search_bar | 搜索條 |
| search_results | 搜索結果 |
| copyright | 版權信息 |
| branding | 商標 |
| logo | 網站LOGO標志 |
| site_info | 網站信息 |
| site_info_legal | 法律聲明 |
| site_info_credits | 信譽 |
| join_us | 加入我們 |
| partner | 合作伙伴 |
| service | 服務 |
| regsiter | 注冊 |
| arr arrow | 箭頭 |
| guild | 指南 |
| site_map | 網站地圖 |
| list | 列表 |
| home_page | 首頁 |
| sub_page | 二級頁面子頁面 |
| tool, toolbar | 工具條 |
| drop | 下拉 |
| dorp_menu | 下拉菜單 |
| status | 狀態 |
| scroll | 滾動 |
| tab | 標簽頁 |
| left right center | 居左、中、右 |
| news | 新聞 |
| download | 下載 |
| banner | 廣告條(頂部廣告條) |
向"無ID，無層級，無標簽"準則靠攏，可有效提高重用性，減小文件大小，提升渲染效率
用來區分頁面的注釋，如/******************************************產品中心****************************************/
模塊的注釋,如/*首頁導航欄*/
Positioning（定位，如position，top，z-index）
Box model（盒模型，如display，box-sizing，width，border）
Typographic（排版，如font，line-height，text-align）
Visual（視覺，如background，color,opacity）
Other（其他，如cursor）
由于定位（positioning）可以從正常的文檔流中移除元素，并且還能覆蓋盒模型（box model）相關的樣式，因此排在首位。盒模型決定了組件的尺寸和位置，因此排在第二位。 其他屬性只是影響組件的內部（inside）或者是不影響前兩組屬性，因此排在后面。
使用不換行方式書寫，增加書寫速度
.box{background: none repeat scroll 0 0 transparent;bottom: 11px;position: relative;width: 22px;z-index: 33;}px像素（Pixel），相對長度單位，像素px是相對于顯示器屏幕分辨率而言的。
em是相對長度單位。相對于當前對象內文本的字體尺寸。如當前對行內文本的字體尺寸未被人為設置，則相對于瀏覽器的默認字體尺寸。
rem也是相對長度單位，但相對的只是HTML根元素。
vw代表視窗(Viewport)的寬度為1%，如果視窗寬度為1000px，那么50vw = 500px
vh代表窗口高度的百分，如果視窗高度為800px，那么50vh = 400px
公司項目使用時注意事項：現有項目都是使用px作為單位，現推薦使用rem,vw,vh作為單位
3.1.1 JS 變量命名
命名方法：小駝峰式命名
命名規范：前綴應當是名詞。(函數的名字前綴為動詞，以此區分變量和函數)
命名建議：盡量在變量名字中體現所屬類型，如:length、count等表示數字類型；而包含name、title表示為字符串類型。
示例
// 好的命名方式var maxCount = 10;var tableTitle = 'LoginTable';// 不好的命名方式var setCount = 10;var getTitle = 'LoginTable';
3.1.2 JS 函數命名
命名方法：小駝峰式命名法
命名規范：前綴應當為動詞
命名建議：可使用常見動詞約定
| 動詞 | 含義 | 返回值 |
| can | 判斷是否可執行某個動作(權限) | 函數返回一個布爾值。true：可執行；false：不可執行 |
| has | 判斷是否含有某個值 | 函數返回一個布爾值。true：含有此值；false：不含有此值 |
| is | 判斷是否為某個值 | 函數返回一個布爾值。true：為某個值；false：不為某個值 |
| get | 獲取某個值 | 函數返回一個非布爾值 |
| set | 設置某個值 | 無返回值、返回是否設置成功或者返回鏈式對象 |
| load | 加載某些數據 | 無返回值或者返回是否加載完成的結果 |
3.1.3 JS 常量命名
命名方法：名稱全部大寫
命名規范：使用大寫字母和下劃線來組合命名，下劃線用以分割單詞
示例
var MAX_COUNT = 10;var URL = 'http://www.runoob.com';
3.1.4 JS 文件命名
使用短線（-）或句點（.）作為分隔符號，推薦使用句點，最好使用小寫英文字符，不要使用其他符號和擴展字符，如 jQuery UI 1.9.0 的源文件可命名為"jquery-ui-1.9.0.js"
使用 .js 擴展名，這個擴展名的兼容性最好。其實任何擴展名都可以，只要是 text 類型、編碼正確即可
用句點分隔表示名稱中的從屬關系，范圍大的在前，如jQuery 的表單插件 Form既可以命名為jquery.form.js
3.2 js 注釋格式
使用多行注釋,以/*開頭，*/結尾
3.3 js 注意事項
書寫格式
JS 換行縮進：采用tab（打散為4個空格）
結束行需添加分號`;`
性能
盡量選用局部變量而不是全局變量
盡量使用鏈式寫法
盡量減少DOM調用
將js腳本放到頁面底部
使用jquery的data來存取數據，減少對dom的操作
使用on方法綁定事件，這是jquery的推薦使用
選擇器的選擇：盡量不用標簽選擇器，能用ID選擇器的就不用class選擇器
盡量減少標簽層級
雙標簽必須閉合，單標簽用斜線閉合
HTML第一行統一使用HTML5標準<!DOCTYPE html>
一律統一標簽結尾斜杠的書寫形式：`<br />` `<hr />` 注意之間空格
避免使用已過時標簽，如：`<font>` `<frame>` `<s>`
`<img>`標簽默認缺省格式：`<img src="#" alt="缺省時文字" />`
`<a>`標簽缺省格式：`<a href="#" title="鏈接名稱">xxx</>` 注：`target="_blank"` 根據需求決定
style、link、script可省略type屬性，因為 text/css 和 text/javascript 分別是他們的默認值
<!--內容--><div class="content"> <p>content</p></div>
手機端的自適應布局盡量采用彈性布局，而不是百分比
`css`文件都 置于頭部
HTML換行縮進：采用 tab空格
其他效果`js`及`統計代碼` 文件置于尾部
手機端的頁面都按750px來做，顯示效果按375px
圖片大小：切圖時使用web格式保存，減小圖片大小
圖片尺寸：一律采用整數，如20X20，50X50
圖片合并：小圖片一律要合并，并保存對應的psd文件，以便后期修改
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
