The Will Will Web

記載著 Will 在網路世界的學習心得與技術分享

如何利用 ChatGPT 有效率的將網站中所有 jQuery 轉換成 VanillaJS

我最近把我的部落格公司官網jQuery 完整移除,全部都改用 VanillaJS 來實現原本的功能,原本以為網站會需要改很多地方,但實際動手下去實現之後才發現其實也沒那麼難,只要你有強大的工具在手,這件工作其實很簡單,這篇文章我就來分享我的方法。

AI

我的方法真的超簡單,就是使用 ChatGPT 來轉換,你只要學習一些「咒語」就可以讓這個 AI 人工智能引擎幫你寫 Code,真的不誇張,我到目前為止,轉換成功率高達 98%,幾乎沒有寫錯的時候!👍

以下是我轉換過的幾個範例:

  1. 自動隱藏我的部落格右側的內容

    我的部落格一直有個隱藏版的密技,在網頁開啟後按下 fCtrl+B 就可以隱藏部落格右側的內容,讓文章可以「全版面」檢視,提升閱讀體驗,其中最核心的程式碼如下,有用到一點點 jQuery,難度不高:

    window.toggleAside = (e) => {
      if (e) e.preventDefault();
      const currentUrl = new URL(window.location.href);
      const searchParams = new URLSearchParams(currentUrl.search);
      if (jQuery('section.content-wrapper').hasClass('col-md-8')) {
        searchParams.set('full', '1');
        currentUrl.search = searchParams.toString();
        window.history.replaceState(null, '', currentUrl.toString());
        jQuery('aside').hide()
        jQuery('section.content-wrapper').removeClass('col-md-8').addClass('col-md-12')
      } else {
        searchParams.delete('full');
        currentUrl.search = searchParams.toString();
        window.history.replaceState(null, '', currentUrl.toString());
        jQuery('section.content-wrapper').removeClass('col-md-12').addClass('col-md-8')
        jQuery('aside').show()
      }
    }
    

    我的咒語是:

    請幫我把這段程式碼的 jQuery 程式碼都改成 VanillaJS,不用解釋,給我 code 就好,也請順便幫我加上註解:
    
    <<貼上你的程式碼>>
    

    結果如下:

    window.toggleAside = (e) => {
      // Prevent the default action of the event
      if (e) e.preventDefault();
    
      // Get the current URL and its search parameters
      const currentUrl = new URL(window.location.href);
      const searchParams = new URLSearchParams(currentUrl.search);
    
      // Select the content wrapper and aside elements
      const contentWrapper = document.querySelector("section.content-wrapper");
      const aside = document.querySelector("aside");
    
      // Check if the content wrapper has the class "col-md-8"
      if (contentWrapper.classList.contains("col-md-8")) {
        // Add the "full" parameter to the URL
        searchParams.set("full", "1");
        currentUrl.search = searchParams.toString();
        window.history.replaceState(null, "", currentUrl.toString());
    
        // Hide the aside element and update the content wrapper's class
        aside.style.display = "none";
        contentWrapper.classList.remove("col-md-8");
        contentWrapper.classList.add("col-md-12");
      } else {
        // Remove the "full" parameter from the URL
        searchParams.delete("full");
        currentUrl.search = searchParams.toString();
        window.history.replaceState(null, "", currentUrl.toString());
    
        // Show the aside element and update the content wrapper's class
        aside.style.display = "block";
        contentWrapper.classList.remove("col-md-12");
        contentWrapper.classList.add("col-md-8");
      }
    };
    

    他是真的看的懂 jQuery 程式碼!🔥

  2. 透過 $.ajax 送出表單資料到後端

    公司官網可以透過每頁下方的「聯絡我們」留言給我們,其表單送出是透過 jQuery 的 $.ajax 完成的,程式碼如下:

    $("#mainContactForm").submit(function (event) {
        var area = document.querySelector(".contact-fixed-container");
        event.preventDefault();
        updateRecaptchaToken((token) => {
            $.ajax({
                url: "/contact",
                method: "post",
                data: $('#mainContactForm').serialize(),
                processData: false,
                contentType: false,
                success: function (res) {
                    area.classList.add("active");
                    setTimeout(() => {
                        area.classList.remove("active");
                    }, "1000");
                },
                error: function (jqXHR, textStatus, errorThrown) {
                    alert(jqXHR.responseJSON.message);
                }
            });
        });
    });
    

    我的咒語是:

    請幫我把這段程式碼的 jQuery 程式碼都改成 VanillaJS,其中 $.ajax 的部分改用 fetch API,後端回應如果成功就不用解析結果,如果失敗,要解析 JSON 內容,其中 alert 的部分改用 SweetAlert2,不用解釋,給我 code 就好,也請順便幫我加上註解:
    
    <<貼上你的程式碼>>
    

    結果如下:

    // VanillaJS equivalent of jQuery's submit function
    document.querySelector("#mainContactForm").addEventListener("submit", function(event) {
      var area = document.querySelector(".contact-fixed-container");
      event.preventDefault();
      updateRecaptchaToken((token) => {
        // Use fetch API to make a POST request
        fetch("/contact", {
          method: "post",
          body: new FormData(document.querySelector("#mainContactForm")),
          processData: false,
          contentType: false
        })
        .then(response => {
          // Check if the request is successful
          if (!response.ok) {
            throw response;
          }
          area.classList.add("active");
          setTimeout(() => {
            area.classList.remove("active");
          }, 1000);
        })
        .catch(error => {
          // If request fails, parse the error message from the response
          error.json().then(errorJson => {
            // Use SweetAlert2 to display the error message
            Swal.fire({
              title: 'Error',
              text: errorJson.message,
              icon: 'error',
            });
          });
        });
      });
    });
    

    由於我的後端程式有判斷 X-requested-with: XMLHttpRequest 標頭(HTTP Header),用以識別前端傳來的內容是否為 AJAX 的要求,不過這段 fetch API 呼叫並沒有處理這個部分,所以我再次輸入一個新的「咒語」如下:

    幫我加上 x-requested-with: XMLHttpRequest 標頭
    

    ChatGPT 因為可以記得我曾經輸入過的前後文,所以我不用再次輸入原始碼,他會直接給我一份新的程式碼版本。

    // VanillaJS equivalent of jQuery's submit function
    document.querySelector("#mainContactForm").addEventListener("submit", function(event) {
      var area = document.querySelector(".contact-fixed-container");
      event.preventDefault();
      updateRecaptchaToken((token) => {
        // Use fetch API to make a POST request
        fetch("/contact", {
          method: "post",
          body: new FormData(document.querySelector("#mainContactForm")),
          headers: { 'X-Requested-With': 'XMLHttpRequest' },
          processData: false,
          contentType: false
        })
        .then(response => {
          // Check if the request is successful
          if (!response.ok) {
            throw response;
          }
          area.classList.add("active");
          setTimeout(() => {
            area.classList.remove("active");
          }, 1000);
        })
        .catch(error => {
          // If request fails, parse the error message from the response
          error.json().then(errorJson => {
            // Use SweetAlert2 to display the error message
            Swal.fire({
              title: 'Error',
              text: errorJson.message,
              icon: 'error',
            });
          });
        });
      });
    });
    

    上面這段 Code 很聰明的幫我改用 FormData 取得表單資料,而且當中有一個我自己寫的 updateRecaptchaToken 函式呼叫,他直接透過我的命名判斷出了一個相對正確的註解(命名很重要)。不過,這段程式還是有些問題,其中 processData: falsecontentType: false 這兩個參數是錯誤的,這是 jQuery 專屬的選項設定,fetch API 並沒有。所以我再下一次新的咒語:

    請移除 processData: false 與 contentType: false 參數,這兩個參數不在 fetch API 之中
    

    我的天,程式碼 100% 正確!

    // VanillaJS equivalent of jQuery's submit function
    document.querySelector("#mainContactForm").addEventListener("submit", function(event) {
      var area = document.querySelector(".contact-fixed-container");
      event.preventDefault();
      updateRecaptchaToken((token) => {
        // Use fetch API to make a POST request
        fetch("/contact", {
          method: "post",
          body: new FormData(document.querySelector("#mainContactForm")),
          headers: { 'X-Requested-With': 'XMLHttpRequest' },
        })
        .then(response => {
          // Check if the request is successful
          if (!response.ok) {
            throw response;
          }
          area.classList.add("active");
          setTimeout(() => {
            area.classList.remove("active");
          }, 1000);
        })
        .catch(error => {
          // If request fails, parse the error message from the response
          error.json().then(errorJson => {
            // Use SweetAlert2 to display the error message
            Swal.fire({
              title: 'Error',
              text: errorJson.message,
              icon: 'error',
            });
          });
        });
      });
    });
    

透過上述兩個簡短的例子,相信你也跟我一樣,有被 ChatGPT 的語言模型震懾到,雖說 ChatGPT 目前還沒辦法真的做到 100% 轉換,有些錯誤的地方還是需要人工判斷,且就算相同的「咒語」輸入,他也不見得會回覆你完全相同的結果,但其實這份程式碼還是對我完成「轉換」任務有相當大的幫助,節省了大量的時間!👍

國外最近一個月開始有了個新職缺叫做 Prompt Engineer (提示工程師?),這個工作,就是讓「人類」跟 AI 溝通的專家,透過各種「提示」文字,我稱之為「咒語」,讓 AI 幫我們工作,而且是一些創造性的工作,非常厲害!🔥

但我覺得目前的 Generative AI (可以產生創造性工作的 AI 機器人) 真正能給軟體開發人員帶來的效益,還是那些會下「咒語」的「資深工程師」,如果你現在還處於初學狀態,其實要下出一個優質的咒語其實沒那麼容易。不過,學習下「咒語」絕對比學會「程式設計」來的簡單,對吧?所以不久的將來「軟體開發圈」會變成什麼樣子,老實說我很難預測,但更大幅度的 M 型社會肯定很快就會來臨,善用不同的工具來解決問題,才能站在巨人的肩膀上持續創造價值!🚀

相關連結

留言評論