如何正確使用javascript 來進(jìn)行我們的程序開發(fā)
今天在github 上面找到了一個關(guān)于如何正確使用javascript 來進(jìn)行我們的程序開發(fā).我就恬不知恥的來了個原創(chuàng)啊..坑爹啊.拿來和大家分享一下吧.
A mostly reasonable approach to Javascript.
Types //類型
Objects //對象
Arrays //數(shù)組
Strings //字符串
Functions //函數(shù)
Properties //屬性
Variables //變量
Hoisting //變量提升
Conditional Expressions & Equality //條件表達(dá)式和等式.
Blocks //塊代碼
Comments //注釋
Whitespace //空格
Commas //逗號
Semicolons //分號
Type Casting & Coercion //類型轉(zhuǎn)換
Naming Conventions //命名規(guī)則
Accessors //訪問
Constructors //構(gòu)造器
Events //時間
Modules //模型
jQuery //
ECMAScript 5 Compatibility //ECMA 5 兼容
Testing //測試
Performance //性能
Resources //資源
In the Wild
Translation
The JavaScript Style Guide Guide
Contributors
License
Types (類型)
原始類型: 當(dāng)訪問一個原始類型的時候,其實直接訪問該原始類型的內(nèi)容.
string
number
boolean
null
undefined
var foo = 1,
bar = foo;
bar = 9;
console.log(foo,bar); //=> 1,9
復(fù)雜類型: 當(dāng)你訪問一個復(fù)雜類型數(shù)據(jù)類型的時候,其實是通過引用訪問該變量的值.
object
array
function
var foo = [1,2]; bar = foo; bar[0] = 9; console.log(foo[0],bar[0]); // => 9,9
object(對象)
使用對象字面量來創(chuàng)建對象 (literal)
//bad
var item = new Object();
//good
var item = {};
不要使用保留關(guān)鍵字作為對象的屬性名.這在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)你想要拷貝一個數(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(); //這里要注意了.這個我還真不知道...
Strings 字符串
使用單引號 (single quotes ) 來包圍字符串...//這里我沒有找到合適的關(guān)于性能方面的解釋,我個人也喜歡這么用,(穿的少總比穿得多好看點吧..你懂得..)
//bad var name = "Bob Parr"; //good var name = 'Bob Parr'; //bad var fullName = "Bob " + this.lastName; //good var fullName = 'Bob ' + this.lastName;
字符串長于80個字符的時候需要使用字符串連接在多行進(jìn)行編寫..注意,如果過度使用,連接字符串將會影響性能(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.';
如果是有計劃的 建立一個數(shù)組,像下面這樣.使用Array.join 效果會更好..
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ù)
(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 (屬性)
使用點語法來訪問屬性.
var luke = {
jedi: true,
age: 28
};
//bad
var isJedi = luke['jedi'];
//good
var isJedi = luck.jedi;
當(dāng)使用變量訪問對象屬性時,使用 [] 方括號來訪問
var luke = {
jedi: true,
age: 28
};
function getProp(prop) {
return luke[prop];
}
var isJedi = getProp('jedi');
相關(guān)文章
JavaScript使用sort函數(shù)實現(xiàn)漢字排序
JavaScript中的sort函數(shù)是一個強(qiáng)大且多用途的工具,能夠?qū)?shù)組的元素進(jìn)行排序,而漢字按照拼音排序又是一個常見需求,下面我們就來看看如何使用JavaScript實現(xiàn)漢字排序吧2023-12-12
如何使Chrome控制臺支持多行js模式——意外發(fā)現(xiàn)
一直以來,Chrome控制臺都缺少象IE調(diào)試臺那樣的多行執(zhí)行模式,今天意外發(fā)現(xiàn)Chrome其實也支持多行模式2013-06-06
基于jQuery通過jQuery.form.js插件使用ajax提交form表單
在jQuery Form插件可以讓你很容易的使用AJAX提交Form表單,主要方法ajaxForm和ajaxSubmit負(fù)責(zé)收集表單元素的信息,管理提交進(jìn)程。這兩種方法都是可配置的,讓你完全控制Form提交,本篇文章介紹基于jQuery通過jQuery.form.js插件使用ajax提交form表單,需要的朋友可以參考下2015-08-08
如何解決js函數(shù)防抖、節(jié)流出現(xiàn)的問題
這篇文章主要介紹了如何解決js函數(shù)防抖、節(jié)流出現(xiàn)的問題。SyntheticEvent對象是通過合并得到的。 這意味著在事件回調(diào)被調(diào)用后,SyntheticEvent 對象將被重用并且所有屬性都將被取消。 因此,您無法以異步方式訪問該事件。,需要的朋友可以參考下2019-06-06

