首頁  >  文章  >  web前端  >  如何正確使用javascript 來進行我們的程式開發_javascript技巧

如何正確使用javascript 來進行我們的程式開發_javascript技巧

WBOY
WBOY原創
2016-05-16 16:43:21924瀏覽

今天在github 上面找到了一個關於如何正確使用javascript 來進行我們的程序開發.我就恬不知恥的來了個原創啊..坑爹啊.拿來和大家分享一下吧.
A mostly reasonable approach to Javascript.
Types //類型
Objects //物件
Arrays //陣列
Strings //字串
Functions //函數
Properties //屬性
Variables //變數
Hoisting //變數提升
Conditional Expressions & Equality //條件式與等式.
Blocks //區塊程式碼
Comments //註解
Whitespace //空格
Commas //逗號
Semicolons //分號
Type Casting & Coercion //型別轉換
Naming Conventions //命名規則
Accessors //存取
Constructors //建構器
Events //時間
Modules //模型
jQuery //
ECMAScript 5 Compatibility //ECMA 5 相容
Testing //測驗
Performance //效能
Resources //資源
In the Wild
Translation
The JavaScript Style Guide Guide
Contributors
License

Types (類型)
原始型別: 當存取原始型別的時候,其實直接存取該原始型別的內容.
string
number
boolean
null
undefined
var foo = 1,
bar = foo;
bar = 9;
console.log(foo,bar); //=> 1,9

複雜型別: 當你存取一個複雜型別資料型別的時候,其實是透過引用來存取該變數的值.
object
array
function

var foo = [1,2];
bar = foo;
bar[0] = 9;
console.log(foo[0],bar[0]); // => 9,9

object(對象)
使用物件字面量來建立物件 (literal)

//bad
var item = new Object();
//good
var item = {};

不要使用保留關鍵字作為物件的屬性名稱.這在IE8下無法運作.

//bad
var superman = {
default: {clark: 'kent'},
private: true
};
//good
var superman = {
defaults: {clark: 'kent'},
hidden: true
};

array(數組)
同樣使用 字面量法來建立陣列

//bad
var items = new Array();
//good
var items = [];

如果你不知道數組的長度,那麼使用Array的內建方法push進行插入操作

var someStack = [];
//bad
someStack[someStack.length] = 'vein';
//good
someStack.push('vein');

當你想要拷貝一個陣列的時候,使用array.slice

var len = items.length, //指的就是上面的内容...
itemCopy = [],
i;
//bad
for(i = 0; i < len ; ++i){
itemCopy[i] = items[i];
}
//good
itemCopy = items.slice(); //这里要注意了.这个我还真不知道...

Strings 字串
使用單引號(single quotes ) 來包圍字符串...//這裡我沒有找到合適的關於性能方面的解釋,我個人也喜歡這麼用,(穿的少總比穿得多好看點吧..你懂得..)

//bad
var name = "Bob Parr";
//good
var name = 'Bob Parr';
//bad
var fullName = "Bob " + this.lastName;
//good
var fullName = 'Bob ' + this.lastName;

字串長於80個字元的時候需要使用字串連接在多行進行編寫..注意,如果過度使用,連接字串將會影響效能(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.';

如果是有計劃的 建立一個數組,像下面這樣.使用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>';
}

函數(Functions)

//匿名函数表达式..
var anonymous = function(){
return true;
};
// 命名函数表达式.
var named = function named(){
return true;
};
//即时引用函数
(function(){
console.log('Welcome to the Internet. Please follow me.');
})();

永遠不要在非函數的區塊程式碼(if,while)中定義函數.對應的,在程式碼區塊中間函數賦值給外部的變數名稱..

//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;

當使用變數存取物件屬性時,使用 [] 方括號來存取

var luke = {
jedi: true,
age: 28
};
function getProp(prop) {
return luke[prop];
}
var isJedi = getProp('jedi');
陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn