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í)行步驟多很多，但當?shù)谝淮握{用_ajax._create()后，_ajax._create已經被改變成一個兼容當前瀏覽器的匿名函數(shù)，以后的調用都不再會做判斷；
比如你的代碼中用到了很多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í)行步驟多很多，但當?shù)谝淮握{用_ajax._create()后，_ajax._create已經被改變成一個兼容當前瀏覽器的匿名函數(shù)，以后的調用都不再會做判斷；
相關文章
Pyqt常常使用主從架構（Master-Workers 架構）來避免界面卡死的情況,本文主要介紹了Pyqt5實現(xiàn)多線程程序的使用示例,感興趣的可以了解一下2023-11-11
jquery 實現(xiàn)輸入郵箱時自動補全下拉提示功能
大家在做Web項目，都會有注冊登錄模塊，如果是郵箱注冊，想要在輸入@后觸發(fā)下拉框顯示各個郵箱的功能。下面介紹一款jQuery實現(xiàn)輸入郵箱的時候，可自動補全郵箱地址，也可稱為是“輸入提示”的功能，比如輸入aaa時，自動變成aaa@163.com，有效提升網頁的人性化體驗2015-10-10
JS庫particles.js創(chuàng)建超炫背景粒子插件(附源碼下載)
particles.js用于創(chuàng)建粒子的輕量級 JavaScript 庫。使用方法非常簡單，代碼也很容易實現(xiàn)，下面通過本文給大家分享JS庫particles.js創(chuàng)建超炫背景粒子插件附源碼下載，需要的朋友參考下吧2017-09-09
本篇文章主要介紹了webpack4 css打包壓縮問題的解決，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-05-05
這篇文章主要給大家介紹了Javascript生成帶有參樹二維碼的方法,實現(xiàn)的方法還是很簡單的，有需要的朋友們可以參考借鑒。下面來一起看看吧。2016-10-10
這篇文章主要介紹了JavaScript獲取表單enctype屬性的方法,涉及javascript操作表單屬性的技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-04-04
我們先看一個關于Javascript利用循環(huán)綁定事件的例子2008-10-10
JavaScript中有關一個數(shù)組中最大值和最小值及它們的下表的輸出的解決辦法
這篇文章主要介紹了JavaScript中有關一個數(shù)組中最大值和最小值及它們的下表的輸出的一種解決辦法，本文還給大家介紹了js快速獲取數(shù)組中最大值和最小值的方法，非常不錯,需要的朋友可以參考下2016-07-07
BootStrap Table復選框默認選中功能的實現(xiàn)代碼(從數(shù)據(jù)庫獲取到對應的狀態(tài)進行判斷是否為選中狀態(tài))
本文通過實例代碼給大家介紹了BootStrap Table復選框默認選中功能(從數(shù)據(jù)庫獲取到對應的狀態(tài)進行判斷是否為選中狀態(tài))，代碼簡單易懂，非常不錯，具有參考借鑒價值，需要的的朋友參考下吧2017-07-07
下面小編就為大家?guī)硪黄獪\談JavaScript對象與繼承。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-07-07