九個(gè)超級好用的Javascript技巧
1、動(dòng)態(tài)加載 JS 文件
在一些特殊的場景下,特別是一些庫和框架的開發(fā)中,我們有時(shí)會(huì)去動(dòng)態(tài)的加載 JS 文件并執(zhí)行,下面是利用 Promise 進(jìn)行了簡單的封裝。
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)邏輯 });
上面代碼核心有兩點(diǎn),一是利用 Promise 處理異步的邏輯,而是利用 script 標(biāo)簽進(jìn)行 js 的加載并執(zhí)行。
2、實(shí)現(xiàn)模板引擎
下面示例用了極少的代碼實(shí)現(xiàn)了動(dòng)態(tài)的模板渲染引擎,不僅支持普通的動(dòng)態(tài)變量的替換,還支持包含 for 循環(huán),if 判斷等的動(dòng)態(tài)的 JS 語法邏輯,具體實(shí)現(xiàn)邏輯在筆者另外一篇文章《面試官問:你能手寫一個(gè)模版引擎嗎?》做了非常詳詳盡的說明,感興趣的小伙伴可自行閱讀。
// 這是包含了js代碼的動(dòng)態(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(""); }` // 動(dòng)態(tài)渲染的數(shù)據(jù) const options = { sports: ["swimming", "basketball", "football"], showSports: true } // 構(gòu)建可行的函數(shù)并傳入?yún)?shù),改變函數(shù)執(zhí)行時(shí)this的指向 result = new Function("obj", code).apply(options, [options]); console.log(result);
3、利用 reduce 進(jìn)行數(shù)據(jù)結(jié)構(gòu)的轉(zhuǎn)換
有時(shí)候前端需要對后端傳來的數(shù)據(jù)進(jìn)行轉(zhuǎn)換,以適配前端的業(yè)務(wù)邏輯,或者對組件的數(shù)據(jù)格式進(jìn)行轉(zhuǎn)換再傳給后端進(jìn)行處理,而 reduce 是一個(gè)非常強(qiáng)大的工具。
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í)候一個(gè)方法需要用戶傳入一個(gè)參數(shù),通常情況下我們有兩種處理方式,如果用戶不傳,我們通常會(huì)給一個(gè)默認(rèn)值,亦或是用戶必須要傳一個(gè)參數(shù),不傳直接拋錯(cuò)。
function double() { return value *2 } // 不傳的話給一個(gè)默認(rèn)值0 function double(value = 0) { return value * 2 } // 用戶必須要傳一個(gè)參數(shù),不傳參數(shù)就拋出一個(gè)錯(cuò)誤 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)建一個(gè) NodeJS 的原生 http 服務(wù)并監(jiān)聽端口,在服務(wù)的回調(diào)函數(shù)中創(chuàng)建 context,然后調(diào)用用戶注冊的回調(diào)函數(shù)并傳遞生成的 context。下面我們以前看下 createContext 和 handleRequest 的實(shí)現(xiàn)。
5、函數(shù)只執(zhí)行一次
有些情況下我們有一些特殊的場景,某一個(gè)函數(shù)只允許執(zhí)行一次,或者綁定的某一個(gè)方法只允許執(zhí)行一次。
export function once (fn) { // 利用閉包判斷函數(shù)是否執(zhí)行過 let called = false return function () { if (!called) { called = true fn.apply(this, arguments) } } }
6、實(shí)現(xiàn) Curring
JavaScript 的柯里化是指將接受多個(gè)參數(shù)的函數(shù)轉(zhuǎn)換為一系列只接受一個(gè)參數(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
通過柯里化,我們可以將一些常見的功能模塊化,例如驗(yàn)證、緩存等等。這樣可以提高代碼的可維護(hù)性和可讀性,減少出錯(cuò)的機(jī)會(huì)。
7、實(shí)現(xiàn)單例模式
JavaScript 的單例模式是一種常用的設(shè)計(jì)模式,它可以確保一個(gè)類只有一個(gè)實(shí)例,并提供對該實(shí)例的全局訪問點(diǎn),在 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、實(shí)現(xiàn) CommonJs 規(guī)范
CommonJS 規(guī)范的核心思想是將每個(gè)文件都看作一個(gè)模塊,每個(gè)模塊都有自己的作用域,其中的變量、函數(shù)和對象都是私有的,不能被外部訪問。要訪問模塊中的數(shù)據(jù),必須通過導(dǎo)出(exports)和導(dǎo)入(require)的方式。
// id:完整的文件名 const path = require('path'); const fs = require('fs'); function Module(id){ // 用來唯一標(biāo)識(shí)模塊 this.id = id; // 用來導(dǎo)出模塊的屬性和方法 this.exports = {}; } function myRequire(filePath) { // 直接調(diào)用Module的靜態(tài)方法進(jìn)行文件的加載 return Module._load(filePath); } Module._cache = {}; Module._load = function(filePath) { // 首先通過用戶傳入的filePath尋址文件的絕對路徑 // 因?yàn)樵貱ommnJS中,模塊的唯一標(biāo)識(shí)是文件的絕對路徑 const realPath = Module._resoleveFilename(filePath); // 緩存優(yōu)先,如果緩存中存在即直接返回模塊的exports屬性 let cacheModule = Module._cache[realPath]; if(cacheModule) return cacheModule.exports; // 如果第一次加載,需要new一個(gè)模塊,參數(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進(jìn)行讀取, // 然后用JSON.parse進(jìn)行轉(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進(jìn)行嘗試 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) { // 獲取文件擴(kuò)展名,交由相對應(yīng)的方法進(jìn)行處理 let extname = path.extname(realPath) Module._extensions[extname](this) }
上面對 CommonJs 規(guī)范進(jìn)行了簡單的實(shí)現(xiàn),核心解決了作用域的隔離,并提供了 Myrequire 方法進(jìn)行方法和屬性的加載,對于上面的實(shí)現(xiàn),筆者專門有一篇文章《38 行代碼帶你實(shí)現(xiàn) CommonJS 規(guī)范》進(jìn)行了詳細(xì)的說明,感興趣的小伙伴可自行閱讀。
9、遞歸獲取對象屬性
如果讓我挑選一個(gè)用的最廣泛的設(shè)計(jì)模式,我會(huì)選觀察者模式,如果讓我挑一個(gè)我所遇到的最多的算法思維,那肯定是遞歸,遞歸通過將原始問題分割為結(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 個(gè)筆者認(rèn)為比較有用的 JS 技巧,希望對大家有所幫助。
到此這篇關(guān)于九個(gè)超級好用的Javascript 技巧的文章就介紹到這了,更多相關(guān)Javascript 技巧內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
Object.keys() 和 Object.getOwnPropertyNames() 的區(qū)別詳解
這篇文章主要介紹了Object.keys() 和 Object.getOwnPropertyNames() 的區(qū)別詳解,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-05-05JavaScript中window.showModalDialog()用法詳解
這篇文章主要介紹了JavaScript中window.showModalDialog()用法詳解,需要的朋友可以參考下2014-12-12原生JS forEach()和map()遍歷的區(qū)別、兼容寫法及jQuery $.each、$.map遍歷操作
這篇文章主要介紹了原生JS forEach()和map()遍歷的區(qū)別、兼容寫法及jQuery $.each、$.map遍歷操作,結(jié)合實(shí)例形式分析了JS使用forEach()和map()以及jQuery使用$.each、$.map進(jìn)行遍歷操作相關(guān)技巧與操作注意事項(xiàng),需要的朋友可以參考下2019-02-02JavaScript原型繼承之基礎(chǔ)機(jī)制分析
由于語言設(shè)計(jì)上的原因,JavaScript 沒有真正意義上“類”的概念。而通常使用的 new 命令實(shí)例化對象的方法,其實(shí)是對原型對象的實(shí)例化。2011-08-08基于勻速運(yùn)動(dòng)的實(shí)例講解(側(cè)邊欄,淡入淡出)
下面小編就為大家?guī)硪黄趧蛩龠\(yùn)動(dòng)的實(shí)例講解(側(cè)邊欄,淡入淡出)。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-10-10