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