JavaScript基本編碼模式小結(jié)
更新時(shí)間：2012年05月23日 21:20:03 作者：
本文中筆者整理的這些模式包含了編寫JavaScript代碼時(shí)一些常用的方法或者小技巧，可以幫助初學(xué)JavaScript的同學(xué)迅速提升代碼質(zhì)量
無(wú)論編寫任何程序都會(huì)接觸到編碼風(fēng)格，設(shè)計(jì)模式等概念，編碼風(fēng)格一般側(cè)重于書寫規(guī)范，而設(shè)計(jì)模式則偏向于程序架構(gòu)設(shè)計(jì)。本文中筆者整理的這些“模式”包含了編寫JavaScript代碼時(shí)一些常用的方法或者小技巧，可以幫助初學(xué)JavaScript的同學(xué)迅速提升代碼質(zhì)量。當(dāng)然，在此之前首先要保證規(guī)范的書寫習(xí)慣，在此之上可以再將本文介紹的知識(shí)點(diǎn)運(yùn)用到代碼編寫中，則可以大大提升代碼質(zhì)量。
下面是筆者整理的一些點(diǎn)，沒有什么邏輯順序，想到哪兒寫到哪兒了，不足之處歡迎大家補(bǔ)充指正。
1. 變量定義
// 一般寫法
var a = 0;
var b = 1;
var c = 'xxx';
// 推薦寫法
var a = 0,
b = 1,
c = 'xxx';
2. 盡量使用字面量
// 一般寫法
var obj = new Object();
obj.a = 'aa';
obj.b = 'bb';
obj.c = 'cc';
var arr = new Array();
// 推薦寫法
var obj = {
a: 'aa',
b: 'bb'
};
var arr = [];
function getXX(index){
return ['aa', 'bb', 'xx', 55, 'xxb'](index);
}
function getMessage(code){
return {
404: 'xxx',
500: 'xxx'
}[code];
}
3. 正則字面量
var regex = new RegExp('someting');
// 當(dāng)正則表達(dá)式可能變化時(shí)才使用構(gòu)造函數(shù)
var cls = 'someclass',
regex = new RegExp(cls + '\\s*', 'ig'); // only for dynamic regexs
// 其他情況均使用字面量
var regex = /someting/ig;
4. 設(shè)置默認(rèn)值
// Default values
var arg = arg || 'default'; // fallback
document.getElementById('test').onclick = function(event){
var event = event || window.event;
};
function getX(a){
return a+1 || 'default';
}
5. 條件判斷
// Conditions
answer = obj && obj.xx && obj.xx.xxx;
// 連續(xù)判斷
if(obj && obj.xx && obj.xx.xxx){
// do something
}
if(obj.xx){
// do something
}
if(!obj){
// do something
}
// 使用全等判斷
if(a === b){
// do something
}
// 盡量不檢測(cè)瀏覽器，僅檢測(cè)要使用的特性是否支持
if(document.getElementById){
// ability detect
}
6. 三元操作符
// Ternary
check ? value1 : value2;
// 三元操作符更簡(jiǎn)潔
var foo = (condition) ? value1 : value2;
function xx(){
if(condition){
return value1;
}else{
return value2;
}
}
function xx(){
return (condition) ? value1 : value2;
}
// 格式化三元操作符
foo = predicate ? "one" :
predicate ? "two" :
"default"; // format
7. 插入迭代值
// Insert iteration
var name = value[i];
i++;
// 直接將迭代值插入
var name = value[i++];
8. DOM操作
// DOM Operation
el.style.display = 'none'; // offline
// operation
el.style.display = 'block';
// 使用文檔碎片操作更好
var fragment = document.createDocumentFragment(); // better
el.innerHTML = ''; // fast remove all children, but may leaks memory
el.innerHTML = 'xxx'; // ok, use it!
// 小心處理NodeList
var images = document.getElementsByTagName('img'); // be careful! dynamic list
9. 事件代理
// 使用事件代理，在更外層的元素上監(jiān)聽事件
document.getElementById('list').onclick = function(evt){
var evt = evt || window.event,
target = evt.target || evt.srcElement;
if(target.id === 'btn1'){
// do something
}
}
10. 命名空間
// An Object as a Namespace
var MYAPP = {};
MYAPP.dom.get = function(id){};
MYAPP.style.css = function(el, style){};
MYAPP.namespace('event');
11. 鏈?zhǔn)讲僮?
// Chaining operation: return this
function setValue(el, value){
el.value = value;
return this;
}
var obj = new MYAPP.dom.Element('span');
obj.setText('hello')
.setStyle('color', 'red')
.setStyle('font', 'Verdana');
12. 私有作用域
// Function
(function(){
var _private = 'cant see me';
})();
(function($){
$('#xxb').click(function(){ });
})(jQuery);
13. 配置對(duì)象
// Configure Object
function foo(id, conf, null , null){
// do somethin
}
foo('bar', {
key1 : 1,
key2 : 2
});
14. 類型轉(zhuǎn)換
// Type Conversion
+'010' === 10;
Number('010') === 10;
parseInt('010', 10) === 10;
10 + '' === '10';
+new Date() // timestamp
+new Date;
15. 擴(kuò)展原型
// 僅在需要向前兼容時(shí)才使用，其他情況不建議擴(kuò)展原型對(duì)象
Array.prototype.forEach = function(){
// only for forward compatible
};
16. 循環(huán)優(yōu)化
// 緩存
for(var i=0, j = document.getElementsByTagName('a').length; i0; i--){
// maybe faster
}
// 據(jù)說(shuō)是最快的
while(i--){
// maybe fastest
}
17. 盡量使用新特新
Array.forEach();
getElementsByClassName();
querySlectorAll();
// 首先檢測(cè)是否支持新特性，能用就用
if(document.getElementsByClassName){
// use
}else{
// your implementations
}
18. 惰性載入
// 只判斷一次，再次調(diào)用該函數(shù)則無(wú)需判斷
function lazyDef(){
if(condition1){
lazyDef = function(){ };
}else if(condition2){
lazyDef = function(){ };
}
return lazyDef();
}
19. 私有函數(shù)與公共方法
var MYAPP = {};
MYAPP.dom = (function(){
var _setStyle = function(el, prop, value){
console.log('setStyle');
};
return {
setStyle: _setStyle
};
})();
// 當(dāng) MYAPP.dom.setStyle 不慎被覆寫時(shí)，_setStyle在內(nèi)部仍然可用
20. 調(diào)試
// 盡量使用，可以傳入多個(gè)參數(shù)，最后輸出拼接后的字符串
console.log('xx','xx','...');
console.dir(someObj);
console.dirxml(someDom);
console.time('timer');
console.warn('xxx');
// 封裝可以保證不小心發(fā)布出去也不會(huì)導(dǎo)致問(wèn)題，但報(bào)錯(cuò)時(shí)行號(hào)可能有問(wèn)題
function msg(msg){
if(console && console.log){
console.log(msg); // wrong line number
}
}
基本上目前想到的只有這些，歡迎大家補(bǔ)充討論：）
下面是筆者整理的一些點(diǎn)，沒有什么邏輯順序，想到哪兒寫到哪兒了，不足之處歡迎大家補(bǔ)充指正。
1. 變量定義
復(fù)制代碼 代碼如下:
// 一般寫法
var a = 0;
var b = 1;
var c = 'xxx';
// 推薦寫法
var a = 0,
b = 1,
c = 'xxx';
2. 盡量使用字面量
復(fù)制代碼 代碼如下:
// 一般寫法
var obj = new Object();
obj.a = 'aa';
obj.b = 'bb';
obj.c = 'cc';
var arr = new Array();
// 推薦寫法
var obj = {
a: 'aa',
b: 'bb'
};
var arr = [];
function getXX(index){
return ['aa', 'bb', 'xx', 55, 'xxb'](index);
}
function getMessage(code){
return {
404: 'xxx',
500: 'xxx'
}[code];
}
3. 正則字面量
復(fù)制代碼 代碼如下:
var regex = new RegExp('someting');
// 當(dāng)正則表達(dá)式可能變化時(shí)才使用構(gòu)造函數(shù)
var cls = 'someclass',
regex = new RegExp(cls + '\\s*', 'ig'); // only for dynamic regexs
// 其他情況均使用字面量
var regex = /someting/ig;
4. 設(shè)置默認(rèn)值
復(fù)制代碼 代碼如下:
// Default values
var arg = arg || 'default'; // fallback
document.getElementById('test').onclick = function(event){
var event = event || window.event;
};
function getX(a){
return a+1 || 'default';
}
5. 條件判斷
復(fù)制代碼 代碼如下:
// Conditions
answer = obj && obj.xx && obj.xx.xxx;
// 連續(xù)判斷
if(obj && obj.xx && obj.xx.xxx){
// do something
}
if(obj.xx){
// do something
}
if(!obj){
// do something
}
// 使用全等判斷
if(a === b){
// do something
}
// 盡量不檢測(cè)瀏覽器，僅檢測(cè)要使用的特性是否支持
if(document.getElementById){
// ability detect
}
6. 三元操作符
復(fù)制代碼 代碼如下:
// Ternary
check ? value1 : value2;
// 三元操作符更簡(jiǎn)潔
var foo = (condition) ? value1 : value2;
function xx(){
if(condition){
return value1;
}else{
return value2;
}
}
function xx(){
return (condition) ? value1 : value2;
}
// 格式化三元操作符
foo = predicate ? "one" :
predicate ? "two" :
"default"; // format
7. 插入迭代值
復(fù)制代碼 代碼如下:
// Insert iteration
var name = value[i];
i++;
// 直接將迭代值插入
var name = value[i++];
8. DOM操作
復(fù)制代碼 代碼如下:
// DOM Operation
el.style.display = 'none'; // offline
// operation
el.style.display = 'block';
// 使用文檔碎片操作更好
var fragment = document.createDocumentFragment(); // better
el.innerHTML = ''; // fast remove all children, but may leaks memory
el.innerHTML = 'xxx'; // ok, use it!
// 小心處理NodeList
var images = document.getElementsByTagName('img'); // be careful! dynamic list
9. 事件代理
復(fù)制代碼 代碼如下:
// 使用事件代理，在更外層的元素上監(jiān)聽事件
document.getElementById('list').onclick = function(evt){
var evt = evt || window.event,
target = evt.target || evt.srcElement;
if(target.id === 'btn1'){
// do something
}
}
10. 命名空間
復(fù)制代碼 代碼如下:
// An Object as a Namespace
var MYAPP = {};
MYAPP.dom.get = function(id){};
MYAPP.style.css = function(el, style){};
MYAPP.namespace('event');
11. 鏈?zhǔn)讲僮?
復(fù)制代碼 代碼如下:
// Chaining operation: return this
function setValue(el, value){
el.value = value;
return this;
}
var obj = new MYAPP.dom.Element('span');
obj.setText('hello')
.setStyle('color', 'red')
.setStyle('font', 'Verdana');
12. 私有作用域
復(fù)制代碼 代碼如下:
// Function
(function(){
var _private = 'cant see me';
})();
(function($){
$('#xxb').click(function(){ });
})(jQuery);
13. 配置對(duì)象
復(fù)制代碼 代碼如下:
// Configure Object
function foo(id, conf, null , null){
// do somethin
}
foo('bar', {
key1 : 1,
key2 : 2
});
14. 類型轉(zhuǎn)換
復(fù)制代碼 代碼如下:
// Type Conversion
+'010' === 10;
Number('010') === 10;
parseInt('010', 10) === 10;
10 + '' === '10';
+new Date() // timestamp
+new Date;
15. 擴(kuò)展原型
復(fù)制代碼 代碼如下:
// 僅在需要向前兼容時(shí)才使用，其他情況不建議擴(kuò)展原型對(duì)象
Array.prototype.forEach = function(){
// only for forward compatible
};
16. 循環(huán)優(yōu)化
復(fù)制代碼 代碼如下:
// 緩存
for(var i=0, j = document.getElementsByTagName('a').length; i0; i--){
// maybe faster
}
// 據(jù)說(shuō)是最快的
while(i--){
// maybe fastest
}
17. 盡量使用新特新
復(fù)制代碼 代碼如下:
Array.forEach();
getElementsByClassName();
querySlectorAll();
// 首先檢測(cè)是否支持新特性，能用就用
if(document.getElementsByClassName){
// use
}else{
// your implementations
}
18. 惰性載入
復(fù)制代碼 代碼如下:
// 只判斷一次，再次調(diào)用該函數(shù)則無(wú)需判斷
function lazyDef(){
if(condition1){
lazyDef = function(){ };
}else if(condition2){
lazyDef = function(){ };
}
return lazyDef();
}
19. 私有函數(shù)與公共方法
復(fù)制代碼 代碼如下:
var MYAPP = {};
MYAPP.dom = (function(){
var _setStyle = function(el, prop, value){
console.log('setStyle');
};
return {
setStyle: _setStyle
};
})();
// 當(dāng) MYAPP.dom.setStyle 不慎被覆寫時(shí)，_setStyle在內(nèi)部仍然可用
20. 調(diào)試
復(fù)制代碼 代碼如下:
// 盡量使用，可以傳入多個(gè)參數(shù)，最后輸出拼接后的字符串
console.log('xx','xx','...');
console.dir(someObj);
console.dirxml(someDom);
console.time('timer');
console.warn('xxx');
// 封裝可以保證不小心發(fā)布出去也不會(huì)導(dǎo)致問(wèn)題，但報(bào)錯(cuò)時(shí)行號(hào)可能有問(wèn)題
function msg(msg){
if(console && console.log){
console.log(msg); // wrong line number
}
}
基本上目前想到的只有這些，歡迎大家補(bǔ)充討論：）
相關(guān)文章
這篇文章主要介紹了詳解JavaScript中的forEach()方法的使用,是JS入門學(xué)習(xí)中的基礎(chǔ)知識(shí),需要的朋友可以參考下2015-06-06
由于瀏覽器同源策略的限制,非同源下的請(qǐng)求,都會(huì)產(chǎn)生跨域問(wèn)題,jsonp即是為了解決這個(gè)問(wèn)題出現(xiàn)的一種簡(jiǎn)便解決方案,下面這篇文章主要給大家介紹了關(guān)于JSONP跨域原理以及實(shí)現(xiàn)的相關(guān)資料,需要的朋友可以參考下2022-06-06
你需要一個(gè)防止錯(cuò)誤產(chǎn)生的機(jī)器，可以理解CSS并且理解你:你的意圖、喜好、主意以及弱點(diǎn)。 只要是它可以阻止的錯(cuò)誤它都會(huì)持續(xù)阻止。同時(shí)，你和你的同事可以一直改善機(jī)器，擴(kuò)展它的功能并且削弱其局限性。2016-04-04
這篇文章主要為大家介紹了JavaScript稀疏數(shù)組的使用示例教程詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-06-06
javascript中attribute和property的區(qū)別詳解
這篇文章主要介紹了javascript中attribute和property的區(qū)別詳解,attribute和property對(duì)新手來(lái)說(shuō),特別容易混淆概念,本文就清晰的講解了它們的區(qū)別,需要的朋友可以參考下2014-06-06
這篇文章主要介紹了S的組成與基本語(yǔ)法，JS 主要是用來(lái)開發(fā)前端,但是也可以做別的,JS 現(xiàn)在是一個(gè) "通用" 的編程語(yǔ)言，感興趣的小伙伴可以參考閱讀2023-04-04
JavaScript DOM學(xué)習(xí)第八章 表單錯(cuò)誤提示
這一章詳細(xì)介紹的表單錯(cuò)誤提示的方法比那種大多數(shù)使用警告框的方法要好的多。2010-02-02
新手入門常用代碼集錦...2007-01-01
js數(shù)組直接賦值的問(wèn)題(js數(shù)組的淺拷貝與深拷貝方法)
JS數(shù)組在直接賦值時(shí)屬于數(shù)組的淺拷貝，新數(shù)組保存的是原數(shù)據(jù)的內(nèi)存地址，修改新數(shù)組或原數(shù)組其中一個(gè)數(shù)組，另一個(gè)數(shù)組也會(huì)相應(yīng)的變化，數(shù)組的直接賦值屬于數(shù)組的淺拷貝，JS存儲(chǔ)對(duì)象都是存內(nèi)存地址2022-10-10
javascript編程起步（第四課）...2007-02-02