如何正確使用javascript 來進(jìn)行我們的程序開發(fā)
今天在github 上面找到了一個(gè)關(guān)于如何正確使用javascript 來進(jìn)行我們的程序開發(fā).我就恬不知恥的來了個(gè)原創(chuàng)啊..坑爹啊.拿來和大家分享一下吧.
A mostly reasonable approach to Javascript.
Types //類型
Objects //對(duì)象
Arrays //數(shù)組
Strings //字符串
Functions //函數(shù)
Properties //屬性
Variables //變量
Hoisting //變量提升
Conditional Expressions & Equality //條件表達(dá)式和等式.
Blocks //塊代碼
Comments //注釋
Whitespace //空格
Commas //逗號(hào)
Semicolons //分號(hào)
Type Casting & Coercion //類型轉(zhuǎn)換
Naming Conventions //命名規(guī)則
Accessors //訪問
Constructors //構(gòu)造器
Events //時(shí)間
Modules //模型
jQuery //
ECMAScript 5 Compatibility //ECMA 5 兼容
Testing //測試
Performance //性能
Resources //資源
In the Wild
Translation
The JavaScript Style Guide Guide
Contributors
License
Types (類型)
原始類型: 當(dāng)訪問一個(gè)原始類型的時(shí)候,其實(shí)直接訪問該原始類型的內(nèi)容.
string
number
boolean
null
undefined
var foo = 1,
bar = foo;
bar = 9;
console.log(foo,bar); //=> 1,9
復(fù)雜類型: 當(dāng)你訪問一個(gè)復(fù)雜類型數(shù)據(jù)類型的時(shí)候,其實(shí)是通過引用訪問該變量的值.
object
array
function
var foo = [1,2]; bar = foo; bar[0] = 9; console.log(foo[0],bar[0]); // => 9,9
object(對(duì)象)
使用對(duì)象字面量來創(chuàng)建對(duì)象 (literal)
//bad var item = new Object(); //good var item = {};
不要使用保留關(guān)鍵字作為對(duì)象的屬性名.這在IE8下無法工作.
//bad var superman = { default: {clark: 'kent'}, private: true }; //good var superman = { defaults: {clark: 'kent'}, hidden: true };
array(數(shù)組)
同樣使用 字面量方法來創(chuàng)建數(shù)組
//bad var items = new Array(); //good var items = [];
如果你不知道數(shù)組的長度,那么使用Array的內(nèi)置方法push進(jìn)行插入操作
var someStack = []; //bad someStack[someStack.length] = 'vein'; //good someStack.push('vein');
當(dāng)你想要拷貝一個(gè)數(shù)組的時(shí)候,使用array.slice
var len = items.length, //指的就是上面的內(nèi)容... itemCopy = [], i; //bad for(i = 0; i < len ; ++i){ itemCopy[i] = items[i]; } //good itemCopy = items.slice(); //這里要注意了.這個(gè)我還真不知道...
Strings 字符串
使用單引號(hào) (single quotes ) 來包圍字符串...//這里我沒有找到合適的關(guān)于性能方面的解釋,我個(gè)人也喜歡這么用,(穿的少總比穿得多好看點(diǎn)吧..你懂得..)
//bad var name = "Bob Parr"; //good var name = 'Bob Parr'; //bad var fullName = "Bob " + this.lastName; //good var fullName = 'Bob ' + this.lastName;
字符串長于80個(gè)字符的時(shí)候需要使用字符串連接在多行進(jìn)行編寫..注意,如果過度使用,連接字符串將會(huì)影響性能(performance)
// bad var errorMessage = 'This is a super long error that was thrown because of Batman. When you stop to think about how Batman had anything to do with this, you would get nowhere fast.'; // bad var errorMessage = 'This is a super long error that was thrown because \ of Batman. When you stop to think about how Batman had anything to do \ with this, you would get nowhere \ fast.'; // good var errorMessage = 'This is a super long error that was thrown because ' + 'of Batman. When you stop to think about how Batman had anything to do ' + 'with this, you would get nowhere fast.';
如果是有計(jì)劃的 建立一個(gè)數(shù)組,像下面這樣.使用Array.join 效果會(huì)更好..
var items, messages, length, i; messages = [{ stat: 'success', message: ' This one worked' },{ stat: 'success', message: ' This one worked' },{ stat: 'success', message: ' This one worked' } ]; length = messages.length; //bad function inbox(messages){ items = '<ul>'; for (i = 0; i < length; i++) { items += '<li>' + messages[i].message + '</li>'; } return items + '</ul>'; } //good function inbox(messages){ items = []; for( i = 0; i < length ; i++){ items[i] = messages[i].message; } return '<ul><li>' + items.join('</li><li>') + '</li></ul>'; }
函數(shù)(Functions)
//匿名函數(shù)表達(dá)式.. var anonymous = function(){ return true; }; // 命名函數(shù)表達(dá)式. var named = function named(){ return true; }; //即時(shí)引用函數(shù) (function(){ console.log('Welcome to the Internet. Please follow me.'); })();
永遠(yuǎn)不要在非函數(shù)的塊代碼(if,while)中定義函數(shù).相應(yīng)的,在代碼塊中間函數(shù)賦值給外部的變量名..
//bad if(currentUser){ function test(){ console.log('Nope.'); } } //good var test; if(currentUser){ test = function(){ console.log('Yup'); }; //be careful with the semi-colon. }
Properties (屬性)
使用點(diǎn)語法來訪問屬性.
var luke = { jedi: true, age: 28 }; //bad var isJedi = luke['jedi']; //good var isJedi = luck.jedi;
當(dāng)使用變量訪問對(duì)象屬性時(shí),使用 [] 方括號(hào)來訪問
var luke = { jedi: true, age: 28 }; function getProp(prop) { return luke[prop]; } var isJedi = getProp('jedi');
相關(guān)文章
el-form實(shí)現(xiàn)表單和圖片手動(dòng)上傳和校驗(yàn)功能
在寫項(xiàng)目時(shí),難免遇到需要上傳表單,圖片等文件,且表單內(nèi)容需進(jìn)行驗(yàn)證及必填項(xiàng)提示,圖片需要和信息一起傳遞且圖片載入后需可預(yù)覽,這篇文章給大家介紹el-form實(shí)現(xiàn)表單和圖片手動(dòng)上傳和校驗(yàn)功能,感興趣的朋友一起看看吧2024-01-01Express框架詳解app函數(shù)使用實(shí)例
這篇文章主要為大家介紹了Express框架app函數(shù)使用實(shí)例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-03-03mapboxgl區(qū)劃標(biāo)簽避讓不遮蓋實(shí)現(xiàn)的代碼詳解
Mapbox是一個(gè)可以免費(fèi)創(chuàng)建并定制個(gè)性化地圖的網(wǎng)站。這篇文章主要介紹了mapboxgl區(qū)劃標(biāo)簽避讓不遮蓋實(shí)現(xiàn)方法,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-07-07javascript中parentNode,childNodes,children的應(yīng)用詳解
本篇文章是對(duì)javascript中parentNode,childNodes,children的應(yīng)用進(jìn)行了介紹,需要的朋友可以過來參考下,希望對(duì)大家有所幫助2013-12-12js下通過getList函數(shù)實(shí)現(xiàn)分頁效果的代碼
js下通過getList函數(shù)實(shí)現(xiàn)分頁效果的代碼,需要通過js分頁的朋友可以參考下。2010-09-09JS判斷鼠標(biāo)從什么方向進(jìn)入一個(gè)容器實(shí)例說明
偶然將想到的一個(gè)如何判斷鼠標(biāo)從哪個(gè)方向進(jìn)入一個(gè)容器的問題,并且做了一系列的設(shè)想,代碼部分不是很多,我直接寫了個(gè)示例, 感興趣的朋友可以了解下,或許本文對(duì)你有所幫助2013-02-02