<noframes id="5hjpd"><progress id="5hjpd"><form id="5hjpd"></form></progress>

    <noframes id="5hjpd">

    <span id="5hjpd"><progress id="5hjpd"><progress id="5hjpd"></progress></progress></span>
      <noframes id="5hjpd">
      <ins id="5hjpd"><sub id="5hjpd"><rp id="5hjpd"></rp></sub></ins>
      <del id="5hjpd"><big id="5hjpd"></big></del>
      <track id="5hjpd"></track>

      愛思資源網前端編碼規范 1.0

      本規范共分為三部分,前端通用編碼規范 css編碼規范 html編碼規范 javascript編碼規范

      1. 前端通用編碼規范

        1. 文件編碼

          前端開發涉及的所文件統一使用utf-8編碼

        2. id 和 class 命名約定

          1. 議少用id,必須保證id唯一性
          2. id 和 class 的命名總規則為: 內容優先,表現為輔. 首先根據內容來命名, 比如 main-nav. 如果根據內容找不到合適的命名, 可以再結合表現來定, 比如 skin-blue, present-tab, col-main.
          3. id 和 class 名稱一律小寫, 多個單詞用連字符連接, 比如 recommend-presents.
          4. id 和 class 名稱中只能出現小寫的 26 個英文字母、數字和連字符(-), 任何其它字符都嚴禁出現.
          5. id 和 class 盡量用英文單詞命名.
          6. 在不影響語義的情況下, id 和 class 名稱中可以適當采用英文單詞縮寫, 比如 col, nav, hd, bd, ft 等, 但切忌自造縮寫.
          7. id 和 class 名稱中的第一個詞必須是單詞全拼或語義非常清晰的單詞縮寫, 比如 present, col.
      2. css編碼規范

        1. 申明及注釋

          文件頭部必須加上文件申明信息,必須包括文件描述、作者、最后更新(更新人+時間)

          /*
          
          *@Description: 頭部公用樣式
          
          *@Author:      Aseoe
          
          *@Update:      Aseoe(2015-03-01 17:22)
          
          */
        2. Hack 規則

          通用 Hack

          .all-IE{property:value\9;}
          
          :root .IE-9{property:value\0/;}
          
          .gte-IE-8{property:value\0;}
          
          .lte-IE-7{*property:value;}
          
          .IE-7{+property:value;}
          
          .IE-6{_property:value;}
          
          .not-IE{property//:value;}
          
          @-moz-document url-prefix() { .firefox{property:value;} }
          
          @media all and (-webkit-min-device-pixel-ratio:0) { .webkit{property:value;} }
          
          @media all and (-webkit-min-device-pixel-ratio:10000),not all and (-webkit-min-device-pixel-ratio:0) { .opera{property:value;} }
          
          @media screen and (max-device-width: 480px) { .iphone-or-mobile-s-webkit{property:value;} }
        3. CSS文件

          • 文件一律通過 link 鏈入 (NOT @import)
          • 當只是單個頁面使用時,才寫在 <head> 的 <style> 中
        4. 書寫順序

          //顯示屬性
          
          * display
          
          * list-style
          
          * position
          
          * float
          
          * clear
          
          //自身屬性
          
          * width
          
          * height
          
          * margin
          
          * padding
          
          * border
          
          * background
          
          //文本屬性
          
          * color
          
          * font
          
          * text-decoration
          
          * text-align
          
          * vertical-align
          
          * white-space
          
          * other text
          
          * content
          
          
          
          
          
          display || visibility
          
          list-style : list-style-type || list-style-position || list-style-image
          
          position
          
          top || right || bottom || left
          
          z-index
          
          float
          
          clear
          
          
          
          width
          
          max-width || min-width
          
          height
          
          max-height || min-height
          
          overflow || clip
          
          margin : margin-top || margin-right || margin-bottom || margin-left
          
          padding : padding-top || padding-right || padding-bottom || padding-left
          
          outline : outline-color || outline-style || outline-width
          
          border
          
          background : background-color || background-image || background-repeat || background-attachment || background-position
          
          
          
          color
          
          font : font-style || font-variant || font-weight || font-size || line-height || font-family
          
          font : caption | icon | menu | message-box | small-caption | status-bar
          
          text-decoration
          
          text-align
          
          vertical-align
          
          white-space
          
          text-indent
          
          text-overflow
          
          line-height
          
          content
          
          cursor
          
          
          
          zoom
          
          
        5. 書寫格式

        6. 命名規范

          • 所有g-開頭class為全局級樣式,全部放在base-reset.css文件中,其他地方不允許出現以g-開頭的class
          • 所有m-開頭class為模塊樣式,每個模塊應建立單獨的文件夾和css,并有demo,
            文件夾結構參考前端目錄構架,其他地方不允許出現以g-開頭的class
            模塊下面再取 xxx-hd(頭部),xxx-bd(內容),xxx-ft(尾部)命名
          • on, active, first, last, list, item, col, nav, hd, bd, ft…是公共級別,不準單獨定義其樣式
        7. 層級(z-index)關系

          • 1-99 普通頁面內容
          • 100-299 預留
          • 300-399 區塊展開、彈出,像隱藏菜單、二級導航之類
          • 400-599 預留
          • 600-799 頁面彈窗、氣泡
          • 層級應盡量就低,為10的整數倍,最高層級不超過799
        8. 其他

          • 不要在CSS中使用 "*" 選擇符
          • 不要直接修改標簽的樣式
          • 禁止使用expression表達式
          • 禁止濫用!important
          • 在保證選擇器準確的情況下盡量簡化選擇器 (盡量不超過4級,最多4級),不寫多余的選擇器(如class/id前的標簽選擇器、li上一級的的ul/ol、dt/dd上一級的dl等,在保證準確的前提下能去掉的都去掉)
          • 字體粗細采用具體數值,粗體bold寫為700,正常normal寫為400
          • 顏色用#f60,能簡寫的顏色簡寫
          • 能縮寫的盡量縮寫,如margin、padding、font(font-style font-variant font-weight font-size/line-height font-family)、border(border-width border-style border-color)、background(background-color background-image background-repeat background-attachment background-position)等
          • 去掉0后面的單位
      3. html編碼規范

        1. DOCTYPE

          頁面文檔類型統一使用HTML5 DOCTYPE. 代碼如下:

          <!doctype html>
        2. 編碼

          聲明方法遵循HTML5的規范. 代碼如下:

          <meta charset="utf-8" />
        3. 語義化

          使用符合語義的標簽書寫 HTML 文檔, 選擇恰當的元素表達所需的含義

          1. 結構性元素

            • p?表示段落. 只能包含內聯元素, 不能包含塊級元素;
            • li?本身無特殊含義, 可用于布局. 幾乎可以包含任何元素;
            • br?表示換行符;
            • hr?表示水平分割線;
            • h1-h6?表示標題. 其中 h1 用于表示當前頁面最重要的內容的標題;
            • blockquote?表示引用, 可以包含多個段落. 請勿純粹為了縮進而使用 blockquote, 大部分瀏覽器默認將 blockquote 渲染為帶有左右縮進;
            • pre?表示一段格式化好的文本;
          2. 頭部元素

            • title?每個頁面必須有且僅有一個 title 元素;
            • base?可用場景:首頁、頻道等大部分鏈接都為新窗口打開的頁面;
            • link?link 用于引入 css 資源時, 可省去 media(默認為all) 和 type(默認為text/css) 屬性;
            • style?type 默認為 text/css, 可以省去;
            • script?type 屬性可以省去; 不贊成使用lang屬性; 不要使用古老的<!– //–>這種hack腳本, 它用于阻止第一代瀏覽器(Netscape 1和Mosaic)將腳本顯示成文字;
            • noscript?在用戶代理不支持 JavaScript 的情況下提供說明;
          3. 文本元素

            • a?a 存在 href 屬性時表示鏈接, 無 href 屬性但有 name 屬性表示錨點;
            • em,strong?em 表示句意強調, 加與不加會引起語義變化, 可用于表示不同的心情或語調; strong 表示重要性強調, 可用于局部或全局, strong強調的是重要性, 不會改變句意;
            • abbr?表示縮寫;
            • sub,sup?主要用于數學和化學公式, sup還可用于腳注;
            • span?本身無特殊含義;
            • ins,del?分別表示從文檔中增加(插入)和刪除
          4. 媒體元素

            • img?請勿將img元素作為定位布局的工具, 不要用他顯示空白圖片; 必要時給img元素增加alt屬性;
            • object?可以用來插入Flash;
          5. 列表元素

            • dl?表示關聯列表, dd是對dt的解釋; dt和dd的對應關系比較隨意:一個dt對應多個dd、多個dt對應一個dd、多個dt對應多個dd, 都合法; 可用于名詞/單詞解釋、日程列表、站點目錄;
            • ul?表示無序列表;
            • ol?表示有序列表, 可用于排行榜等;
            • li?表示列表項, 必須是ul/ol的子元素;
          6. 表單元素

            • 推薦使用 button 代替 input, 但必須聲明 type;
            • 推薦使用 fieldset, legend 組織表單
            • 表單元素的 name 不能設定為 action, enctype, method, novalidate, target, submit 會導致表單提交混亂
        4. 大小寫,屬性值

          元素的標簽和屬性名必須小寫, 屬性值必須加雙引號

        5. html模板

          <!doctype html>
          <html>
          <head>
          <meta charset="utf-8" />
          <title>csc example page</title>
          <link rel="stylesheet" href="css_example_url" />
          <script src="js_example_url"></script>
          </head>
          <body>
          <div class="header">
          頁頭
          </div>
          <div class="content">
          主體
          </div>
          <div class="footer">
          頁尾
          </div>
          <script>
          // 你的代碼
          </script>
          </body>
          </html>
      4. javascript編碼規范

        JavaScript程序應獨立保存在后綴名為.js的文件中。

        js代碼不應該被包含在HTML文件中,除非這是段特定只屬于此部分的代碼。在HTML中的js代碼會明顯增加文件大小,而且也不能對其進行緩存和壓縮。

        filename.js應盡量放到body的后面。這樣可以減少因為載入script而造成其他頁面內容載入也被延遲的問題。也沒有必要使用 language或者type屬性。MIME類型是由服務器而非scripttag來決定的。

        1. 注釋

          • 每個js文件的文件頭都必須包含@author, 建議加上@version

            /**
            
            * jQuery JavaScript version 1.0
            
            * author Aseoe
            
            * Date: 2015.03.01 10:34
            
            */
          • 私有函數,建議添加 @ignore 讓文檔輸出時可以忽略這段注釋

          • 函數內部調用其他的函數,建議加上@see Function 來對上下文做索引

          • 每個帶參數的函數必須包含 @param

            /**
            
            *基類 Shape
            
            * @constructor
            
            * @base Shape
            
            * @param args
            
            * @return  returnValue
            
            */
            
            function Circle(args){
            
            // do some thing 
            
            return  returnValue
            
            }
            
            
          • 構造函數 必須加上 @constructor(同上)

          • 每個有返回值的函數必須包含 @return(同上)

        2. 標識符命名

          在js中,標識符的命名規則是:由包含字母、數字和下劃線組成,且第一個字符必須是字母開頭或下劃線或$(一般不要用$)符。不能與 JavaScript 保留字(Key Words,凡是可以用來做 JavaScript 命令的字都是保留字)重復;在js中變量是區分大小寫的;命名規則參考下表:

          結構 規則 樣例
          構造函數 駝峰式 ModuleClass()
          公有方法 混合式 getPosition()
          公有變量 混合式 frameStyle
          常量 大寫式 DEFAULT_FRAME_LAYOUT
          私有方法 混合 _mixedCase()
          私有變量 混合 _mixedCase
          方法(method)參數 混合 _mixedCase, mixedCase
          本地(local)變量 混合 _mixedCase, mixedCase
        3. 縮進

          愛思資源網提倡4 個空格。這是因為直到現在還沒有統一的標準來定義 TAB 鍵所代替的空白大小,有些編輯器解析為 4 個空格大小,有些則解析為 8 個。因而用不同的編輯器查看代碼,可能造成格式混亂。當然 TAB 簡單易用,為解決這問題,建議在設置開發環境時,將編輯器里的 TAB 快捷鍵重新設置為 4 個空格。據了解 Eclipse, Vi, Nodepad++,Editplus, UltraEdit 等流行的編輯器,均提供了此功能。

          • 變量聲明:

            多個變量聲明時, 適當換行表示;參照 var 關鍵字, 縮進一層次
          • 函數參數:

            函數參數寫在同一行上;傳遞匿名函數時, 函數體應從調用該函數的左邊開始縮進
          • 數組和對象初始化時:

            如果初始值不是很長, 盡量保持寫在單行上;初始值占用多行時, 縮進一層次;對象中, 比較長的變量/數值, 不要以冒號對齊
          • 二元/三元操作符:

            操作符始終跟隨前行;實在需要縮進時, 按照上述縮進風格
        4. 空格

          • 數值操作符(如, +/-/*/% 等)兩邊留空
          • 賦值操作符/等價判斷符兩邊留一空格
          • for 循環條件中, 分號后留一空格
            for(var i = 0 ; i < 9 ; i++){
            
              statements;
            
            }
            
            
          • 變量聲明語句, 數組值, 對象值及函數參數值中的逗號后留一空格
          • 空行不要有空格
          • 行尾不要有空格
          • 逗號和冒號后一定要跟空格
          • 點號前后不要出現空格
          • 空對象和數組不需要填入空格
          • 函數名末尾和左括號之間不要出現空格
        5. 換行

          行長超過右邊界,根據以下原則斷行:
          • 逗號之后換行
          • 分隔符之前換行
          • 盡可能在高一級斷行,不要低一級斷行
          • 新行和上一行同一級別的表達式的開始處對齊
          • 如果按上述規則,導致令人混淆的代碼,或新行超越了右邊界,則縮進8個字符即可
        6. 語句

          Javascript程序是由若干語句組成的,語句是編寫程序的指令。Javascript提供了完整的基本編程語句
          • 賦值語句
            var str = "value1";  //聲明變量并賦值
            
            var obj = new Object();  //創建一個對象的實例
            
            var fn=function fname(){statements;} //命名表達式
            
            var person={name:"admin",age:26}; //字面量聲明方式
            
            
          • if, if-else, if else-if else 語句
            if (condition) {
            
                statements;
            
            }
            
            
            
            if (condition) {
            
                statements;
            
            } else {
            
                statements;
            
            }
            
            
            
            if (condition) {
            
                statements;
            
            } else if (condition) {
            
                statements;
            
            } else {
            
                statements;
            
            }
            
            
          • switch選擇語句
            switch (condition) {
            
            case ABC:
            
                statements;
            
                /* falls through */
            
            case DEF:
            
                statements;
            
                break;
            
            case XYZ:
            
                statements;
            
                break;
            
            default:
            
                statements;
            
                break;
            
            }
            
            
            
            
          • while循環語句
            while (condition) {
            
                statements;
            
                update;   // 更新循環變量
            
            }
          • for循環語句
            for(var i = 0 ; i < 9 ; i++){
            
              statements;
            
            }
            
            
          • do while循環語句
            do {
            
                statements;
            
                update;   // 更新循環變量
            
            } while (condition);
            注:只少執行一次循環
          • for-in循環語句
            for(var i in Object){
            
              console.log("i" + " : " + Object[i]); //輸出對象的所有屬性值
            
            }
            
            
          • break循環終止語句
            while (condition) {
            
                if(condition){
            
                	break; //跳出循環體,程序往下執行
            
                }
            
                statements;
            
                update;   // 更新循環變量
            
            }
          • continue循環中斷語句
            while (condition) {
            
                if(condition){
            
                	continue; //終止本次循環,執行下一次循環
            
                }
            
                statements;
            
                update;   // 更新循環變量
            
            }
          • with語句
            with (Math) {
            
               x = cos(3 * PI) + sin(LN10);
            
               y = tan(14 * E);
            
            }
          • try-catch語句
            try {
            
                statements;
            
            } catch (ExceptionClass ec) {
            
                statements;
            
            } finally {
            
                statements;
            
            }
          • 另外,call語句,apply語句,eval等用法,請大家參考網上的建議。
        7. 一般建議

          • 寫js代碼最頭痛的是兼容性的問題,而每個瀏覽器對js的支持有不同。這就需要我們自己去兼容他們
            IE:有window.event對象   
            
            FF:沒有window.event對象??梢酝ㄟ^給函數的參數傳遞event對象。如onmousemove=doMouseMove(event)
            
            解決方法:var event = event || window.event; 
            
            
            
            example:
            
            function test(event) {
            
            var event = event || window.event;
            
            //do Something
            
            }
          • 不要使用parentElement,統一采用parentNode,保證兼容性。
          • 不要使用document.getElementById('xx').value 這樣的方式來訪問Dom元素對象的屬性或值,先將元素對象獲取到變量中,例如:var txtName=document.getElementById('textName')判斷Dom對象是否存在再取它的屬性或值,以提高程序的健壯性。
          • 類型編寫必須使用prototype模式,避免在內存中創建相同方法的多個實例。
          • 使用大括弧來定義靜態對象,而不是使用new Object()的方式。
          • 盡量不要使用全局變量,如果需要使用多個方法訪問的變量,請將變量和方法放在一個靜態Object對象中。
      5. Web前端資源>>> 【愛思資源網

      欧美精品久久久久久久自慰

      <noframes id="5hjpd"><progress id="5hjpd"><form id="5hjpd"></form></progress>

        <noframes id="5hjpd">

        <span id="5hjpd"><progress id="5hjpd"><progress id="5hjpd"></progress></progress></span>
          <noframes id="5hjpd">
          <ins id="5hjpd"><sub id="5hjpd"><rp id="5hjpd"></rp></sub></ins>
          <del id="5hjpd"><big id="5hjpd"></big></del>
          <track id="5hjpd"></track>