Javascript函數技巧學習
前言
閱讀代碼是提高編碼水平的好方法,優(yōu)秀的源代碼就像一部文學巨作,開拓思維,提供啟示。最近在閱讀vue2的源代碼,學到了很多JS的編碼技巧,后續(xù)陸續(xù)分享出來供參考,順便總結一下代碼閱讀成果。
1. 緩存函數
先來看一個需求,假設有一個邏輯復雜的函數 superComputed
執(zhí)行很費時間,如果每次使用都去計算一次,就會給用戶帶來很長的等待。這個時候需要考慮將計算結果緩存起來供后續(xù)程序調用,緩存函數需要實現當參數相同的情況下,直接取緩存結果。這跟服務器端為避免過多的查詢數據庫而用文件緩存查詢結果相似,在前端如何實現呢?
const superComputed = (str) => { // 假設這個函數執(zhí)行時間很長 console.info("===> 超級計算開始了……"); return `輸入:${str}`; };
編寫一個 cached
函數來封裝目標函數,這個 cached
函數接受目標函數作為參數,然后返回一個封裝好的新函數。在 cached
函數的內部,可以使用 Object
或 Map
緩存前一個函數調用的結果。
vue/src/shared/util.js
這個 cached
的代碼如下:
/** * Create a cached version of a pure function. */ export function cached<F: Function>(fn: F): F { const cache = Object.create(null); return (function cachedFn(str: string) { const hit = cache[str]; return hit || (cache[str] = fn(str)); }: any); }
現在將 cached
稍微改下,讓其可以執(zhí)行,每次執(zhí)行 superComputed
函數都會打印 ===> 超級計算開始了……
,以方便查看函數是否被緩存,
如下:
const superComputed = (str) => { // 假設這個函數執(zhí)行時間很長 console.info("===> 超級計算開始了……"); return `輸入:${str}`; }; const cached = (fn) => { const cache = Object.create(null); return (str) => { const hit = cache[str]; return hit || (cache[str] = fn(str)); }; }; const cacheSuperComputed = cached(superComputed); console.log(cacheSuperComputed("DevPoint")); console.log(cacheSuperComputed("DevPoint")); console.log(cacheSuperComputed("juejin"));
執(zhí)行后的結果如下:
===> 超級計算開始了……
輸入:DevPoint
輸入:DevPoint
===> 超級計算開始了……
輸入:juejin
從結果不難看出,函數執(zhí)行結果在參數不變的情況下,取得緩存的數據。
2. 將dev-point轉換為devPoint
在項目開發(fā)過程中,通常會出現變量風格不一致的問題,可以編寫一個函數將其轉換為統(tǒng)一的風格。
vue/src/shared/util.js
/** * Camelize a hyphen-delimited string. */ const camelizeRE = /-(\w)/g export const camelize = cached((str: string): string => { return str.replace(camelizeRE, (_, c) => c ? c.toUpperCase() : '') })
將其稍微修改,里面的 cached
函數就是之前介紹的緩存函數。
const camelizeRE = /-(\w)/g; const camelize = cached((str) => { return str.replace(camelizeRE, (_, c) => (c ? c.toUpperCase() : "")); }); console.log(camelize("dev-point")); // devPoint
3. 自定義函數判斷
這里所說的自定義函數,指的是開發(fā)人員自定義的函數,不是Javascript原生宿主函數??赡芟氲皆砭褪菍⒑瘮缔D換為字符串,先來看下結果:
console.log(cached.toString()); console.log(toString.toString());
執(zhí)行結果如下:
// 下面是自定義函數的結果 (fn) => { const cache = Object.create(null); return (str) => { const hit = cache[str]; return hit || (cache[str] = fn(str)); }; } // 下面是原生宿主函數的結果 function toString() { [native code] }
從執(zhí)行結果來看,原生宿主函數 toString
的結果始終是 function fnName() { [native code] }
格式,因此就可以通過這個來區(qū)分,接下來看看VUE項目中的實現方式。
vue/src/core/util/env.js
在文件的第 58
行,代碼如下:
/* istanbul ignore next */ export function isNative (Ctor: any): boolean { return typeof Ctor === 'function' && /native code/.test(Ctor.toString()) }
4. JS運行環(huán)境
在前端快速發(fā)展的今天, JavaScript 代碼可以在不同的運行環(huán)境中執(zhí)行。為了更好的適應各種運行環(huán)境,需要判斷當前代碼是在哪個運行環(huán)境中執(zhí)行的,下面來學習一下Vue是如何判斷運行環(huán)境的:
vue/src/core/util/env.js
在文件的第 6
行開始,代碼如下:
// Browser environment sniffing export const inBrowser = typeof window !== 'undefined' export const inWeex = typeof WXEnvironment !== 'undefined' && !!WXEnvironment.platform export const weexPlatform = inWeex && WXEnvironment.platform.toLowerCase() export const UA = inBrowser && window.navigator.userAgent.toLowerCase() export const isIE = UA && /msie|trident/.test(UA) export const isIE9 = UA && UA.indexOf('msie 9.0') > 0 export const isEdge = UA && UA.indexOf('edge/') > 0 export const isAndroid = (UA && UA.indexOf('android') > 0) || (weexPlatform === 'android') export const isIOS = (UA && /iphone|ipad|ipod|ios/.test(UA)) || (weexPlatform === 'ios') export const isChrome = UA && /chrome\/\d+/.test(UA) && !isEdge export const isPhantomJS = UA && /phantomjs/.test(UA) export const isFF = UA && UA.match(/firefox\/(\d+)/)
這些判斷代碼都值得借鑒的,這里不展開介紹了,之前在《4個值得收藏的Javascript技巧》介紹了瀏覽器的判斷。
到此這篇關于Javascript函數技巧學習的文章就介紹到這了,更多相關Javascript技巧內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!
相關文章
Flow之一個新的Javascript靜態(tài)類型檢查器
今天我們興奮的發(fā)布了 Flow 的嘗鮮版,一個新的Javascript靜態(tài)類型檢查器。Flow為Javascript添加了靜態(tài)類型檢查,以提高開發(fā)效率和代碼質量,本文給大家分享Flow之一個新的Javascript靜態(tài)類型檢查器,感興趣的朋友一起學習吧2015-12-12JS 組件系列之 bootstrap treegrid 組件封裝過程
最近產品需要設計一套相對完整的組織架構的解決方案,由于組織架構涉及到層級關系,在表格里面展示層級關系,自然就要用到所謂的treegrid。下面小編通過本文給大家分享JS 組件系列之 bootstrap treegrid 組件的封裝過程,需要的朋友可以參考下2017-04-04