javascript之學(xué)會(huì)吝嗇 精簡(jiǎn)代碼
更新時(shí)間：2010年04月25日 02:15:55 作者：
前端開(kāi)發(fā)，要學(xué)會(huì)吝嗇:
1、吝嗇你的代碼，用最少的代碼做最合適的事情；
比如你的代碼中用到了很多document.getElementById()，你是否考慮寫(xiě)一個(gè)簡(jiǎn)單的ID選擇器
function $(Id)
{
return document.getElementById(Id);
}
2、吝嗇你的補(bǔ)丁，不要為了實(shí)現(xiàn)功能在現(xiàn)有框架上打補(bǔ)丁，而是框架擴(kuò)展上寫(xiě)實(shí)現(xiàn)，如果框架不能擴(kuò)展，是否考慮部分重構(gòu)？
比如你已經(jīng)擁有一套完整的表單正則驗(yàn)證框架，某天你發(fā)現(xiàn)某個(gè)表單在嚴(yán)重框架里找不到對(duì)應(yīng)的正則，你可能的做法是追加一個(gè)if就能簡(jiǎn)單的實(shí)現(xiàn)，可為何不在驗(yàn)證框架里面擴(kuò)展一個(gè)正則，保持代碼的干凈呢？
、吝嗇代碼執(zhí)行的步驟
比如我們?cè)趯?xiě)ajax代碼時(shí)，我們經(jīng)常寫(xiě)如下的代碼：
var xmlObject;
function createXMLHTTPRequest()
{
if(window.ActiveXObject)
{
xmlObject = new ActiveObject("Microsoft.XMLHTTP");
}
else
{
xmlObject = new XMLHTTPRequest();
}
}
但我們每生成一次對(duì)象就要進(jìn)行一次判斷，為何不在第一次生成對(duì)象后記憶下來(lái)，下次直接new呢？改進(jìn)后如下
var _ajax = function(){
_self = this;
}
_ajax.prototype = {
/**
* 構(gòu)建http請(qǐng)求對(duì)象
*/
_create: function(){
var factories = [
function(){return new XMLHttpRequest();}, //非IE系列
function(){return new ActiveXObject("Microsoft.XMLHTTP");}, //IE
function(){return new ActiveXObject("Msxml2.XMLHTTP");} //IE某些版本
];
for (var i = 0; i < factories.length; i++) {
try {
if (factories[i]()) {
return factories[i];
}
}
catch (e) {
continue;
}
}
return factory[2];
}(),
}
這段代碼看起來(lái)視乎比上面執(zhí)行步驟多很多，但當(dāng)?shù)谝淮握{(diào)用_ajax._create()后，_ajax._create已經(jīng)被改變成一個(gè)兼容當(dāng)前瀏覽器的匿名函數(shù)，以后的調(diào)用都不再會(huì)做判斷；
比如你的代碼中用到了很多document.getElementById()，你是否考慮寫(xiě)一個(gè)簡(jiǎn)單的ID選擇器
復(fù)制代碼 代碼如下:
function $(Id)
{
return document.getElementById(Id);
}
2、吝嗇你的補(bǔ)丁，不要為了實(shí)現(xiàn)功能在現(xiàn)有框架上打補(bǔ)丁，而是框架擴(kuò)展上寫(xiě)實(shí)現(xiàn)，如果框架不能擴(kuò)展，是否考慮部分重構(gòu)？
比如你已經(jīng)擁有一套完整的表單正則驗(yàn)證框架，某天你發(fā)現(xiàn)某個(gè)表單在嚴(yán)重框架里找不到對(duì)應(yīng)的正則，你可能的做法是追加一個(gè)if就能簡(jiǎn)單的實(shí)現(xiàn)，可為何不在驗(yàn)證框架里面擴(kuò)展一個(gè)正則，保持代碼的干凈呢？
、吝嗇代碼執(zhí)行的步驟
比如我們?cè)趯?xiě)ajax代碼時(shí)，我們經(jīng)常寫(xiě)如下的代碼：
復(fù)制代碼 代碼如下:
var xmlObject;
function createXMLHTTPRequest()
{
if(window.ActiveXObject)
{
xmlObject = new ActiveObject("Microsoft.XMLHTTP");
}
else
{
xmlObject = new XMLHTTPRequest();
}
}
但我們每生成一次對(duì)象就要進(jìn)行一次判斷，為何不在第一次生成對(duì)象后記憶下來(lái)，下次直接new呢？改進(jìn)后如下
復(fù)制代碼 代碼如下:
var _ajax = function(){
_self = this;
}
_ajax.prototype = {
/**
* 構(gòu)建http請(qǐng)求對(duì)象
*/
_create: function(){
var factories = [
function(){return new XMLHttpRequest();}, //非IE系列
function(){return new ActiveXObject("Microsoft.XMLHTTP");}, //IE
function(){return new ActiveXObject("Msxml2.XMLHTTP");} //IE某些版本
];
for (var i = 0; i < factories.length; i++) {
try {
if (factories[i]()) {
return factories[i];
}
}
catch (e) {
continue;
}
}
return factory[2];
}(),
}
這段代碼看起來(lái)視乎比上面執(zhí)行步驟多很多，但當(dāng)?shù)谝淮握{(diào)用_ajax._create()后，_ajax._create已經(jīng)被改變成一個(gè)兼容當(dāng)前瀏覽器的匿名函數(shù)，以后的調(diào)用都不再會(huì)做判斷；
相關(guān)文章
如何使用JavaScript實(shí)現(xiàn)無(wú)縫滾動(dòng)自動(dòng)播放輪播圖效果
這篇文章主要介紹了如何使用JavaScript實(shí)現(xiàn)“無(wú)縫滾動(dòng) 自動(dòng)播放”輪播圖效果,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-08-08
JavaScript常用數(shù)組去重的方法及對(duì)比詳解
數(shù)組去重在面試和工作中都是比較容易見(jiàn)到的問(wèn)題。這篇文章主要是來(lái)測(cè)試多個(gè)方法，對(duì)下面這個(gè)數(shù)組的去重結(jié)果進(jìn)行分析討論，需要的可以參考一下2022-07-07
JavaScript拆分字符串時(shí)產(chǎn)生空字符的解決方案
使用JavaScript的split方法拆分字符串時(shí)出現(xiàn)一些空字符串""，尤其是當(dāng)使用正則表達(dá)式作為分隔符的時(shí)候。那么，產(chǎn)生這些空字符串的原因是什么？又該如何來(lái)處理呢，這就是今天我們要探討的問(wèn)題2014-09-09
普通web整合quartz跑定時(shí)任務(wù)的示例
這篇文章主要介紹了普通web整合quartz跑定時(shí)任務(wù),本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-03-03
Webpack中使用環(huán)境變量的各種正確姿勢(shì)
我們?cè)陂_(kāi)發(fā)項(xiàng)目中都會(huì)遇到這種場(chǎng)景,區(qū)分開(kāi)發(fā)環(huán)境、生產(chǎn)環(huán)境、測(cè)試環(huán)境,不同場(chǎng)景請(qǐng)求不同的接口Api,這時(shí)候項(xiàng)目中配置的「環(huán)境變量」就登場(chǎng)啦,這篇文章主要給大家介紹了關(guān)于Webpack中使用環(huán)境變量的各種正確姿勢(shì),需要的朋友可以參考下2021-09-09
js中Number數(shù)字?jǐn)?shù)值運(yùn)算后值不對(duì)的解決方法
下面小編就為大家?guī)?lái)一篇js中Number數(shù)字?jǐn)?shù)值運(yùn)算后值不對(duì)的解決方法。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-02-02
JavaScript實(shí)現(xiàn)電燈開(kāi)關(guān)小案例
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)電燈開(kāi)關(guān)小案例，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-03-03
ts依賴引入報(bào)錯(cuò):無(wú)法找到模塊“xxxxxx”的聲明文件問(wèn)題解決
這篇文章主要給大家介紹了關(guān)于ts依賴引入報(bào)錯(cuò):無(wú)法找到模塊“xxxxxx”的聲明文件問(wèn)題的解決辦法,文中通過(guò)示例帶將解決辦法介紹的非常詳細(xì),需要的朋友可以參考下2023-07-07
純javascript響應(yīng)式樹(shù)形菜單效果
這篇文章主要為大家分享了純javascript響應(yīng)式樹(shù)形菜單效果的簡(jiǎn)單教程，對(duì)多級(jí)目錄樹(shù)形菜單感興趣的小伙伴們可以參考一下2015-11-11
Draggable Elements 元素拖拽功能實(shí)現(xiàn)代碼
雖說(shuō)js框架到處都是, 都封裝了很多實(shí)用的功能,能快速的讓我們實(shí)現(xiàn)如動(dòng)畫(huà),元素拖拽等功能, 不過(guò)由于好奇心的驅(qū)使, 有時(shí)想一探究竟, 看看一些功能是如何實(shí)現(xiàn)的2011-03-03