javascript-style-guide

  1 /*
  2 1.類型types
  3     原始值：存取直接做用於它自身
  4         string
  5         number
  6         boolean
  7         null
  8         undefined        
  9             var foo=1;
 10             var bar=foo;
 11             bar=9;
 12             console.log(foo,bar);//=>1,9        
 13     複雜類型：存取時做用於它自身值的引用
 14         object
 15         array
 16         function
 17             var foo=[1,2];
 18             var bar=foo;
 19             bar[0]=9;
 20             console.log(foo,bar);//=>1,9
 21 2.對象objects
 22     使用直接量建立對象
 23         //bad
 24         var item=new Object();
 25         //good
 26         var item={};
 27     不要使用保留字做爲鍵名，它們在IE8下不工做
 28         //bad
 29         var superman={
 30             default:{clark:‘kent’},
 31             private:ture;
 32         };
 33         //good
 34         var superman={
 35             default:{clark:‘kent’},
 36             hidden:ture;
 37         };
 38     使用同義詞替換須要使用的保留字
 39         //bad
 40         var superman={
 41             class:'alien'
 42         };
 43         //bad
 44         var superman={
 45             klass:'alien'
 46         };
 47         //good
 48         var superman={
 49             type:'alien'
 50         };
 51 3.數組arrays
 52     使用直接量建立數組
 53         //bad
 54         var items=new Array();
 55         //good
 56         var items=[];
 57     向數組增長元素時使用Array#push來替代直接賦值
 58         var someStack=[];
 59         //bad
 60         someStack[someStack.length]='abcdefghi';
 61         //good
 62         someStack.push('abcdefghi');
 63     當你須要拷貝數組時，使用Array#slice.
 64         var len=items.length;
 65         var itemsCopy=[];
 66         var i;
 67         //bad
 68         for(i=0;i<len;i++){
 69             itemsCopy[i]=items[i];
 70         }
 71         //good
 72         itemsCopy=items.slice();
 73     使用Array#slice將類數組對象轉換成數組
 74         function trigger(){
 75             var args=Array.prototype.slice.call(arguments);
 76         }
 77 4.字符串strings
 78     使用單引號‘’包裹字符串
 79         //bad
 80         var name=「bob parr";
 81         //good
 82         var name='bob parr';
 83         //bad
 84         var fullName="bob"+this.lastName;
 85         //good
 86         var fullName=‘bob’+this.lastName;
 87     超過100個字符的字符串應該使用連接字符寫成多行。
 88     注：若過分使用，經過鏈接符鏈接的長字符串可能會影響性能。
 89         //bad
 90         var errorMessage='this is a super long error that was thrown because of batman.when you stip to think';
 91         var errorMessage='this is a super long error that was thrown\
 92         because of batman.\
 93         when you stip to think';
 94         //good
 95         errorMessage='this is a super long error that was thrown'+
 96         'because of batman.'+
 97         'when you stip to think';
 98     程序化生成的字符串使用Array#join鏈接而不是使用鏈接符。尤爲是IE下；
 99         var items；
100         var messages;
101         var length;
102         var i;
103         
104         messages=[{
105             state:'success',
106             message:'this one worked'
107         },{
108             state:'success',
109             message:'this one worked as well'
110         },{
111             state:'error',
112             message:'this one did not work'
113         }];
114         legnth=messages.length;
115         //bad
116         function inbox(messages){
117             items='<ul>';
118             for(i=0;i<length;i++){
119                 items+='<li>'+messages[i].message+'</li>';
120             }
121             return items+'</ul>';
122         }
123         //good
124         function inbox(messages){
125             items=[];
126             for(i=0;i<length;i++){
127                 items[i]='<li>'+messages[i].message+'</li>';
128             }
129             return '<ul>'+items.join('')+'</ul>';
130         }
131 5.函數functions
132     函數表達式
133         //匿名函數表達式
134         var anonymous=function(){
135             return true;
136         }
137         //命名函數表達式
138         var named=function named(){
139             return true;
140         }
141         //當即調用的函數表達式（IIFE）
142         (function(){
143             console.log('welcome to the internet');
144         }());
145     永遠不要在一個非函數代碼塊(if、while等)中聲明一個函數，把那個函數賦給一個變狼。瀏覽器容許你這麼作，但它們的解析表現不一致。
146     注：ECMA-262把塊定義爲一組語句。函數聲明不是語句。
147     //bad
148     if(currentUser){
149         function test(){
150             console.log('Nope');
151         }
152     }
153     //good
154     var test;
155     if(currentUser){
156         test=function test(){
157             console.log('Yup');
158         };
159     }
160     永遠不要把參數命名爲arguments。這將取代函數做用域內的arguments對象。
161         // bad
162         function nope(name, options, arguments) {
163             // ...stuff...
164         }
165 
166         // good
167         function yup(name, options, args) {
168             // ...stuff...
169         }
170     
171 6.屬性properties
172     使用.來訪問對象的屬性。
173         var luke={
174             jedi:ture;
175             age:28
176         };
177         //bad
178         var isJedi=luke['jedi'];
179         //good
180         var isJedi=luke.jedi;
181     當經過變量訪問屬性時，使用中括號[]
182         var luke={
183             jedi:ture;
184             age:28
185         };
186         function getProp(prop){
187             return luke[prop];
188         }
189         var isJedi=getProp('jedi');
190 7.變量varibles
191     老是使用var來聲明變量。不這麼作將致使產生全局變量。咱們要避免污染全局命名空間。
192         //bad
193         superPower=new SuperPower();
194         //good
195         var superPower=new SuperPower();
196     使用var聲明每個變量。這樣作的好處是增長新變量將變得更加容易，並且你永遠不用再擔憂調換錯;跟，。
197         //good
198         var items=getItems();
199         var    goSportsTeam=ture;
200         var    dr='z';
201     最後再聲明未賦值的變量，當你須要引用前面的變量賦值時這將變的頗有用。
202         var items=getItems();
203         var    goSportsTeam=ture;
204         var    dragonball;
205         var i;
206     在做用域頂部聲明變量。這將幫助你避免變量聲明提高相關的問題。    
207 8.提高hoisting
208     變量聲明會提高至做用域頂部，但賦值不會。
209     匿名函數表達式會提高它們的變量名，但不會提高函數的賦值。
210     命名函數表達式會提高函數名，但不會提高函數名或函數體。
211     函數聲明提高它們的名字和函數體。
212         function example() {
213             superPower(); // => Flying
214 
215             function superPower() {
216                 console.log('Flying');
217             }
218         }
219 9.比較預算法&等號comparison-operators-equality
220     優先使用===和！==而不是==和！=
221     條件表達式例如if語句經過抽象方法ToBoolean強制計算它們的表達式而且老是遵照下面的規則。
222         對象被計算爲true
223         undefined被計算爲false
224         Null被計算爲false
225         布爾值被計算爲布爾值
226         數字若是是+0、-0或NaN被計算爲false,負責爲true
227         字符串若是是空字符串‘’被計算爲false,負責爲true
228             if([0]){
229                 //true
230                 //一個數組就是一個對象，對象被計算爲true
231             }
232     使用快捷方式
233     //bad
234     if(name!==''){
235         //stuff
236     }
237     //good
238     if(name){
239         //stuff
240     }
241     //bad
242     if(collection.length>0){
243         //stuff
244     }
245     //good
246     if(collection.length){
247         //stuff
248     }
249 10.塊blocks
250     使用大括號包裹全部的多行代碼塊
251         if(test){
252             return false;
253         }
254         function(){
255             return false;
256         }
257     若是經過if和else使用多行代碼塊，把else放在if代碼塊關閉括號的同一行
258         if(test){
259             thing1();
260         }else{
261             thing2();
262         }
263 11.註釋comments
264     使用/+*..*+/做爲多行註釋,包含描述、指定全部參數和返回值得類型和值
265     使用//做爲單行註釋，在評論對象上面另起一行使用單行註釋。在註釋錢插入空行
266         // good
267         // is current tab
268         var active = true;
269         
270         // good
271         function getType() {
272             console.log('fetching type...');
273 
274             // set the default type to 'no type'
275             var type = this.type || 'no type';
276 
277             return type;
278         }
279     使用FIXME或TODO的前綴能夠幫助其餘開發者快速瞭解這是一個須要複查的問題
280         //FIXME:shouldn`t use a global here
281         //TODO:total should be configurable by an options param
282 12.空白whitespace
283     使用2個空格做爲縮進
284     在大括號前方一個空格
285     function test() {
286         
287     }
288     在控制語句(if、while等)的小括號前放一個空格。在函數調用及聲明中，不在函數參數列表前加空格。
289     使用空格把運算符隔開。
290         var x = y + 5;
291     在文件末尾插入一個空行
292     在使用長方法鏈時進行縮進。使用前面的點.強調這是方法調用而不是新語句
293         $('items')
294             .find('selected')
295                 .highlight()
296                 .end()
297             .find('open')
298                 .updateCount();
299     在塊末和新語句前插入空行。
300 13.逗號commas
301     行首逗號：不須要  
302     額外的行末逗號：不須要
303         var story=[
304             once,
305             upon,
306             aTime
307         ];
308 14.分號semicolons
309     使用分號
310         //good
311         (function() {
312             var name='sky';
313             return name;
314         })();
315         //good (防止函數在兩個IIFE合併時被當成一個參數)
316         ;(function() {
317             var name='sky';
318             return name;
319         })();
320 15.類型轉化type-casting-coercion
321     在語句開始時執行類型轉換
322     使用parseInt轉換數字時老是帶上類型轉換的基數；
323         var inputValue='4';
324         //bad
325         var val=new Number(inputValue);
326         //bad
327         var val=+inputValue;
328         //bad
329         var val=parseInt(inputValue);
330         //good
331         var val=Number(inputValue);
332         //good
333         var val=parseInt(inputValue,10);
334     布爾：
335         var age=0;
336         //bad
337         var hasAge=new Boolean(age);
338         //good
339         var hasAge=Boolean(age);
340         //good
341         var hasAge=!!age;
342         
343 16.命名規則naming-conventions
344     避免單字母命名，命名應具有描述下
345     使用駝峯式命名對象、函數和實例
346     使用帕卡斯式命名構造函數或類
347         //bad
348         function user(){
349             this.namme=options.name;
350         }
351         //good
352         function User(){
353             this.namme=options.name;
354         }
355         var good=new User(){
356             name:'hip';
357         }
358     不要使用下劃線前/後綴,javascript沒有私有屬性或方法的概念
359         //bad
360         this._firstName_='';
361         //good
362         this.firstName='';
363     不要保存this的應用，使用Function#bind
364         //bad
365         function(){
366             var self=this;
367             return function(){
368                 console.log(self);
369             };
370         }
371         //good
372         function() {
373             return function() {
374                 console.log(this);
375             }.bind(this);
376         }
377     給函數命名，這在作堆棧軌跡時頗有幫助
378         //bad 
379         var log=function(msg) {
380             console.log(msg);
381         };
382         //good
383         var log=function log(msg) {
384             console.log(msg);
385         }
386     
387 17.存取器accessors
388     屬性的存取函數不是必須的
389     若是你須要存取函數時使用getVal()和setVal('hello'),便於理解函數的用途
390     若是屬性時布爾值，使用isVal()或hasVal()    
391 18.事件events
392     當給事件附加數據時，傳入一個哈希而不是原始值。這樣可讓後面的貢獻者增長更
393     多數據到事件數據而無需找出並更新事件的每個處理器。
394         //bad
395         $(this).trigger('listingUpdated','listing.id');
396         //good
397         $(this).trigger('listingUpdated',{listingId:listing.id});
398 
399 
400 
401 */