<font id="zqva1"></font>
<rt id="zqva1"></rt>
  • <tt id="zqva1"></tt>
    <cite id="zqva1"></cite>

    <cite id="zqva1"><noscript id="zqva1"></noscript></cite>
      <rp id="zqva1"><meter id="zqva1"></meter></rp>

        <cite id="zqva1"></cite>
          <b id="zqva1"></b>
          <rp id="zqva1"></rp>
          <cite id="zqva1"></cite>

          <rt id="zqva1"></rt>

        1. <rp id="zqva1"></rp>

          Web 前端開發代碼規范(基礎)

          時間:?2018-01-03閱讀:?763標簽:?規范

          一、 引言

          對于一個多人團隊來說,制定一個統一的規范是必要的,因為個性化的東西無法產生良好的聚合效果,規范化可以提高編碼工作效率,使代碼保持統一的風格,以便于代碼整合和后期維護。


          二、 HTML/CSS規范

          2.1 瀏覽器兼容

          根據公司業務要求而定,一般:

          • 主流程測試:Chrome 30+、IE9+;
          • 完整測試: Chrome 21、IE8+、360瀏覽器、微信webview/QQ手機瀏覽器。

          2.2 html代碼規范

          2.2.1聲明與編碼

          1、html頭部聲明統一:

          <!DOCTYPE html>
          

          2、頁面編碼統一:

          <meta charset="UTF-8"> <!-- ie6也支持,無須擔心 --> 
          

          2.2.2格式縮進

          html編碼統一格式化顯示,使用一個Tab鍵進行分層縮進 (2個空格寬度),使整個頁面結構層次清晰,方便閱讀和修改。

          2.2.3 模塊注釋

          html較大獨立模塊之間注釋格式統一使用:

          <!-- start: XXX模塊 -->
           …
          <!-- end: XXX模塊 -->
          

          或者:

          <!-- XXX模塊 -->
           …
          <!-- /XXX模塊 -->
          

          2.2.4標簽與屬性

          1、由于html標簽和屬性不區別大小寫,所有建議都采用小寫,尤其是自定義標簽和屬性名,否定js中取不到,如:

          <div data-bgColor="red"></div>
          
          $('div').data('bgColor');  // 取不到,已自動被瀏覽器轉成了data-bgcolor
          

          2、所有html屬性必須添加雙引號(非單引號)。

          // 禁止
          <div id=mainframe> 或 <div id='mainframe'>
          
          // 推薦
          <div id="mainframe">
          

          3、所有標簽必須采用合理嵌套。

          // 禁止
          <p><b></p></b>
          
          // 推薦
          <p><b></b></p>
          
          // 禁止inline級標簽嵌套block級標簽
          <span><div></div></span>
          

          4、所有<、&、>等特殊符號(非標簽一部分)用編碼表示。< 編碼成< ,>編碼成>,&編碼成&

          5、img標簽中必須添加alt屬性。如: <imgsrc="…" alt="logo" />

          6、標簽在運用時,應盡量使用語義化標簽,如:

          <h1>標題<h1>
          <lable for="user">用戶名:</lable>
          <input name="username" id="user">
          

          在語義不明顯,既可用div也可用p時,應優先考慮p標簽。

          2.3 CSS代碼規范

          2.3.1 CSS引用規范

          1、所有CSS均為外部調用,不得在頁面書寫任何內部樣式或行內樣式;

          2、html頁面引入樣式文件:

          統一使用link標簽,少用@import(原生import有加載性能問題),sass、less、vue.js等文件使用import命令除外(因為最終前端構建工具會將引入文件編譯成一個css文件)。

          <link rel="stylesheet" href="xxx.css"> <!-- type="text/css"可以省略,清爽 -->
          

          2.3.2 CSS注釋規范

          1、css頭部文檔注釋( 統一加上@charset聲明 ),如下:

          @charset "utf-8";
          
          /**
          * @created :   2017/09/15
          * @author  :   Mr.Wang
          * @version :   v1.0
          * @desc    :   XX模塊
          */
          (web前端學習交流群:328058344 禁止閑聊,非喜勿進!)
          

          關于"version",如果對代碼有修改更新version版本號,并添加相關注釋。

          2、內部模塊之間注釋(建議 @模塊英文名,好查找):

          /* @info 商品信息區
          ----------------------------------------------------------------*/
          .infoArea{}
          
          /* 單行注釋 */
          .specArea{}
          
          /* @price 商品價格區
          ----------------------------------------------------------------*/
          .price{}
          

          2.3.3 CSS書寫規范

          1、樣式書寫不做強約,可分行或單行

          推薦單行,理由:直觀、模塊之間分隔鮮明,有全局感。

          2、樣式中屬性排序規則:先外部 > 再自身 > 后內部,推薦工具( CSScomb )

            A.)影響文檔流的屬性(display, position, float, clear, visibility, table-layout等)
          
            B.)自身盒模型的屬性(width, height, margin, padding, border等)
          
            C.)排版相關屬性(font, line-height, text-align, text-indent, vertical-align等)
          
            D.)裝飾性屬性(color, background, opacity, cursor等)
          
            E.)生成內容的屬性(content, list-style, quotes等)
          

          3、所有CSS屬性和值必須采用小寫的形式。如:FONT-SIZE:12PX必須改為font-size:12px;

          4、關于css背景圖片(關鍵字:合并,縮寫,去引號), 引號不是必須的,而且在某些瀏覽器上加引號反而出錯:

          // 不推薦
          .canbox{
             background-color: #ff6600;
             background-image: url("/img/xxx.png");
          }
          
          // 推薦(合并、去除引號)
          .canbox {
             background: #f60 url(/img/xxx.png); 
          }
          

          5、屬性為0值,去除單位。

          // 不推薦
          .wrap{
             margin: 0px 0px 5px 8px;
          }
          
          // 推薦
          .wrap {
             margin: 0 0 5px 8px;
          }
          

          6、所有CSS的命名應語義化,如:回復框,.replyBox{…},禁止用拼音縮寫命名,如.hfk{…}。

          7、清除浮動時用.clearfix,禁止用無語義的 <p></p>清除。

          8、用來顯示動態文本輸入的地方,樣式里必須加上強制英文換行:

          word-break: break-all; word-wrap: break-word; overflow-x: hidden; 
          

          如果要顯示省略號加上:text-overflow: ellipsis;

          9、上下相鄰的兩模塊盡量避免混用margin-bottom,margin-top,否則會產生重疊現象。


          三、 JavaScript規范

          3.1 JS文件引用

          1、引入格式:

          腳本語言發展至今,也只有js混的最好了,所以type="text/javascript"類型指定可以省去。

          <script src="model.js"></script>
          

          2、引入位置: body標簽內最后部(非body外面), 減少因載入腳本而造成其他頁面內容阻塞的問題(js單線程)。

          <html>
          <body>
          <div>頁面內容….</div>
          <script src="model.js"></script>
          </body>
          </html>
          

          3、引入方式:html頁面中禁止直接編寫js代碼,統一使用 <script> 外部引用方式,以便打包壓縮和緩存。

          3.2 JS代碼縮進

          3.2.1 整體層次

          使用 Tab 鍵進行代碼縮進 (4個空格寬度) 。

          (function() {
          var i = 0;
          function innerFun() {
          var j = 0;
                 ……
             }
          }); 
          

          運算符(=、==,&&、+/-等)兩側應各空一個格,塊級{}左側也應該空出一格

          3.2.2 局部間隔

          // 不推薦
          var arr=[1,2],str='hello'+'Lucy';
          
          var myfun=function(arg){
          //todo…
          }
          
          // 推薦
          var arr = [1,2], 
             str = 'hello' + 'Lucy';
          
          var myfun = function(arg) {
          //todo…
          } 
          (web前端學習交流群:328058344 禁止閑聊,非喜勿進!)
          

          3.3 JS注釋規則

          3.3.1 文件頭部注釋

          /**
          * @created :  2017/09/15
          * @author  :  Mr.Wang
          * @version :  v1.0
          * @desc    :  當前js模塊功能描述
          * @e.g.    :  方法用例,如:$('.title').tip();
          */ 
          

          3.3.2 方法注釋及單行注釋

          1、對于一個較復雜的方法和函數,可用采用多行注釋,以便作詳情的描述。

          /**
          * 此方法是用于解析tpl模塊
          * 通過分析html中結構…
          */
          

          2、單行注釋

          var funName = function(arg1, arg2) {
          this.arg1 = arg1;
          
          // 單行注釋說明(上面添加一空行, //與說明之間空一格)
          this.arg2 = arg2;
          }; 
          

          3.4 命名規則

          變量名應由 26 個大小寫字母(A..Z,a..z),10 個數字(0..9),和“_”(下劃線)組成。

          1、通常, 使用”駝峰式”寫法,對象、函數和實例時尤其如此。

          // 不推薦
          var is_my_object = {};
          var is-my-object = {};
          
          // 推薦
          var isMyObject = {};
          

          2、構造函數或類時使用駝峰式大寫

          // 不推薦
          var bad = new user({
              name: 'nope'
          });
          // 推薦
          var good = new User({
              name: 'nope'
          });
          

          3、常量大寫,并用下劃線分隔,形式如:NAMESLIKETHIS

          3.5 編碼模式

          為了規范代碼嚴謹風格,推薦嚴格模式(Strict Mode),即總是在模塊頂部聲明 'use strict';

          (function(){
          'use strict';
          function innerFun(){
          var j = 0;
                 ……
             }
          });
          

          嚴格模式的一大目標是顯性的拋出錯誤,讓你能更方便更快的調試一些隱性的錯誤。

          1、防止意外的創建了全局變量。

          非嚴格模式下,為一個未申明的局部變量賦值時會自動創建一個同名的全局變量,這是Js程序中最容易出現的錯誤之一,在嚴格模式下這么做會顯性的拋出異常。

          // 嚴格模式下會拋出異常
          (function() {
             some = 'foo';
          }());
          

          2、防止函數中的this指針意外指向全局。

          非嚴格模式下,函數中未被定義或為空( null or undefined)的this會默認指向全局環境(global)。

          window.color = 'red';
          function getColor() {
             console.log(this.color);
          }
          
          // 在嚴格模式中會報錯, 非嚴格模式中則提示red
          getColor();
          

          3、防止重名。

          當編寫大量代碼時,對象屬性和函數參數很容易一不小心被設置成一個重復的名字。嚴格模式在這種情況下會顯性的拋出錯誤

          // 重復的變量名,在嚴格模式下會報錯。
          function doSomething(value1, value2, value1) {
          //code
          }
          
          // 重復的對象屬性名,在嚴格模式下會報錯。
          var object = {
             foo: 'bar',
             foo: 'baz'
          };
          

          4、對只讀屬性修改/刪除時會拋出異常。

          ES5中可為對象特定屬性設為只讀或讓整個對象不可修改。 但在非嚴格模式中嘗試修改一個只讀屬性只會默不做聲的失敗。

          var person = {};
          Object.defineProperty(person, 'name' {
             writable: false,
             value: 'Nicholas'
          });
          
          // 在非嚴格模式時,沉默的失敗,在嚴格模式則拋出異常
          person.name = 'John';
          

          5、不要在全局環境下啟用嚴格模式。

          為了兼容第三方代碼可能沒有為嚴格模式做好準備而引發的問題,最好把開啟嚴格模式的指令作用于自己獨立的模塊/函數里。

          3.6 推崇建議

          —— 變量

          聲明變量必須加上 var 關鍵字. 否則變量就會暴露在全局上下文中, 這樣很可能會和現有變量沖突(es6中let修復了這個問題)。

          —— 逗號

          不要加多余的逗號,這可能會在IE下引起錯誤,同時如果多一個逗號某些ES3的實現會計算多數組的長度。

          // 不推薦
          var hero = {
           firstName: 'Kevin',
           lastName: 'Flynn',
          };
          
          // 推薦
          var hero = {
           firstName: 'Kevin',
           lastName: 'Flynn'
          };
          

          —— 分號

          如果僅依靠語句間的隱式分隔, 有時會很麻煩.而且有些情況下, 漏掉分號會很危險.

          ;(function(){
          var i = 0;
          function innerFun(){
          var j = 0;
              ……
            }
          });
          

          —— {},[]

          // 不推薦
          var item1 = new Object(),  item2 = new Array();
          
          // 推薦
          var item1 = {},  item2 = [];
          

          (解釋:new關鍵字的使用 除了在需要實例化一個對象,或罕見的需要延時加載數據的情況外,基本上不需要使用new關鍵字。在Javascript里分配大量的new變量地址是一項很慢的操作,為了效率起見,應該始終使用對象符號。)

          —— 字符串,統一用單引號

          // 不推薦
          var name = "Bob Parr";
          
          // 推薦
          var name = 'Bob Parr';
          

          —— === 和 !== 操作符

          使用 === 和 !== 操作符會相對好點。== 和 != 操作符會進行類型強制轉換。 特別是, 不要將 == 用于與錯值比較(false,null,undefined,“”,0,NaN)。

          —— 塊

          // 不推薦
          if (test)
          return false;
          // 推薦
          if (test) return false;
          // 或
          if (test) {
          return false;
          }
          // 不推薦
          function() { return false; }
          // 推薦
          function() {
          return false;
          }
          (web前端學習交流群:328058344 禁止閑聊,非喜勿進!)
          

          —— 不要使用eval()

          只用于解析序列化串 (如: 解析 RPC 響應)

          eval() 會讓程序執行的比較混亂, 當 eval() 里面包含用戶輸入的話就更加危險.

          可以用其他更佳的, 更清晰, 更安全的方式寫你的代碼, 所以一般情況下請不要使用 eval().

          當碰到一些需要解析序列化串的情況下(如, 計算 RPC 響應), 使用 eval 很容易實現.

          —— js常見參數命名建議

          元素:elem, 參數:arg,對象:obj,數組:arr, 指令:ret,長度:len


          四、 jQuery性能優化

          ——總是從ID選擇器開始繼承

          jQuery中最快的篩選器是ID篩選器,這是因為它直接和JS原生方法getElementById()對應。

          ——在class前使用tag

          第二快是tag選擇器, 因為它和JS原生方法getElementsByTagName() 對應。jQuery中class選擇器是最慢的,因為在IE瀏覽器下它會遍歷所有的DOM節點。

          綜上幾點:

          1. 如果查找$('. class'),應使用$('#id > tag. class')來縮小DOM Tree的搜索范圍。
          2. #id前面不要用tag來修飾。寫成$('div#id')會降低性能,因為JS會遍歷所有 的div元素來查找id為'id'的哪一個節點:
          3. #id1也不需要由#id2來修飾。寫成$('#id2 #id1') 是畫蛇添足,降低性能。

          ——緩存JQuery對象

          要養成將jquery對象緩存進變量的習慣,避免進行多次查找,另外為了區分普通的JS對象和jQuery對象,建議在變量首字母前加上$符號。如:

          var $box = $('#wrap').find('.box');
          $box.addClass('class');
          $.ajax({
             $box.html('text');
          });
          

          ——合理使用鏈式操作

          可以減少對DOM Tree的訪問以及代碼量。如代碼:

          $('div').addClass('className').html('html code').click(function(){
            alert(1);
          }); 
          

          ——使用子查詢

          使用children(), find(), filter()來進行子查詢。如代碼:

          $('div p').click(function(){
            ……
          }); 
          // 上面替換成如下
          $('div').find('p').click(function(){
            ……
          }); 
          

          ——減少DOM操作

          當要進行DOM插入時,將所有元素在內存中封裝成一個元素,一次性插入。

          ——自定義數據屬性

          dom結構上添加自定義屬性:

          <div id="wrap" data-foo="123"></div> 
          // 取數據:
          $('#wrap').data('foo'); 
          // 存數據:
          $('#wrap').data('foo', {a:1,b:2} );
          

          附錄

          命名規則:

          1. 所有文件夾命名,如需要兩個單詞表示的,使用"-"中劃線連接(如:img-plug)。
          2. 所有文件(.html、.css、.js、圖片)命名,如需要兩個單詞表示的,使用""下劃線連接符(如:indexinfo.html)。
          3. 所有素材圖片應將文件名第一個單詞命名為圖片分類,第二個單詞為圖片名稱,第三個單詞可以是數字或其它內容,以下為圖片命名細則:
          icon_xxx.gif   //圖標文件名 
          btn_xxx.gif    //按鈕文件名 
          corner_xxx.gif  //邊角文件名 
          banner_xxx.gif  //廣告條文件名 
          bg_xxx.gif      //背景圖片文件名 
          flash_xxx.gif     //flash文件名 
          temp_xxx.gif  //臨時測試用文件名 


          站長推薦

          1.阿里云: 本站目前使用的是阿里云主機,安全/可靠/穩定。點擊領取2000元代金券、了解最新阿里云產品的各種優惠活動點擊進入

          2.騰訊云: 提供云服務器、云數據庫、云存儲、視頻與CDN、域名等服務。騰訊云各類產品的最新活動,優惠券領取點擊進入

          3.廣告聯盟: 整理了目前主流的廣告聯盟平臺,如果你有流量,可以作為參考選擇適合你的平臺點擊進入

          鏈接: http://www.modern-decoration.com.cn/article/detial/311

          前端之CSS編碼規范

          那為什么變量名不用小寫字母加小劃線的方式,如:family_tree,而是推薦用駝峰式的familyTree?C語言就喜歡用這種方式命名變量,但是由于因為下劃線比較難敲(shift + -),所以一般用駝峰式命名變量的居多。

          你可能不知道的CSS

          也許有人會說,都快 2019 年了怎么還讀 CSS2.1 規范。一方面,現在最新的 CSS (core) 規范是 CSS2.2,因為 CSS2.1 有中文的版本,并且和 CSS2.2 規范差異性不是很大,基于偷懶的目的最終選擇閱讀了 CSS2.1 規范。

          Js ES6編碼規范

          本章節討論使用ES6編碼風格到代碼中需要注意的點。通過記住這些關鍵點,可以讓我們寫出更優美的、可讀性更強的JavaScript E6風格的代碼。ES6 提出了兩個新的聲明變量的命令: let 和 const。

          分享一份大佬的MySQL數據庫設計規范,值得收藏

          MySQL數據庫與 Oracle、 SQL Server 等數據庫相比,有其內核上的優勢與劣勢。我們在使用MySQL數據庫的時候需要遵循一定規范,揚長避短。無意中從github上看到一個大佬的MySQL數據庫設計規范

          CSS的BEM規范學習

          塊中的子元素是塊的子元素,并且子元素的子元素在 bem 里也被認為是塊的直接子元素。一個塊中元素的類名必須用父級塊的名稱作為前綴。如上面的例子,li.item 是列表的一個子元素

          Web前端開發規范手冊

          文件命名規則:文件名稱統一用小寫的英文字母、數字和下劃線的組合。引文件統一使用index.htm index.html index.asp文件名(小寫),圖片的名稱分為頭尾兩部分,用下劃線隔開,頭部分表示此圖片的大類性質

          為什么有的編程規范要求用 void 0 代替 undefined?

          Undefined 類型表示未定義,它的類型只有一個值,就是 undefined。任何變量在被賦值前它的值都是 undefined,但是在 JavaScript 引擎中,undefined 是一個變量而非關鍵字。

          CSS的書寫規范和順序

          關于CSS的書寫規范和順序,是大部分前端er都必須要攻克的一門關卡,如果沒有按照良好的CSS書寫規范來寫CSS代碼,會影響代碼的閱讀體驗。這里總結了一個CSS書寫規范、CSS書寫順序供大家參考

          實際項目中用Redis要注意哪些規范?

          Redis功能強大,數據類型豐富,再快的系統,也經不住瘋狂的濫用。通過禁用部分高風險功能,并掛上開發的枷鎖,業務更能夠以簡潔、通用的思想去考慮問題,而不是綁定在某種實現上。

          前端標準規范

          總體原則:極簡、極快、解耦,主要適用范圍:vue 單頁項目+;關于圖片:少量直接放到本頁面文件下(資源集中,互不影響),有兩個頁面以上公用則抽離放到 img 文件夾下(降低層級),assets 下的 img 主要放 favicon.png、pwa等全局圖片

          內容以共享、參考、研究為目的,不存在任何商業目的。其版權屬原作者所有,如有侵權或違規,請與小編聯系!情況屬實本人將予以刪除!

          文章投稿關于web前端網站點搜索站長推薦網站地圖站長QQ:522607023

          小程序專欄: 土味情話心理測試腦筋急轉彎幽默笑話段子句子語錄成語大全運營推廣

          国产精品高清视频免费 - 视频 - 在线观看 - 影视资讯 - 唯爱网