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