JS如何優(yōu)化代碼

這篇文章主要介紹了JS如何優(yōu)化代碼，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

一、松耦合

當(dāng)修改一個(gè)組件而不需要更改其他組件時(shí)，就做到了松耦合

1、將JS從CSS中抽離：不要使用CSS表達(dá)式

//不好的做法
.box{width: expression(document.body.offsetWidth + 'px')}

2、將CSS從JS中抽離：通過(guò)JS修改CSS樣式時(shí)，使用className或classList，不要逐條修改style樣式

//不好的做法一
ele.style.color = 'red';
ele.style.left= '10px';
//不好的做法二
ele.style.cssText ='color:red;left:10px;';
.reveal{color:red;left:10px;}
//好的做法一
ele.className += 'reveal';
//好的做法二
ele.classList.add('reveal');

3、將JS從HTML中抽離：從JS文件放入外置文件中

4、將HTML從JS中抽離：不要在innerHTML中拼接DOM結(jié)構(gòu)，而是使用字符串模板，如handlerbars

二、全局變量

創(chuàng)建全局變量被認(rèn)為是糟糕的實(shí)踐，尤其在團(tuán)隊(duì)開(kāi)發(fā)的大背景下更是問(wèn)題多多。隨著代碼量的增長(zhǎng)，全局變量會(huì)導(dǎo)致一些非常重要的可維護(hù)性難題，全局變量越多，引入錯(cuò)誤的概率會(huì)變得越高

一般而言，有如下三種解決辦法

1、零全局變量

實(shí)現(xiàn)方法是使用一個(gè)立即調(diào)用函數(shù)IIFE并將所有腳本放置其中

(function(){
 var doc = win.document;
})(window);

這種模式的使用場(chǎng)景有限，只要代碼需要被其他的代碼所依賴，或者需要在運(yùn)行中被不斷擴(kuò)展或修改，就不能使用這種方式

2、單全局變量和命名空間

依賴盡可能少的全局變量，即只創(chuàng)建一個(gè)全局變量，使用單變量模式，如YUI或jQuery

單全局變量，即所創(chuàng)建的這個(gè)唯一全局對(duì)象名是獨(dú)一無(wú)二的，并將所有的功能代碼都掛載到這個(gè)全局對(duì)象上。

因此，每個(gè)可能的全局變量，都成為唯一全局變量的屬性，從而不會(huì)創(chuàng)建多個(gè)全局變量

命名空間是簡(jiǎn)單的通過(guò)全局對(duì)象的單一屬性表示的功能性分組。比如Y.DOM下的所有方法都是和DOM操作相關(guān)的，Y.Event下的所有方法都是和事件相關(guān)的。常見(jiàn)的約定是每個(gè)文件中都通過(guò)新的全局對(duì)象來(lái)聲明自己的命名空間

3、使用模塊

模塊是一種通用的功能片段，它并沒(méi)有創(chuàng)建新的全局變量或命名空間。相反，所有的這些代碼都存放于一個(gè)表示執(zhí)行一個(gè)任務(wù)或發(fā)布一個(gè)接口的單函數(shù)中?？梢杂靡粋€(gè)名稱來(lái)表示這個(gè)模塊，同樣這個(gè)模塊可以依賴其他模塊

三、事件處理

將事件處理相關(guān)的代碼和事件環(huán)境耦合在一起，導(dǎo)致可維護(hù)性很糟糕

1、隔離應(yīng)用邏輯

將應(yīng)用邏輯從所有事件處理程序中抽離出來(lái)是一種最佳實(shí)踐，將應(yīng)用邏輯和事件處理的代碼拆分開(kāi)來(lái)

//不好的做法
function handleClick(event){
 var popup = document.getElementById('popup');
 popup.style.left = event.clientX + 'px';
 popup.style.top = event.clientY + 'px';
 popup.className = 'reveal';
}
addListener(element,'click',handleClick);
//好的做法
var MyApplication = {
 handleClick: function(event){
  this.showPopup(event);
 },
 showPopup: function(event){
  var popup = document.getElementById('popup');
  popup.style.left = event.clientX + 'px';
  popup.style.top = event.clientY + 'px';
  popup.className = 'reveal';
 }
};
addListener(element,'click',function(event){
 MyApplication.handleClick(event);
});

2、不要分發(fā)事件對(duì)象

應(yīng)用邏輯不應(yīng)當(dāng)依賴于event對(duì)象來(lái)正確完成功能，方法接口應(yīng)該表明哪些數(shù)據(jù)是必要的。代碼不清晰就會(huì)導(dǎo)致bug。最好的辦法是讓事件處理程序使用event對(duì)象來(lái)處理事件，然后拿到所有需要的數(shù)據(jù)傳給應(yīng)用邏輯

//改進(jìn)的做法
var MyApplication = {
 handleClick: function(event){
  this.showPopup(event.clientX,event.clientY);
 },
 showPopup: function(x,y){
  var popup = document.getElementById('popup');
  popup.style.left = x + 'px';
  popup.style.top = y + 'px';
  popup.className = 'reveal';
 }
};
addListener(element,'click',function(event){
 MyApplication.handleClick(event);
});

當(dāng)處理事件時(shí)，最好讓事件程序成為接觸到event對(duì)象的唯一的函數(shù)。事件處理程序應(yīng)當(dāng)在進(jìn)入應(yīng)用邏輯之前針對(duì)event對(duì)象執(zhí)行任何必要的操作，包括阻止事件冒泡，都應(yīng)當(dāng)直接包含在事件處理程序中

//改進(jìn)的做法
var MyApplication = {
 handleClick: function(event){
  event.preventDefault();
  event.stopPropagation();
  this.showPopup(event.clientX,event.clientY);
 },
 showPopup: function(x,y){
  var popup = document.getElementById('popup');
  popup.style.left = x + 'px';
  popup.style.top = y + 'px';
  popup.className = 'reveal';
 }
};
addListener(element,'click',function(event){
 MyApplication.handleClick(event);
});

四、配置數(shù)據(jù)

代碼無(wú)非是定義一些指令的集合讓計(jì)算機(jī)來(lái)執(zhí)行。我們常常將數(shù)據(jù)傳入計(jì)算機(jī)，由指令對(duì)數(shù)據(jù)進(jìn)行操作，并最終產(chǎn)生一個(gè)結(jié)果。當(dāng)不得不修改數(shù)據(jù)時(shí)，可能會(huì)帶來(lái)一些不必要的風(fēng)險(xiǎn)。應(yīng)當(dāng)將關(guān)鍵數(shù)據(jù)從代碼中抽離出來(lái) 

配置數(shù)據(jù)是指導(dǎo)在應(yīng)用中寫死的值，且將來(lái)可能會(huì)被修改，包括如下內(nèi)容

1、URL

2、需要展現(xiàn)給用戶的字符串

3、重復(fù)的值

4、配置項(xiàng)

5、任何可能發(fā)生變更的值

下面是未處理配置數(shù)據(jù)的做法

//不好的做法
function validate(value){
 if(!value){
  alert('Invalid value');
  location.href="/errors/invalid.php" rel="external nofollow" ;
 }
}
function toggleSelected(element){
 if(hasClass(element,'selected')){
  removeClass(element,'selected');
 }else{
  addClass(element,'selected');
 }
}

下面代碼中將配置數(shù)據(jù)保存在了config對(duì)象中，config對(duì)象的每個(gè)屬性都保存了一個(gè)數(shù)據(jù)片段，每個(gè)屬性名都有前綴，用以表明數(shù)據(jù)的類型(MSG表示展現(xiàn)給用戶的信息，URL表示網(wǎng)絡(luò)地址，CSS表示這是一個(gè)className)。當(dāng)然，也可以將整個(gè)config對(duì)象放到單獨(dú)的文件中，這樣對(duì)配置數(shù)據(jù)的修改可以完全和使用這個(gè)數(shù)據(jù)的代碼隔離開(kāi)來(lái)

//好的做法
var config = {
 MSG_INVALID_VALUE: 'Invalid value',
 URL_INVALID:'/errors/invalid.php',
 CSS_SELECTED:'selected'
}
function validate(value){
 if(!value){
  alert(config.MSG_INVALID_VALUE);
  location.href=config.URL_INVALID;
 }
}
function toggleSelected(element){
 if(hasClass(element,config.CSS_SELECTED)){
  removeClass(element,config.CSS_SELECTED);
 }else{
  addClass(element,config.CSS_SELECTED);
 }
}

五、選擇器優(yōu)化

將選擇器選擇到的元素作為對(duì)象的靜態(tài)屬性集中到一個(gè)地方統(tǒng)一管理

initializeElements: function() {
  var eles = app.Eles;
  for (var name in eles) {
    if (eles.hasOwnProperty(name)) {
      this[name] = $(eles[name]);
    }
  }
}

下面是一個(gè)例子

//好的做法
app.Eles = {
  widgetDiv: ".left-widget div",
  inputResize: '.input-resize',
  hr: '.hr',
  txt: '.input-group-btn button',
  cus: '#paper-type-cus',
  hid: '#hidden',
  mainCon: '#mainCon',
  rulerX: '.ruler-x',
  rulerY: '.ruler-y',
};

六、函數(shù)優(yōu)化

提煉函數(shù)

在javascript開(kāi)發(fā)中，大部分時(shí)間都在與函數(shù)打交道，所以希望這些函數(shù)有著良好的命名，函數(shù)體內(nèi)包含的邏輯清晰明了。如果一個(gè)函數(shù)過(guò)長(zhǎng)，不得不加上若干注釋才能讓這個(gè)函數(shù)顯得易讀一些，那這些函數(shù)就很有必要進(jìn)行重構(gòu)

如果在函數(shù)中有一段代碼可以被獨(dú)立出來(lái)，那最好把這些代碼放進(jìn)另外一個(gè)獨(dú)立的函數(shù)中。這是一種很常見(jiàn)的優(yōu)化工作，這樣做的好處主要有以下幾點(diǎn)

1、避免出現(xiàn)超大函數(shù)

2、獨(dú)立出來(lái)的函數(shù)有助于代碼復(fù)用

3、獨(dú)立出來(lái)的函數(shù)更容易被覆寫

4、獨(dú)立出來(lái)的函數(shù)如果擁有一個(gè)良好的命名，它本身就起到了注釋的作用

比如在一個(gè)負(fù)責(zé)取得用戶信息的函數(shù)里面，還需要打印跟用戶信息有關(guān)的log，那么打印log的語(yǔ)句就可以被封裝在一個(gè)獨(dú)立的函數(shù)里：

var getUserInfo = function(){
  ajax( 'http:// xxx.com/userInfo', function( data ){
    console.log( 'userId: ' + data.userId );
    console.log( 'userName: ' + data.userName );
    console.log( 'nickName: ' + data.nickName );
  });
};
//改成：
var getUserInfo = function(){
  ajax( 'http:// xxx.com/userInfo', function( data ){
    printDetails( data );
  });
};
var printDetails = function( data ){
  console.log( 'userId: ' + data.userId );
  console.log( 'userName: ' + data.userName );
  console.log( 'nickName: ' + data.nickName );
};

盡量減少參數(shù)數(shù)量

如果調(diào)用一個(gè)函數(shù)時(shí)需要傳入多個(gè)參數(shù)，那這個(gè)函數(shù)是讓人望而生畏的，必須搞清楚這些參數(shù)代表的含義，必須小心翼翼地把它們按照順序傳入該函數(shù)。在實(shí)際開(kāi)發(fā)中，向函數(shù)傳遞參數(shù)不可避免，但應(yīng)該盡量減少函數(shù)接收的參數(shù)數(shù)量。下面舉個(gè)非常簡(jiǎn)單的示例。有一個(gè)畫圖函數(shù)draw，它現(xiàn)在只能繪制正方形，接收了3個(gè)參數(shù)，分別是圖形的width、heigth以及square：

var draw = function(width,height,square){};

但實(shí)際上正方形的面積是可以通過(guò)width和height計(jì)算出來(lái)的，于是我們可以把參數(shù)square從draw函數(shù)中去掉：

var draw = function( width, height ){
  var square = width * height;
};

假設(shè)以后這個(gè)draw函數(shù)開(kāi)始支持繪制圓形，需要把參數(shù)width和height換成半徑radius，但圖形的面積square始終不應(yīng)該由客戶傳入，而是應(yīng)該在draw函數(shù)內(nèi)部，由傳入的參數(shù)加上一定的規(guī)則計(jì)算得來(lái)。此時(shí)，可以使用策略模式，讓draw函數(shù)成為一個(gè)支持繪制多種圖形的函數(shù)

傳遞對(duì)象參數(shù)代替過(guò)長(zhǎng)的參數(shù)列表

有時(shí)候一個(gè)函數(shù)有可能接收多個(gè)參數(shù)，而參數(shù)的數(shù)量越多，函數(shù)就越難理解和使用。使用該函數(shù)的人首先得搞明白全部參數(shù)的含義，在使用的時(shí)候，還要小心翼翼，以免少傳了某個(gè)參數(shù)或者把兩個(gè)參數(shù)搞反了位置。如果想在第3個(gè)參數(shù)和第4個(gè)參數(shù)之中增加一個(gè)新的參數(shù)，就會(huì)涉及許多代碼的修改，代碼如下：

var setUserInfo = function( id, name, address, sex, mobile, qq ){
  console.log( 'id= ' + id );
  console.log( 'name= ' +name );
  console.log( 'address= ' + address );
  console.log( 'sex= ' + sex );
  console.log( 'mobile= ' + mobile );
  console.log( 'qq= ' + qq );
};
setUserInfo( 1314, 'xiaohuochai', 'beijing', 'male', '150********', 121631835 );

這時(shí)可以把參數(shù)都放入一個(gè)對(duì)象內(nèi)，然后把該對(duì)象傳入setUserInfo函數(shù)，setUserInfo函數(shù)需要的數(shù)據(jù)可以自行從該對(duì)象里獲取。現(xiàn)在不用再關(guān)心參數(shù)的數(shù)量和順序，只要保證參數(shù)對(duì)應(yīng)的key值不變就可以了：

  var setUserInfo = function( obj ){
    console.log( 'id= ' + obj.id );
    console.log( 'name= ' + obj.name );
    console.log( 'address= ' + obj.address );
    console.log( 'sex= ' + obj.sex );
    console.log( 'mobile= ' + obj.mobile );
    console.log( 'qq= ' + obj.qq );
  };
  setUserInfo({
    id: 1314,
    name: 'xiaohuochai',
    address: 'beijing',
    sex: 'male',
    mobile: '150********',
    qq: 121631835
  });

七、條件優(yōu)化

合并條件片段

如果一個(gè)函數(shù)體內(nèi)有一些條件分支語(yǔ)句，而這些條件分支語(yǔ)句內(nèi)部散布了一些重復(fù)的代碼，那么就有必要進(jìn)行合并去重工作。假如有一個(gè)分頁(yè)函數(shù)paging，該函數(shù)接收一個(gè)參數(shù)currPage，currPage表示即將跳轉(zhuǎn)的頁(yè)碼。在跳轉(zhuǎn)之前，為防止currPage傳入過(guò)小或者過(guò)大的數(shù)字，要手動(dòng)對(duì)它的值進(jìn)行修正，詳見(jiàn)如下偽代碼：

var paging = function( currPage ){
  if ( currPage <= 0 ){
    currPage = 0;
    jump( currPage ); // 跳轉(zhuǎn)
  }else if ( currPage >= totalPage ){
    currPage = totalPage;
    jump( currPage ); // 跳轉(zhuǎn)
  }else{
    jump( currPage ); // 跳轉(zhuǎn)
  }
};

可以看到，負(fù)責(zé)跳轉(zhuǎn)的代碼jump(currPage)在每個(gè)條件分支內(nèi)都出現(xiàn)了，所以完全可以把這句代碼獨(dú)立出來(lái)：

var paging = function( currPage ){
  if ( currPage <= 0 ){
    currPage = 0;
  }else if ( currPage >= totalPage ){
    currPage = totalPage;
  }
  jump( currPage ); // 把jump 函數(shù)獨(dú)立出來(lái)
};

把條件分支語(yǔ)句提煉成函數(shù)

在程序設(shè)計(jì)中，復(fù)雜的條件分支語(yǔ)句是導(dǎo)致程序難以閱讀和理解的重要原因，而且容易導(dǎo)致一個(gè)龐大的函數(shù)。假設(shè)現(xiàn)在有一個(gè)需求是編寫一個(gè)計(jì)算商品價(jià)格的getPrice函數(shù)，商品的計(jì)算只有一個(gè)規(guī)則：如果當(dāng)前正處于夏季，那么全部商品將以8折出售。代碼如下：

var getPrice = function( price ){
  var date = new Date();
  if ( date.getMonth() >= 6 && date.getMonth() <= 9 ){ // 夏天
    return price * 0.8;
  }
  return price;
};

觀察這句代碼：

date.getMonth()>=6&&date.getMonth()<=9

這句代碼要表達(dá)的意思很簡(jiǎn)單，就是判斷當(dāng)前是否正處于夏天（7~10月）。盡管這句代碼很短小，但代碼表達(dá)的意圖和代碼自身還存在一些距離，閱讀代碼的人必須要多花一些精力才能明白它傳達(dá)的意圖。其實(shí)可以把這句代碼提煉成一個(gè)單獨(dú)的函數(shù)，既能更準(zhǔn)確地表達(dá)代碼的意思，函數(shù)名本身又能起到注釋的作用。代碼如下：

var isSummer = function(){
  var date = new Date();
  return date.getMonth() >= 6 && date.getMonth() <= 9;
};
var getPrice = function( price ){
  if ( isSummer() ){ // 夏天
    return price * 0.8;
  }
  return price;
};

提前讓函數(shù)退出代替嵌套條件分支

許多程序員都有這樣一種觀念：“每個(gè)函數(shù)只能有一個(gè)入口和一個(gè)出口。”現(xiàn)代編程語(yǔ)言都會(huì)限制函數(shù)只有一個(gè)入口。但關(guān)于“函數(shù)只有一個(gè)出口”，往往會(huì)有一些不同的看法。下面這段偽代碼是遵守“函數(shù)只有一個(gè)出口的”的典型代碼：

var del = function( obj ){
  var ret;
  if ( !obj.isReadOnly ){ // 不為只讀的才能被刪除
    if ( obj.isFolder ){ // 如果是文件夾
      ret = deleteFolder( obj );
    }else if ( obj.isFile ){ // 如果是文件
      ret = deleteFile( obj );
    }
  }
  return ret;
};

嵌套的條件分支語(yǔ)句絕對(duì)是代碼維護(hù)者的噩夢(mèng)，對(duì)于閱讀代碼的人來(lái)說(shuō)，嵌套的if、else語(yǔ)句相比平鋪的if、else，在閱讀和理解上更加困難。嵌套的條件分支往往是由一些深信“每個(gè)函數(shù)只能有一個(gè)出口的”程序員寫出的。但實(shí)際上，如果對(duì)函數(shù)的剩余部分不感興趣，那就應(yīng)該立即退出。引導(dǎo)閱讀者去看一些沒(méi)有用的else片段，只會(huì)妨礙他們對(duì)程序的理解

于是可以挑選一些條件分支，在進(jìn)入這些條件分支之后，就立即讓這個(gè)函數(shù)退出。要做到這一點(diǎn)，有一個(gè)常見(jiàn)的技巧，即在面對(duì)一個(gè)嵌套的if分支時(shí)，可以把外層if表達(dá)式進(jìn)行反轉(zhuǎn)。重構(gòu)后的del函數(shù)如下：

var del = function( obj ){
  if ( obj.isReadOnly ){ // 反轉(zhuǎn)if 表達(dá)式
    return;
  }
  if ( obj.isFolder ){
    return deleteFolder( obj );
  }
  if ( obj.isFile ){
    return deleteFile( obj );
  }
};

八、循環(huán)優(yōu)化

合理使用循環(huán)

在函數(shù)體內(nèi)，如果有些代碼實(shí)際上負(fù)責(zé)的是一些重復(fù)性的工作，那么合理利用循環(huán)不僅可以完成同樣的功能，還可以使代碼量更少。下面有一段創(chuàng)建XHR對(duì)象的代碼，為了簡(jiǎn)化示例，只考慮版本9以下的IE瀏覽器，代碼如下：

var createXHR = function(){
  var xhr;
  try{
    xhr = new ActiveXObject( 'MSXML2.XMLHttp.6.0' );
  }catch(e){
    try{
      xhr = new ActiveXObject( 'MSXML2.XMLHttp.3.0' );
    }catch(e){
      xhr = new ActiveXObject( 'MSXML2.XMLHttp' );
    }
  }
  return xhr;
};
var xhr = createXHR();

下面靈活地運(yùn)用循環(huán)，可以得到跟上面代碼一樣的效果：

var createXHR = function(){
  var versions= [ 'MSXML2.XMLHttp.6.0ddd', 'MSXML2.XMLHttp.3.0', 'MSXML2.XMLHttp' ];
  for ( var i = 0, version; version = versions[ i++ ]; ){
    try{
      return new ActiveXObject( version );
    }catch(e){
    }
  }
};
var xhr = createXHR();

用return退出多重循環(huán)

假設(shè)在函數(shù)體內(nèi)有一個(gè)兩重循環(huán)語(yǔ)句，需要在內(nèi)層循環(huán)中判斷，當(dāng)達(dá)到某個(gè)臨界條件時(shí)退出外層的循環(huán)。大多數(shù)時(shí)候會(huì)引入一個(gè)控制標(biāo)記變量：

var func = function(){
  var flag = false;
  for ( var i = 0; i < 10; i++ ){
    for ( var j = 0; j < 10; j++ ){
      if ( i * j >30 ){
        flag = true;
        break;
      }
    }
    if ( flag === true ){
      break;
    }
  }
};

第二種做法是設(shè)置循環(huán)標(biāo)記：

var func = function(){
  outerloop:
  for ( var i = 0; i < 10; i++ ){
    innerloop:
    for ( var j = 0; j < 10; j++ ){
      if ( i * j >30 ){
        break outerloop;
      }
    }
  }
};

這兩種做法無(wú)疑都讓人頭暈?zāi)垦?，更?jiǎn)單的做法是在需要中止循環(huán)的時(shí)候直接退出整個(gè)方法：

var func = function(){
  for ( var i = 0; i < 10; i++ ){
    for ( var j = 0; j < 10; j++ ){
      if ( i * j >30 ){
        return;
      }
    }
  }
};

當(dāng)然用return直接退出方法會(huì)帶來(lái)一個(gè)問(wèn)題，如果在循環(huán)之后還有一些將被執(zhí)行的代碼呢？如果提前退出了整個(gè)方法，這些代碼就得不到被執(zhí)行的機(jī)會(huì)：

var func = function(){
  for ( var i = 0; i < 10; i++ ){
    for ( var j = 0; j < 10; j++ ){
      if ( i * j >30 ){
        return;
      }
    }
  }
  console.log( i ); // 這句代碼沒(méi)有機(jī)會(huì)被執(zhí)行
};

為了解決這個(gè)問(wèn)題，可以把循環(huán)后面的代碼放到return后面，如果代碼比較多，就應(yīng)該把它們提煉成一個(gè)單獨(dú)的函數(shù)：

var print = function( i ){
  console.log( i );
};
var func = function(){
  for ( var i = 0; i < 10; i++ ){
    for ( var j = 0; j < 10; j++ ){
      if ( i * j >30 ){
        return print( i );
      }
    }
  }
};

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“JS如何優(yōu)化代碼”這篇文章對(duì)大家有幫助，同時(shí)也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來(lái)學(xué)習(xí)!