這里給大家分享我在網上總結出來的一些知識，希望對大家有所幫助
前言
在實際的開發作業程序中，積累了一些常見又超級好用的 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 = https://www.cnblogs.com/smileZAZ/p/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 = https://www.cnblogs.com/smileZAZ/p/0) {
return value * 2
}
// 用戶必須要傳一個引數，不傳引數就拋出一個錯誤
const required = () => {
throw new Error("This function requires one parameter.")
}
function double(value = https://www.cnblogs.com/smileZAZ/p/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
如果對您有所幫助，歡迎您點個關注，我會定時更新技術檔案，大家一起討論學習，一起進步，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/553117.html
標籤：JavaScript
上一篇：HTTP1.0、HTTP1.1、HTTP2.0 協議的區別
下一篇：返回列表