欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

九個超級好用的Javascript技巧

 更新時間:2023年04月23日 10:28:33   作者:字節(jié)前端  
在實際的開發(fā)工作過程中,積累了一些常見又超級好用的 Javascript 技巧和代碼片段,包括整理的其他大神的 JS 使用技巧,今天篩選了 9 個,以供大家參考

1、動態(tài)加載 JS 文件

在一些特殊的場景下,特別是一些庫和框架的開發(fā)中,我們有時會去動態(tài)的加載 JS 文件并執(zhí)行,下面是利用 Promise 進行了簡單的封裝。

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

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

上面代碼核心有兩點,一是利用 Promise 處理異步的邏輯,而是利用 script 標(biāo)簽進行 js 的加載并執(zhí)行。

2、實現(xiàn)模板引擎

下面示例用了極少的代碼實現(xiàn)了動態(tài)的模板渲染引擎,不僅支持普通的動態(tài)變量的替換,還支持包含 for 循環(huán),if 判斷等的動態(tài)的 JS 語法邏輯,具體實現(xiàn)邏輯在筆者另外一篇文章《面試官問:你能手寫一個模版引擎嗎?》做了非常詳詳盡的說明,感興趣的小伙伴可自行閱讀。

// 這是包含了js代碼的動態(tài)模板
var template =
'My avorite sports:' +
'<%if(this.showSports) {%>' +
    '<% for(var index in this.sports) {   %>' +
    '<a><%this.sports[index]%></a>' +
    '<%}%>' +
'<%} else {%>' +
    '<p>none</p>' +
'<%}%>';
// 這是我們要拼接的函數(shù)字符串
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("");
}`
// 動態(tài)渲染的數(shù)據(jù)
const options = {
  sports: ["swimming", "basketball", "football"],
  showSports: true
}
// 構(gòu)建可行的函數(shù)并傳入?yún)?shù),改變函數(shù)執(zhí)行時this的指向
result = new Function("obj", code).apply(options, [options]);
console.log(result);

3、利用 reduce 進行數(shù)據(jù)結(jié)構(gòu)的轉(zhuǎn)換

有時候前端需要對后端傳來的數(shù)據(jù)進行轉(zhuǎn)換,以適配前端的業(yè)務(wù)邏輯,或者對組件的數(shù)據(jù)格式進行轉(zhuǎn)換再傳給后端進行處理,而 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), {})
}

很多很復(fù)雜的邏輯如果用 reduce 去處理,都非常的簡潔。

4、添加默認(rèn)值

有時候一個方法需要用戶傳入一個參數(shù),通常情況下我們有兩種處理方式,如果用戶不傳,我們通常會給一個默認(rèn)值,亦或是用戶必須要傳一個參數(shù),不傳直接拋錯。

function double() {
    return value *2
}

// 不傳的話給一個默認(rèn)值0
function double(value = 0) {
    return value * 2
}

// 用戶必須要傳一個參數(shù),不傳參數(shù)就拋出一個錯誤

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

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

listen 方法用來創(chuàng)建一個 NodeJS 的原生 http 服務(wù)并監(jiān)聽端口,在服務(wù)的回調(diào)函數(shù)中創(chuàng)建 context,然后調(diào)用用戶注冊的回調(diào)函數(shù)并傳遞生成的 context。下面我們以前看下 createContext 和 handleRequest 的實現(xiàn)。

5、函數(shù)只執(zhí)行一次

有些情況下我們有一些特殊的場景,某一個函數(shù)只允許執(zhí)行一次,或者綁定的某一個方法只允許執(zhí)行一次。

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

6、實現(xiàn) Curring

JavaScript 的柯里化是指將接受多個參數(shù)的函數(shù)轉(zhuǎn)換為一系列只接受一個參數(shù)的函數(shù)的過程。這樣可以更加靈活地使用函數(shù),減少重復(fù)代碼,并增加代碼的可讀性。

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、實現(xiàn)單例模式

JavaScript 的單例模式是一種常用的設(shè)計模式,它可以確保一個類只有一個實例,并提供對該實例的全局訪問點,在 JS 中有廣泛的應(yīng)用場景,如購物車,緩存對象,全局的狀態(tài)管理等等。

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、實現(xiàn) CommonJs 規(guī)范

CommonJS 規(guī)范的核心思想是將每個文件都看作一個模塊,每個模塊都有自己的作用域,其中的變量、函數(shù)和對象都是私有的,不能被外部訪問。要訪問模塊中的數(shù)據(jù),必須通過導(dǎo)出(exports)和導(dǎo)入(require)的方式。

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

function myRequire(filePath) {
    // 直接調(diào)用Module的靜態(tài)方法進行文件的加載
    return Module._load(filePath);
}

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

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

function handleJSON(module) {
 // 如果是json文件,直接用fs.readFileSync進行讀取,
 // 然后用JSON.parse進行轉(zhuǎn)化,直接返回即可
  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;
  // 組裝后的函數(shù)直接執(zhí)行即可
  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) {
  // 獲取文件擴展名,交由相對應(yīng)的方法進行處理
  let extname = path.extname(realPath)
  Module._extensions[extname](this)
}

上面對 CommonJs 規(guī)范進行了簡單的實現(xiàn),核心解決了作用域的隔離,并提供了 Myrequire 方法進行方法和屬性的加載,對于上面的實現(xiàn),筆者專門有一篇文章《38 行代碼帶你實現(xiàn) CommonJS 規(guī)范》進行了詳細的說明,感興趣的小伙伴可自行閱讀。

9、遞歸獲取對象屬性

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

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

// obj是獲取屬性的對象,path是路徑,fallback是默認(rèn)值
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

上面挑選了 9 個筆者認(rèn)為比較有用的 JS 技巧,希望對大家有所幫助。

到此這篇關(guān)于九個超級好用的Javascript 技巧的文章就介紹到這了,更多相關(guān)Javascript 技巧內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

相關(guān)文章

  • 微信小程序常用視圖容器組件使用詳解

    微信小程序常用視圖容器組件使用詳解

    組件是視圖層基本的組成單元,具備UI風(fēng)格樣式以及特定的功能效果。本文將通過示例詳細為大家介紹一下微信小程序中常用的視圖容器組件,需要的可以參考一下
    2022-03-03
  • Object.keys() 和 Object.getOwnPropertyNames() 的區(qū)別詳解

    Object.keys() 和 Object.getOwnPropertyNames() 的區(qū)別詳解

    這篇文章主要介紹了Object.keys() 和 Object.getOwnPropertyNames() 的區(qū)別詳解,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2020-05-05
  • JavaScript與HTML的結(jié)合方法詳解

    JavaScript與HTML的結(jié)合方法詳解

    這篇文章主要介紹了JavaScript與HTML的結(jié)合方法,利用實例向大家介紹JavaScript與HTML是如何結(jié)合的,內(nèi)容很詳細,感興趣的小伙伴們可以參考一下
    2015-11-11
  • 你可能不知道的JSON.stringify()詳解

    你可能不知道的JSON.stringify()詳解

    老司機們,你知道JSON.stringify還有第二個和第三個可選參數(shù)嗎?它們是什么呢?是不是感到不可思議?下面這篇文章就來給大家介紹了一些你可能不知道的JSON.stringify的相關(guān)資料,文中通過示例代碼介紹的非常詳細,需要的朋友可以參考下。
    2017-08-08
  • JavaScript中window.showModalDialog()用法詳解

    JavaScript中window.showModalDialog()用法詳解

    這篇文章主要介紹了JavaScript中window.showModalDialog()用法詳解,需要的朋友可以參考下
    2014-12-12
  • 原生JS forEach()和map()遍歷的區(qū)別、兼容寫法及jQuery $.each、$.map遍歷操作

    原生JS forEach()和map()遍歷的區(qū)別、兼容寫法及jQuery $.each、$.map遍歷操作

    這篇文章主要介紹了原生JS forEach()和map()遍歷的區(qū)別、兼容寫法及jQuery $.each、$.map遍歷操作,結(jié)合實例形式分析了JS使用forEach()和map()以及jQuery使用$.each、$.map進行遍歷操作相關(guān)技巧與操作注意事項,需要的朋友可以參考下
    2019-02-02
  • JavaScript原型繼承之基礎(chǔ)機制分析

    JavaScript原型繼承之基礎(chǔ)機制分析

    由于語言設(shè)計上的原因,JavaScript 沒有真正意義上“類”的概念。而通常使用的 new 命令實例化對象的方法,其實是對原型對象的實例化。
    2011-08-08
  • JS 獲取select(多選下拉)中所選值的示例代碼

    JS 獲取select(多選下拉)中所選值的示例代碼

    通過js獲取select(多選下拉)中所選值,具體實現(xiàn)如下,有需要的朋友可以參考下,希望對大家有所幫助
    2013-08-08
  • 利用純JS實現(xiàn)像素逐漸顯示的方法示例

    利用純JS實現(xiàn)像素逐漸顯示的方法示例

    這篇文章主要給大家介紹了利用純JS實現(xiàn)像素逐漸顯示的相關(guān)資料,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面跟著小編來一起學(xué)習(xí)學(xué)習(xí)吧。
    2017-08-08
  • 基于勻速運動的實例講解(側(cè)邊欄,淡入淡出)

    基于勻速運動的實例講解(側(cè)邊欄,淡入淡出)

    下面小編就為大家?guī)硪黄趧蛩龠\動的實例講解(側(cè)邊欄,淡入淡出)。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2017-10-10

最新評論