2021年7月24日 星期六

jQuery.ajax處理繼續響應:“success:”vs“.done”?

success一直是jQuery成功回調的傳統名稱,定義為ajax調用中的一個選項。但是,由於$.Deferreds和更複雜的回調的實現,done是實現成功回調的首選方法,因為它可以在任何deferred上調用。


例如,成功:

$.ajax({
  url: '/',
  success: function(data) {}
});

例如,完成:

$.ajax({url: '/'}).done(function(data) {});

關於done的好處是$.ajax的返回值現在是一個延遲的promise,可以綁定到應用程序中的任何其他位置。所以,假設你想從幾個不同的地方進行這個ajax調用。而不是將成功函數作為執行此ajax調用的函數的選項傳遞,您可以讓函數返回$.ajax本身並使用done,fail,then或其他任何內容綁定回調。請注意,always是一個回調,無論請求成功還是失敗,它都將運行。 done僅在成功時觸發。

例如:

function xhr_get(url) {
  return $.ajax({
    url: url,
    type: 'get',
    dataType: 'json',
    beforeSend: showLoadingImgFn
  })
  .always(function() {
    // remove loading image maybe
  })
  .fail(function() {
    // handle request failures
  });

}

xhr_get('/index').done(function(data) {
  // do stuff with index data
});

xhr_get('/id').done(function(data) {
  // do stuff with id data
});

在可維護性方面,這一點的一個重要好處是,您已將ajax機制包裝在特定於應用程序的函數中。如果你決定將來需要$.ajax調用以不同的方式運行,或者你使用不同的ajax方法,或者你不再使用jQuery,你只需要更改xhr_get定義(確保返回一個承諾或至少一種done方法,在上述例子的情況下)。整個應用程序中的所有其他引用可以保持不變。


使用$.Deferred可以做更多(更酷)的事情,其中??一個是使用then來觸發服務器報告的錯誤,即使$.ajax請求本身成功。例如:

function xhr_get(url) {
  return $.ajax({
    url: url,
    type: 'get',
    dataType: 'json'
  })
  .then(function(data) {
    return data.responseCode != 200 ?
      $.Deferred().reject( data ) :
      data;
  })
  .fail(function(data) {
    if ( data.responseCode )
      console.log( data.responseCode );
  });
}

xhr_get('/index').done(function(data) {
  // will not run if json returned from ajax has responseCode other than 200
});

2020年10月19日 星期一

《面試官別再問》JavaScript 動態建立變數的方法,怎麼動態生成js變數

JavaScript 動態建立變數:低調務實的選擇與眉角

各位同鄉、各位朋友,大家好!今天想跟大家聊聊一個在寫 JavaScript 時,有時候會遇到的情境:「欸,我這個變數的名稱,好像不能一開始就決定耶,得等到程式跑起來才知道。那這種時候,我該怎麼辦呢?」這就是我們今天要談的「動態建立變數」。

講到動態建立變數,有些人可能馬上會想到一些比較「刺激」的方法,但咱們台灣人嘛,做事情講求的是效率、穩定,還有最重要的「不要出包」。所以,今天就來跟大家分享幾招,有推薦的,也有那種…嗯,建議您多想兩次的。


最推薦:把變數當成物件的「屬性」

這招可以說是動態建立變數的「模範生」,安全又好用,建議您直接學起來。

其實很簡單,就是我們不要直接去「宣告」一個新的變數,而是把這些「動態變數」當作某個物件裡面的東西

假設我們有個情境,要根據使用者輸入的「產品名稱」來儲存一些資料:

JavaScript
// 建立一個空物件,專門用來放我們的動態變數
const productData = {};

// 假設這是從使用者那邊拿到的資料
const userProductName = "智慧型手機";
const userProductPrice = 12900;
const userProductStock = 50;

// 現在,我們把這些資料「掛」到 productData 這個物件下面
// productData.智慧型手機 = 12900; 這樣寫也行,但如果是變數名稱,就要用中括號
productData[userProductName] = {
  price: userProductPrice,
  stock: userProductStock
};

console.log(productData["智慧型手機"]);
// 輸出: { price: 12900, stock: 50 }

// 如果要再多加一個產品呢?照做就好!
const anotherProductName = "無線耳機";
productData[anotherProductName] = {
  price: 3500,
  stock: 200
};

console.log(productData["無線耳機"]);
// 輸出: { price: 3500, stock: 200 }

這樣做的好處非常多:

  • 乾淨俐落:所有的動態資料都集中在 productData 這個物件裡面,一目瞭然,不會讓您的程式碼變得亂七八糟。

  • 管理方便:想知道有哪些動態變數?直接看 productData 就好。

  • 安全無虞:跟某些危險的作法比起來,這種方式非常安全,不用擔心被惡意程式碼搞破壞。

  • 彈性十足:搭配 JavaScript 的物件操作,您想怎麼增刪改查,都輕輕鬆鬆。


次選項:window 物件 (只在瀏覽器裡面用得到)

如果您的 JavaScript 程式碼是在瀏覽器裡面跑,而且您真的、真的很想讓某些變數變成「全域變數」(就是整個網頁都抓得到的變數),那可以考慮用 window 物件。

在瀏覽器環境下,您平常宣告的 var 變數,其實都會偷偷地掛到 window 這個全域物件底下。所以,您可以這樣做:

JavaScript
// 注意:這段程式碼只在瀏覽器環境下有效喔!
if (typeof window !== 'undefined') {
  const variableName = "myGlobalData";
  const variableValue = "我是全域資料!";

  window[variableName] = variableValue;

  console.log(window.myGlobalData); // 輸出: 我是全域資料!
  console.log(myGlobalData);      // 輸出: 我是全域資料! (因為它變成全域變數了)
}

不過,這種方法有幾個小缺點,還是要提醒一下:

  • 只限定瀏覽器:您在 Node.js 或其他伺服器環境下寫程式,這招就用不上了。

  • 容易「弄髒」全域環境:全域變數太多,就像家裡東西堆得到處都是,很容易亂,也可能跟別人寫的程式「撞名」,造成一些意想不到的錯誤。除非必要,不然盡量少用。


千萬要小心:eval() 函數 (不建議使用!)

最後,我們要來聊聊一個很常被提到,但我們台灣人講求務實,會強烈建議您不要隨便使用的方法:eval() 函數。

eval() 可以把一個字串當成 JavaScript 程式碼來執行。所以,您當然可以這樣動態建立變數:

JavaScript
const myDynamicVarName = "dynamicMessage";
const myDynamicVarValue = "這段文字是動態生成的!";

// 千萬小心!這行程式碼非常危險!
eval(`var ${myDynamicVarName} = "${myDynamicVarValue}";`);

console.log(dynamicMessage); // 輸出: 這段文字是動態生成的!

為什麼要強調「千萬小心」呢?理由很簡單:

  • 資安大破口:如果這個字串是從外面(例如使用者輸入、網路傳輸)來的,裡面只要夾帶一點惡意的程式碼,eval() 就會照單全收執行下去,等於您把您的網站或系統,直接開了一個大門給駭客。這就是資安上常說的「XSS 攻擊」其中一種手法。

  • 效能打折扣eval() 在執行的時候,還要先解析、編譯您給的字串,這會比直接執行程式碼慢很多。

  • 除錯很痛苦:程式碼出錯時,您很難追蹤到底哪一行是 eval() 產生的問題。

  • 作用域問題eval() 執行的程式碼會「繼承」它被呼叫時的環境,這有時候會產生一些您意想不到的行為。

所以,除非您非常、非常、非常確定您知道自己在做什麼,而且沒有任何其他替代方案,否則請務必避免使用 eval()


結語:務實選擇,安全第一

總結來說,JavaScript 動態建立變數,最務實、最安全的做法,就是把變數當成物件的屬性來操作。這種方法不僅程式碼好管理,也能避免掉許多潛在的問題。

至於 window 物件,雖然可以用,但請考慮是否真的有「全域」的需求,並留意可能造成的全域污染。而 eval(),除非您是資安專家,否則真的建議您高抬貴手,別碰它為妙。

希望這篇小小的分享,能幫助大家在寫 JavaScript 的時候,能更順手、更安全。有任何問題或想法,都歡迎在下面留言交流喔!

當工程師的價值不再只是寫 Code,公司還看得見你的貢獻嗎?

 最近跟 AI、軟體開發流程轉變相關的討論越來越多。 很多人關注的是: AI 會不會取代工程師? 未來還需不需要寫 Code? 工程師應該學什麼新技能? 但有一個更現實的問題,可能很多工程師每天都正在面對: 當你的工作價值不再只是「寫多少 Code」,公司是...