<noframes id="pfp5n">

<form id="pfp5n"></form>
<noframes id="pfp5n">
<noframes id="pfp5n"><form id="pfp5n"></form>
<address id="pfp5n"><form id="pfp5n"><nobr id="pfp5n"></nobr></form></address>
<form id="pfp5n"></form>

    <listing id="pfp5n"></listing>

    <listing id="pfp5n"></listing>
          您當前的位置:首頁 > 建站常識 > javascript

          JavaScript 開發規范

          2017-02-20

            本篇主要介紹JS的命名規范、注釋規范以及框架開發的一些問題。hZz七七世界-網站建設|UI設計|人資系統|二次開發

          目錄

           hZz七七世界-網站建設|UI設計|人資系統|二次開發

          1. 命名規范:介紹變量、函數、常量、構造函數、類的成員等等的命名規范hZz七七世界-網站建設|UI設計|人資系統|二次開發

          2. 注釋規范:介紹單行注釋、多行注釋以及函數注釋hZz七七世界-網站建設|UI設計|人資系統|二次開發

          3. 框架開發:介紹全局變量沖突、單全局變量以及命名空間hZz七七世界-網站建設|UI設計|人資系統|二次開發

           hZz七七世界-網站建設|UI設計|人資系統|二次開發

          1. 命名規范

           hZz七七世界-網站建設|UI設計|人資系統|二次開發

          駝峰式命名法介紹:

          駝峰式命名法由小(大)寫字母開始,后續每個單詞首字母都大寫。hZz七七世界-網站建設|UI設計|人資系統|二次開發

          按照第一個字母是否大寫,分為:hZz七七世界-網站建設|UI設計|人資系統|二次開發

          Pascal Case 大駝峰式命名法:首字母大寫。eg:StudentInfo、UserInfo、ProductInfohZz七七世界-網站建設|UI設計|人資系統|二次開發

          Camel Case 小駝峰式命名法:首字母小寫。eg:studentInfo、userInfo、productInfohZz七七世界-網站建設|UI設計|人資系統|二次開發

          1.1 變量

          命名方法:小駝峰式命名法。hZz七七世界-網站建設|UI設計|人資系統|二次開發

          命名規范:前綴應當是名詞。(函數的名字前綴為動詞,以此區分變量和函數)hZz七七世界-網站建設|UI設計|人資系統|二次開發

          命名建議:盡量在變量名字中體現所屬類型,如:length、count等表示數字類型;而包含name、title表示為字符串類型。hZz七七世界-網站建設|UI設計|人資系統|二次開發

          示例:hZz七七世界-網站建設|UI設計|人資系統|二次開發

          // 好的命名方式
          var maxCount = 10;
          var tableTitle = 'LoginTable';
          
          // 不好的命名方式
          var setCount = 10;
          var getTitle = 'LoginTable';
          

           hZz七七世界-網站建設|UI設計|人資系統|二次開發

          1.2 函數

          命名方法:小駝峰式命名法。hZz七七世界-網站建設|UI設計|人資系統|二次開發

          命名規范:前綴應當為動詞。hZz七七世界-網站建設|UI設計|人資系統|二次開發

          命名建議:可使用常見動詞約定hZz七七世界-網站建設|UI設計|人資系統|二次開發

            動詞   含義 返回值
          can 判斷是否可執行某個動作(權限) 函數返回一個布爾值。true:可執行;false:不可執行
          has 判斷是否含有某個值 函數返回一個布爾值。true:含有此值;false:不含有此值
          is 判斷是否為某個值 函數返回一個布爾值。true:為某個值;false:不為某個值
          get 獲取某個值 函數返回一個非布爾值
          set 設置某個值 無返回值、返回是否設置成功或者返回鏈式對象
          load 加載某些數據 無返回值或者返回是否加載完成的結果

          示例:hZz七七世界-網站建設|UI設計|人資系統|二次開發

          // 是否可閱讀
          function canRead() {
              return true;
          }
          
          // 獲取名稱
          function getName() {
              return this.name;
          }
          

           hZz七七世界-網站建設|UI設計|人資系統|二次開發

          1.3 常量

          命名方法:名稱全部大寫。hZz七七世界-網站建設|UI設計|人資系統|二次開發

          命名規范:使用大寫字母和下劃線來組合命名,下劃線用以分割單詞。hZz七七世界-網站建設|UI設計|人資系統|二次開發

          命名建議:無。hZz七七世界-網站建設|UI設計|人資系統|二次開發

          示例:hZz七七世界-網站建設|UI設計|人資系統|二次開發

          var MAX_COUNT = 10;
          var URL = 'http://www.baidu.com';
          

           hZz七七世界-網站建設|UI設計|人資系統|二次開發

          1.4 構造函數

          介紹:在JS中,構造函數也屬于函數的一種,只不過采用new 運算符創建對象。hZz七七世界-網站建設|UI設計|人資系統|二次開發

          命名方法:大駝峰式命名法,首字母大寫。hZz七七世界-網站建設|UI設計|人資系統|二次開發

          命名規范:前綴為名稱。hZz七七世界-網站建設|UI設計|人資系統|二次開發

          命名建議:無。hZz七七世界-網站建設|UI設計|人資系統|二次開發

          示例:hZz七七世界-網站建設|UI設計|人資系統|二次開發

          function Student(name) {
              this.name = name;
          }
          
          var st = new Student('tom');
          

           hZz七七世界-網站建設|UI設計|人資系統|二次開發

          1.5 類的成員

          類的成員包含:hZz七七世界-網站建設|UI設計|人資系統|二次開發

          ① 公共屬性和方法:跟變量和函數的命名一樣。hZz七七世界-網站建設|UI設計|人資系統|二次開發

          ② 私有屬性和方法:前綴為_(下劃線),后面跟公共屬性和方法一樣的命名方式。hZz七七世界-網站建設|UI設計|人資系統|二次開發

          示例:hZz七七世界-網站建設|UI設計|人資系統|二次開發

          function Student(name) {
              var _name = name; // 私有成員
          
              // 公共方法
              this.getName = function () {
                  return _name;
              }
          
              // 公共方式
              this.setName = function (value) {
                  _name = value;
              }
          }
          var st = new Student('tom');
          st.setName('jerry');
          console.log(st.getName()); // => jerry:輸出_name私有變量的值
          

           hZz七七世界-網站建設|UI設計|人資系統|二次開發

          2. 注釋規范

           hZz七七世界-網站建設|UI設計|人資系統|二次開發

          JS支持兩種不同類型的注釋:單行注釋和多行注釋。hZz七七世界-網站建設|UI設計|人資系統|二次開發

          2.1 單行注釋

          說明:單行注釋以兩個斜線開始,以行尾結束。hZz七七世界-網站建設|UI設計|人資系統|二次開發

          語法:// 這是單行注釋hZz七七世界-網站建設|UI設計|人資系統|二次開發

          使用方式:hZz七七世界-網站建設|UI設計|人資系統|二次開發

          ① 單獨一行://(雙斜線)與注釋文字之間保留一個空格。hZz七七世界-網站建設|UI設計|人資系統|二次開發

          ② 在代碼后面添加注釋://(雙斜線)與代碼之間保留一個空格,并且//(雙斜線)與注釋文字之間保留一個空格。hZz七七世界-網站建設|UI設計|人資系統|二次開發

          ③ 注釋代碼://(雙斜線)與代碼之間保留一個空格。hZz七七世界-網站建設|UI設計|人資系統|二次開發

          示例:hZz七七世界-網站建設|UI設計|人資系統|二次開發

          // 調用了一個函數;1)單獨在一行
          setTitle();
          
          var maxCount = 10; // 設置最大量;2)在代碼后面注釋
          
          // setName(); // 3)注釋代碼
          

           hZz七七世界-網站建設|UI設計|人資系統|二次開發

          2.2 多行注釋

          說明:以/*開頭,*/結尾hZz七七世界-網站建設|UI設計|人資系統|二次開發

          語法:/* 注釋說明 */hZz七七世界-網站建設|UI設計|人資系統|二次開發

          使用方法:hZz七七世界-網站建設|UI設計|人資系統|二次開發

          ① 若開始(/*)和結束(*/)都在一行,推薦采用單行注釋。hZz七七世界-網站建設|UI設計|人資系統|二次開發

          ② 若至少三行注釋時,第一行為/*,最后行為*/,其他行以*開始,并且注釋文字與*保留一個空格。hZz七七世界-網站建設|UI設計|人資系統|二次開發

          示例:hZz七七世界-網站建設|UI設計|人資系統|二次開發

          /*
          * 代碼執行到這里后會調用setTitle()函數
          * setTitle():設置title的值
          */
          setTitle();
          

           hZz七七世界-網站建設|UI設計|人資系統|二次開發

          2.3 函數(方法)注釋

          說明:函數(方法)注釋也是多行注釋的一種,但是包含了特殊的注釋要求,參照 javadoc(百度百科)。hZz七七世界-網站建設|UI設計|人資系統|二次開發

          語法:hZz七七世界-網站建設|UI設計|人資系統|二次開發

          /** hZz七七世界-網站建設|UI設計|人資系統|二次開發
          * 函數說明 hZz七七世界-網站建設|UI設計|人資系統|二次開發
          * @關鍵字 hZz七七世界-網站建設|UI設計|人資系統|二次開發
          */hZz七七世界-網站建設|UI設計|人資系統|二次開發

          常用注釋關鍵字:(只列出一部分,并不是全部)hZz七七世界-網站建設|UI設計|人資系統|二次開發

          注釋名 語法 含義 示例
          @param @param 參數名 {參數類型}  描述信息 描述參數的信息 @param name {String} 傳入名稱
          @return @return {返回類型} 描述信息 描述返回值的信息 @return {Boolean} true:可執行;false:不可執行
          @author @author 作者信息 [附屬信息:如郵箱、日期] 描述此函數作者的信息 @author 張三 2015/07/21 
          @version @version XX.XX.XX 描述此函數的版本號 @version 1.0.3
          @example @example 示例代碼 演示函數的使用 @example setTitle('測試')

          示例:hZz七七世界-網站建設|UI設計|人資系統|二次開發

          /**
          * 合并Grid的行
          * @param grid {Ext.Grid.Panel} 需要合并的Grid
          * @param cols {Array} 需要合并列的Index(序號)數組;從0開始計數,序號也包含。
          * @param isAllSome {Boolean} :是否2個tr的cols必須完成一樣才能進行合并。true:完成一樣;false(默認):不完全一樣
          * @return void
          * @author polk6 2015/07/21  
          * @example
          * _________________                             _________________
          * |  年齡 |  姓名 |                             |  年齡 |  姓名 |
          * -----------------      mergeCells(grid,[0])   -----------------
          * |  18   |  張三 |              =>             |       |  張三 | 
          * -----------------                             -  18   ---------
          * |  18   |  王五 |                             |       |  王五 |
          * -----------------                             -----------------
          */
          function mergeCells(grid, cols, isAllSome) {
          	// Do Something
          }
          

           hZz七七世界-網站建設|UI設計|人資系統|二次開發

          3. 框架開發

           hZz七七世界-網站建設|UI設計|人資系統|二次開發

          3.1 全局變量沖突

            在團隊開發或者引入第三方JS文件時,有時會造成全局對象的名稱沖突,比如a.js有個全局函數sendMsg(),b.js也又有個全局函數sendMsg(),引入a.js和b.js文件時,會造成sendMsg()函數沖突。hZz七七世界-網站建設|UI設計|人資系統|二次開發

          示例:hZz七七世界-網站建設|UI設計|人資系統|二次開發

           hZz七七世界-網站建設|UI設計|人資系統|二次開發

           hZz七七世界-網站建設|UI設計|人資系統|二次開發

          3.2 單全局變量

            所創建的全局對象名稱是獨一無二的,并將所有的功能代碼添加到這個全局對象上。調用自己所寫的代碼時,以這個全局對象為入口點。hZz七七世界-網站建設|UI設計|人資系統|二次開發

          如:hZz七七世界-網站建設|UI設計|人資系統|二次開發

          * JQuery的全局對象:$和JQueryhZz七七世界-網站建設|UI設計|人資系統|二次開發

          * ExtJS的全局對象: ExthZz七七世界-網站建設|UI設計|人資系統|二次開發

          示例:hZz七七世界-網站建設|UI設計|人資系統|二次開發

          hZz七七世界-網站建設|UI設計|人資系統|二次開發

           hZz七七世界-網站建設|UI設計|人資系統|二次開發

          3.3 命名空間

            在項目規模日益壯大時,可采用命名空間方式對JS代碼進行規范:即將代碼按照功能進行分組,以組的形式附加到單全局對象上。hZz七七世界-網站建設|UI設計|人資系統|二次開發

          以Ext的chart模塊為例:hZz七七世界-網站建設|UI設計|人資系統|二次開發

          hZz七七世界-網站建設|UI設計|人資系統|二次開發

           hZz七七世界-網站建設|UI設計|人資系統|二次開發

          本文關鍵詞:  

          一切精彩源自七七網絡!我們傾力打造時尚潮流第一線!

          ? 2012-2024七七世界網站建設     20707.net 1125w.com 版權所有     豫ICP備14018694號-1

          人成久久影院,和小姪女保持性关系故事,亚洲综合色欲色欲综合网站
          <noframes id="pfp5n">

          <form id="pfp5n"></form>
          <noframes id="pfp5n">
          <noframes id="pfp5n"><form id="pfp5n"></form>
          <address id="pfp5n"><form id="pfp5n"><nobr id="pfp5n"></nobr></form></address>
          <form id="pfp5n"></form>

            <listing id="pfp5n"></listing>

            <listing id="pfp5n"></listing>