『手撕Vue-CLI』函式柯里化最佳化程式碼

BNTang發表於2024-05-30
Vue函式

開篇

在上一篇文章中，給 nue-cli 新增了拉取版本號的功能，這一次來最佳化一下程式碼，使用函式柯里化的方式來最佳化程式碼。

實現

函式柯里化

函式柯里化是一種將使用多個引數的一個函式轉換成一系列使用一個引數的函式的技術。

在進行改寫之前，首先給大家簡單介紹一下函式柯里化，寫一個簡單的例子來演示一下。

function demo(a, b) {
    return a + b;
}

const res = demo(1, 2);
console.log(res);

這是一個簡單的函式，接收兩個引數，然後返回兩個引數的和，除了這種寫法其實還可以改寫成這樣：

function demo(a) {
    return function (b) {
        return a + b;
    };
}

這個時候呢，該如何呼叫呢？首先是呼叫 demo 方法，傳入一個引數，然後返回一個函式，再呼叫這個函式，傳入另一個引數，最後得到結果。

const res = demo(1)(2);
console.log(res);

瞭解了這種寫法之後，就可以使用函式柯里化來最佳化程式碼了。

最佳化控制檯載入效果

為什麼是要最佳化控制檯載入效果呢？因為我發現後續可能對控制檯載入效果的需求會比較多，所以就把這個功能單獨提取出來。

例如像之前拉取模板名稱，拉取版本號，拉取模板等等，都需要控制檯載入效果，所以就把這個功能單獨提取出來，以後需要的時候直接呼叫就可以了。

const waitLoading = async ( message, fn) => {
    const spinner = ora(message).start();
    const result = await fn();
    spinner.succeed(`${message} successfully`);
    return result;
}

這個函式接收兩個引數，第一個引數是 message，第二個引數是 fn，message 是控制檯載入效果的提示資訊，fn 是一個非同步函式，這個函式會返回一個 Promise 物件，然後在函式內部呼叫 ora，顯示載入效果，然後呼叫 fn，等待 fn 執行完畢，最後關閉載入效果。

改造獲取模板名稱

主要就是將 fetchRepoList 中透過 ora 顯示載入效果的程式碼刪除掉，然後呼叫 waitLoading 函式，將 fetchRepoList 傳入進去，這樣就改造完成了。

const fetchRepoListData = await waitLoading('downloading template names...', fetchRepoList)();

改造獲取版本號

這裡改造其實是一樣的，不過這裡有一個小問題，就是 getTemplateTags 這個函式是需要傳入一個引數的，所以需要對 waitLoading 進行改造。

const waitLoading =  ( message, fn) => async (...args) => {
    const spinner = ora(message).start();
    const result = await fn(...args);
    spinner.succeed(`${message} successfully`);
    return result;
}

這回的 waitLoading 方法與之前的不同地方就是在新增了一個 ...args 引數，這個引數是用來接收 fn 函式的引數的，然後在呼叫 fn 的時候將引數傳入進去。

接下來就是改造呼叫 getTemplateTags 的地方了。

const fetchTemplateTags = await waitLoading('downloading template tags...', getTemplateTags)(template);

由於改造了 waitLoading 方法，之前呼叫 waitLoading 方法的地方也需要進行改造，就是多加一個呼叫過程。

好，大致就是這樣，本篇文章就到這裡了，下一篇文章繼續完善 nue-cli。

相關文章