記錄--九個超級好用的 Javascript 技巧

来源:https://www.cnblogs.com/smileZAZ/archive/2023/05/22/17421257.html
-Advertisement-
Play Games

這裡給大家分享我在網上總結出來的一些知識，希望對大家有所幫助 前言 在實際的開發工作過程中，積累了一些常見又超級好用的 Javascript 技巧和代碼片段，包括整理的其他大神的 JS 使用技巧，今天篩選了 9 個，以供大家參考。 1、動態載入 JS 文件 在一些特殊的場景下，特別是一些庫和框架的開 ...


這裡給大家分享我在網上總結出來的一些知識，希望對大家有所幫助

前言

在實際的開發工作過程中，積累了一些常見又超級好用的 Javascript 技巧和代碼片段，包括整理的其他大神的 JS 使用技巧，今天篩選了 9 個，以供大家參考。

1、動態載入 JS 文件

在一些特殊的場景下，特別是一些庫和框架的開發中，我們有時會去動態的載入 JS 文件並執行，下麵是利用 Promise 進行了簡單的封裝。

function loadJS(files, done) {
  // 獲取head標簽
  const head = document.getElementsByTagName('head')[0];
  Promise.all(files.map(file => {
    return new Promise(resolve => {
      // 創建script標簽並添加到head
      const s = document.createElement('script');
      s.type = "text/javascript";
      s.async = true;
      s.src = file;
      // 監聽load事件，如果載入完成則resolve
      s.addEventListener('load', (e) => resolve(), false);
      head.appendChild(s);
    });
  })).then(done);  // 所有均完成，執行用戶的回調事件
}

loadJS(["test1.js", "test2.js"], () => {
  // 用戶的回調邏輯
});

上面代碼核心有兩點，一是利用 Promise 處理非同步的邏輯，而是利用 script 標簽進行 js 的載入並執行。

2、實現模板引擎

下麵示例用了極少的代碼實現了動態的模板渲染引擎，不僅支持普通的動態變數的替換，還支持包含 for 迴圈，if 判斷等的動態的 JS 語法邏輯，具體實現邏輯在筆者另外一篇文章《面試官問：你能手寫一個模版引擎嗎？》做了非常詳詳盡的說明，感興趣的小伙伴可自行閱讀。

// 這是包含了js代碼的動態模板
var template =
'My avorite sports:' +
'<%if(this.showSports) {%>' +
    '<% for(var index in this.sports) {   %>' +
    '<a><%this.sports[index]%></a>' +
    '<%}%>' +
'<%} else {%>' +
    '<p>none</p>' +
'<%}%>';
// 這是我們要拼接的函數字元串
const code = `with(obj) {
  var r=[];
  r.push("My avorite sports:");
  if(this.showSports) {
    for(var index in this.sports) {
      r.push("<a>");
      r.push(this.sports[index]);
      r.push("</a>");
    }
  } else {
    r.push("<span>none</span>");
  }
  return r.join("");
}`
// 動態渲染的數據
const options = {
  sports: ["swimming", "basketball", "football"],
  showSports: true
}
// 構建可行的函數並傳入參數，改變函數執行時this的指向
result = new Function("obj", code).apply(options, [options]);
console.log(result);

3、利用 reduce 進行數據結構的轉換

有時候前端需要對後端傳來的數據進行轉換，以適配前端的業務邏輯，或者對組件的數據格式進行轉換再傳給後端進行處理，而 reduce 是一個非常強大的工具。

const arr = [
    { classId: "1", name: "張三", age: 16 },
    { classId: "1", name: "李四", age: 15 },
    { classId: "2", name: "王五", age: 16 },
    { classId: "3", name: "趙六", age: 15 },
    { classId: "2", name: "孔七", age: 16 }
];

groupArrayByKey(arr, "classId");

function groupArrayByKey(arr = [], key) {
    return arr.reduce((t, v) => (!t[v[key]] && (t[v[key]] = []), t[v[key]].push(v), t), {})
}

很多很複雜的邏輯如果用 reduce 去處理，都非常的簡潔。

4、添加預設值

有時候一個方法需要用戶傳入一個參數，通常情況下我們有兩種處理方式，如果用戶不傳，我們通常會給一個預設值，亦或是用戶必須要傳一個參數，不傳直接拋錯。

function double() {
    return value *2
}

// 不傳的話給一個預設值0
function double(value = 0) {
    return value * 2
}

// 用戶必須要傳一個參數，不傳參數就拋出一個錯誤

const required = () => {
    throw new Error("This function requires one parameter.")
}
function double(value = required()) {
    return value * 2
}

double(3) // 6
double() // throw Error

5、函數只執行一次

有些情況下我們有一些特殊的場景，某一個函數只允許執行一次，或者綁定的某一個方法只允許執行一次。

export function once (fn) {
  // 利用閉包判斷函數是否執行過
  let called = false
  return function () {
    if (!called) {
      called = true
      fn.apply(this, arguments)
    }
  }
}

6、實現 Curring

JavaScript 的柯里化是指將接受多個參數的函數轉換為一系列只接受一個參數的函數的過程。這樣可以更加靈活地使用函數，減少重覆代碼，並增加代碼的可讀性。

function curry(fn) {
  return function curried(...args) {
    if (args.length >= fn.length) {
      return fn.apply(this, args);
    } else {
      return function(...args2) {
        return curried.apply(this, args.concat(args2));
      };
    }
  };
}

function add(x, y) {
  return x + y;
}

const curriedAdd = curry(add);

console.log(curriedAdd(1)(2)); // 輸出 3
console.log(curriedAdd(1, 2)); // 輸出 3

通過柯里化，我們可以將一些常見的功能模塊化，例如驗證、緩存等等。這樣可以提高代碼的可維護性和可讀性，減少出錯的機會。

7、實現單例模式

JavaScript 的單例模式是一種常用的設計模式，它可以確保一個類只有一個實例，並提供對該實例的全局訪問點，在 JS 中有廣泛的應用場景，如購物車，緩存對象，全局的狀態管理等等。

let cache;
class A {
  // ...
}

function getInstance() {
  if (cache) return cache;
  return cache = new A();
}

const x = getInstance();
const y = getInstance();

console.log(x === y); // true

8、實現 CommonJs 規範

CommonJS 規範的核心思想是將每個文件都看作一個模塊，每個模塊都有自己的作用域，其中的變數、函數和對象都是私有的，不能被外部訪問。要訪問模塊中的數據，必須通過導出（exports）和導入（require）的方式。

// id：完整的文件名
const path = require('path');
const fs = require('fs');
function Module(id){
    // 用來唯一標識模塊
    this.id = id;
    // 用來導出模塊的屬性和方法
    this.exports = {};
}

function myRequire(filePath) {
    // 直接調用Module的靜態方法進行文件的載入
    return Module._load(filePath);
}

Module._cache = {};
Module._load = function(filePath) {
    // 首先通過用戶傳入的filePath定址文件的絕對路徑
    // 因為再CommnJS中，模塊的唯一標識是文件的絕對路徑
    const realPath = Module._resoleveFilename(filePath);
    // 緩存優先，如果緩存中存在即直接返回模塊的exports屬性
    let cacheModule = Module._cache[realPath];
    if(cacheModule) return cacheModule.exports;
    // 如果第一次載入，需要new一個模塊，參數是文件的絕對路徑
    let module = new Module(realPath);
    // 調用模塊的load方法去編譯模塊
    module.load(realPath);
    return module.exports;
}

// node文件暫不討論
Module._extensions = {
   // 對js文件處理
  ".js": handleJS,
  // 對json文件處理
  ".json": handleJSON
}

function handleJSON(module) {
 // 如果是json文件，直接用fs.readFileSync進行讀取，
 // 然後用JSON.parse進行轉化，直接返回即可
  const json = fs.readFileSync(module.id, 'utf-8')
  module.exports = JSON.parse(json)
}

function handleJS(module) {
  const js = fs.readFileSync(module.id, 'utf-8')
  let fn = new Function('exports', 'myRequire', 'module', '__filename', '__dirname', js)
  let exports = module.exports;
  // 組裝後的函數直接執行即可
  fn.call(exports, exports, myRequire, module,module.id,path.dirname(module.id))
}

Module._resolveFilename = function (filePath) {
  // 拼接絕對路徑，然後去查找，存在即返回
  let absPath = path.resolve(__dirname, filePath);
  let exists = fs.existsSync(absPath);
  if (exists) return absPath;
  // 如果不存在，依次拼接.js,.json,.node進行嘗試
  let keys = Object.keys(Module._extensions);
  for (let i = 0; i < keys.length; i++) {
    let currentPath = absPath + keys[i];
    if (fs.existsSync(currentPath)) return currentPath;
  }
};

Module.prototype.load = function(realPath) {
  // 獲取文件擴展名，交由相對應的方法進行處理
  let extname = path.extname(realPath)
  Module._extensions[extname](this)
}

上面對 CommonJs 規範進行了簡單的實現，核心解決了作用域的隔離，並提供了 Myrequire 方法進行方法和屬性的載入，對於上面的實現，筆者專門有一篇文章《38 行代碼帶你實現 CommonJS 規範》進行了詳細的說明，感興趣的小伙伴可自行閱讀。

9、遞歸獲取對象屬性

如果讓我挑選一個用的最廣泛的設計模式，我會選觀察者模式，如果讓我挑一個我所遇到的最多的演算法思維，那肯定是遞歸，遞歸通過將原始問題分割為結構相同的子問題，然後依次解決這些子問題，組合子問題的結果最終獲得原問題的答案。

const user = {
  info: {
    name: "張三",
    address: { home: "Shaanxi", company: "Xian" },
  },
};

// obj是獲取屬性的對象，path是路徑，fallback是預設值
function get(obj, path, fallback) {
  const parts = path.split(".");
  const key = parts.shift();
  if (typeof obj[key] !== "undefined") {
    return parts.length > 0 ?
      get(obj[key], parts.join("."), fallback) :
      obj[key];
  }
  // 如果沒有找到key返回fallback
  return fallback;
}

console.log(get(user, "info.name")); // 張三
console.log(get(user, "info.address.home")); // Shaanxi
console.log(get(user, "info.address.company")); // Xian
console.log(get(user, "info.address.abc", "fallback")); // fallback

本文轉載於:

https://juejin.cn/post/7223938976158957624

如果對您有所幫助，歡迎您點個關註，我會定時更新技術文檔，大家一起討論學習，一起進步。

 


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 看完這篇，DWS故障修複不再愁
    摘要：本文詳細梳理分析了DWS服務面臨軟硬體故障場景和對應的修複原理，希望藉此能夠讓你對DWS的集群故障修複有個全面深入的瞭解。 本文分享自華為雲社區《GaussDB(DWS)故障修複系統性介紹》，作者： 聞鮮生。 DWS是一個分散式架構的MPP集群，物理部署上涉及數百數千台主機和對應的磁碟，以及這 ...
  • Redis安裝,主從複製、哨兵模式、集群
    **本系列為：MySQL資料庫詳解，為千鋒資深教學老師獨家創作** **致力於為大家講解清晰MySQL資料庫相關知識點，含有豐富的代碼案例及講解。如果感覺對大家有幫助的話，可以【關註】持續追更\~** **文末有本文重點總結，技術類問題，也歡迎大家和我們溝通交流！** ![在這裡插入圖片描述](ht ...
  • 1萬多條司法資格考試題庫ACCESS\EXCEL資料庫
    《1萬多條司法資格考試題庫ACCESS版》搜集了大量司法資格考試試題，包括試卷一、試卷二、試卷三、試卷四等科目。同類的資料庫有《9萬多條執業醫師資格考試題庫ACCESS資料庫》、《6萬多條會計從業資格考試題庫ACCESS版》、《近7萬多條證券從業資格考試題庫ACCESS版》、《1萬多條一級建造師資格 ...
  • 為什麼MySQL單表不能超過2000萬行？
    摘要：MySQL一張表最多能存多少數據？ 本文分享自華為雲社區《為什麼MySQL單表不能超過2000萬行？》，作者： GaussDB 資料庫 。 最近看到一篇《我說MySQL每張表最好不要超過2000萬數據，面試官讓我回去等通知》的文章，非常有趣。 文中提到，他朋友在面試的過程中說，自己的工作就是把 ...
  • Redis - 二進位位數組
    數學上有一個“計算漢明重量”的問題，即求取一個二進位位中非 0 的數量。使用 Redis 提供的 Bitmap 統計時恰恰是這樣一個問題，學習後能發現解決辦法卻是如此巧妙。 ...
  • 關於微信小程式原生組件與uniApp混合開發過程遇到的問題與解決方式
    2022年的程式員節， #大齡程式員去哪兒了#成為了社交媒體上最火的話題之一，程式員的職場成長問題在社會上引起了廣泛關註。 有2位在技術領域摸爬滾打很多年的開發者，35歲後的他們，有70後，有80後，依然在編程開發，依然有離職創業的勇氣，努力實現自己的人生價值。走進他們的故事，你會發現，這個世上沒有 ...
  • React筆記-Hooks(九)(非常全面)
    # React筆記-Hooks(九) ## Hooks ### 概念 >React Hooks 的意思是 組件儘量寫成純函數 如果需要外部功能和副作用 就用鉤子把外部代碼"鉤"進來 ### 函數組件和類組件區別 >- 函數組件沒有狀態(state) 類組件有 >- 函數組件沒有生命周期 類組件有(掛 ...
  • Vue3-mobileGPT仿chatgpt移動端|vite4+pinia2手機端ChatGPT模板
    OpenAI於前幾天發佈了IOS版ChatGPT智能App應用。預示著ChatGPT正式踏入了移動設備領域。 現在可以去AppStore下載這款免費、帶有語音設別功能的ChatGPT應用了。 基於vite4.x+vue3+pinia2模仿chatgpt手機端聊天模板Vue3-MobileGPT。 運 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類