Licia 支持小程序的 JS 工具庫
導語
Licia 是一套在開發中實踐積累起來的實用 JavaScript 工具庫。該庫目前擁有超過 300 個模塊，同時支持瀏覽器、node 及小程序運行環境，提供了包括日期格式化、md5、顏色轉換等實用模塊，可以極大地提高開發效率。
前言
因為小程序運行的是 JavaScript 代碼，傳統前端所使用的 JS 庫理應也能夠被用在小程序中才對。然而，經過實際測試，你會發現有相當一部分 npm 包是無法直接在小程序中跑起來的。比如前端工程師十分常用的 lodash，在小程序中引入會報錯。
為什麼會這樣？
主要原因就是絕大部分庫的開發者在設計時只會考慮兩種運行環境，瀏覽器和 node，而小程序並不會在其考慮範圍內。因此，只要開發者的 JS 代碼使用了只有瀏覽器與 node 中才有的介面，如 DOM 操作、文件讀寫等，該庫就不能正常地運行在小程序環境中。除此之外，假如他們使用了小程序禁用的功能，例如全局變數與動態代碼執行，這時候代碼跑在小程序環境也會出錯。
使用
使用 npm 安裝
1、 安裝 npm 包
npm i miniprogram-licia --save
2、點擊開發者工具中的菜單欄：工具 --> 構建 npm
3、直接在代碼中引入使用
const licia = require(miniprogram-licia);
licia.md5(licia); // -> e59f337d85e9a467f1783fab282a41d0
licia.safeGet({a: {b: 1}}, a.b); // -> 1
生成定製化 util.js
使用 npm 包的方式會將所有功能引入到代碼包中，大概會增加 100 kb 的大小。如果你只想引入所需腳本，可以使用在線工具生成定製化 util 庫。
1、訪問 https://licia.liriliri.io/builder.html
2、輸入需要的模塊名，點擊生成下載 util.js。
3、將生成的工具庫拷貝到小程序項目任意目錄下然後直接引入使用。
const util = require(../lib/util);
util.wx.getStorage({
key: test
}).then(res => console.log(res.data));
優點
1、目前擁有 270 多個模塊可在小程序中正常運行，而 underscore 只有 120 個函數左右。
2、與 lodash 相比增加了不少更加實用的函數，比如 md5、atob、btoa、Emitter、dateFormat 等。
3、可以直接在小程序中引入運行，不像 lodash 需要進行一定的修改才能正常跑在小程序中。
4、定製化生成可以使用更小體積的工具庫，這在限制了代碼包大小的小程序中十分有用。
附錄
這裡只簡單列出函數及其功能介紹，詳細的用法請訪問官網查看。
註：模塊名右邊有小程序圖標即表明可以在小程序中使用。
- Class: 創建 JavaScript 類。
- Color: 顏色轉換。
- Dispatcher: Flux 調度器。
- Emitter: 提供觀察者模式的 Event emitter 類。
- Enum: Enum 類實現。
- JsonTransformer: JSON 轉換器。
- LinkedList: 雙向鏈表實現。
- Logger: 帶日誌級別的簡單日誌庫。
- Lru: 簡單 LRU 緩存。
- Promise: 輕量 Promise 實現。
- PseudoMap: 類似 es6 的 Map，不支持遍歷器。
- Queue: 隊列數據結構。
- QuickLru: 不使用鏈表的 LRU 實現。
- ReduceStore: 簡單類 redux 狀態管理。
- Stack: 棧數據結構。
- State: 簡單狀態機。
- Store: 內存存儲。
- Tween: JavaScript 補間動畫庫。
- Url: 簡單 url 操作庫。
- Validator: 對象屬性值校驗。
- abbrev: 計算字元串集的縮寫集合。
- after: 創建一個函數，只有在調用 n 次後才會調用一次。
- allKeys: 獲取對象的所有鍵名，包括自身的及繼承的。
- arrToMap: 將字元串列錶轉換為映射。
- atob: window.atob，運行在 node 環境時使用 Buffer 進行模擬。
- average: 獲取數字的平均值。
- base64: base64 編解碼。
- before: 創建一個函數，只能調用少於 n 次。
- binarySearch: 二分查找實現。
- bind: 創建一個綁定到指定對象的函數。
- btoa: window.btoa，運行在 node 環境時使用 Buffer 進行模擬。
- bubbleSort: 冒泡排序實現。
- bytesToStr: 將位元組數組轉換為字元串。
- callbackify: 將返回 Promise 的函數轉換為使用回調的函數。
- camelCase: 將字元串轉換為駝峯式。
- capitalize: 將字元串的第一個字元轉換為大寫，其餘字元轉換為小寫。
- castPath: 將值轉換為屬性路徑數組。
- centerAlign: 字元串居中。
- char: 根據指定的整數返回 unicode 編碼為該整數的字元。
- chunk: 將數組拆分為指定長度的子數組。
- clamp: 將數字限定於指定區間。
- className: 合併 class。
- clone: 對指定對象進行淺複製。
- cloneDeep: 深複製。
- cmpVersion: 比較版本號。
- combine: 創建一個數組，用一個數組的值作為其鍵名，另一個數組的值作為其值。
- compact: 返回數組的拷貝並移除其中的虛值。
- compose: 將多個函數組合成一個函數。
- concat: 將多個數組合併成一個數組。
- contain: 檢查數組中是否有指定值。
- convertBase: 對數字進行進位轉換。
- createAssigner: 用於創建 extend，extendOwn 和 defaults 等模塊。
- curry: 函數柯里化。
- dateFormat: 簡單日期格式化。
- debounce: 返回函數的防反跳版本。
- decodeUriComponent: 類似 decodeURIComponent 函數，只是輸入不合法時不拋出錯誤並儘可能地對其進行解碼。
- defaults: 填充對象的默認值。
- define: 定義一個模塊，需要跟 use 模塊配合使用。
- defineProp: Object.defineProperty(defineProperties) 的快捷方式。
- delay: 在指定時長後執行函數。
- detectBrowser: 使用 ua 檢測瀏覽器信息。
- detectMocha: 檢測是否有 mocha 測試框架在運行。
- detectOs: 使用 ua 檢測操作系統。
- difference: 創建一個數組，該數組的元素不存在於給定的其它數組中。
- dotCase: 將字元串轉換為點式。
- each: 遍歷集合中的所有元素，用每個元素當做參數調用迭代器。
- easing: 緩動函數，參考 http://jqueryui.com/ 。
- endWith: 檢查字元串是否以指定字元串結尾。
- escape: 轉義 HTML 字元串，替換 &，<，>，"，`，和 字元。
- escapeJsStr: 轉義字元串為合法的 JavaScript 字元串字面量。
- escapeRegExp: 轉義特殊字元用於 RegExp 構造函數。
- every: 檢查是否集合中的所有元素都能通過真值檢測。
- extend: 複製多個對象中的所有屬性到目標對象上。
- extendDeep: 類似 extend，但會遞歸進行擴展。
- extendOwn: 類似 extend，但只複製自己的屬性，不包括原型鏈上的屬性。
- extractBlockCmts: 從源碼中提取塊注釋。
- extractUrls: 從文本中提取 url。
- fibonacci: 計算斐波那契數列中某位數字。
- fileSize: 將位元組數轉換為易於閱讀的形式。
- fill: 在數組指定位置填充指定值。
- filter: 遍歷集合中的每個元素，返回所有通過真值檢測的元素組成的數組。
- find: 找到集合中第一個通過真值檢測的元素。
- findIdx: 返回第一個通過真值檢測元素在數組中的位置。
- findKey: 返回對象中第一個通過真值檢測的屬性鍵名。
- findLastIdx: 同 findIdx，只是查找順序改為從後往前。
- flatten: 遞歸拍平數組。
- fnParams: 獲取函數的參數名列表。
- format: 使用類似於 printf 的方式來格式化字元串。
- fraction: 轉換數字為分數形式。
- freeze: Object.freeze 的快捷方式。
- freezeDeep: 遞歸進行 Object.freeze。
- gcd: 使用歐幾裏德演算法求最大公約數。
- getUrlParam: 獲取 url 參數值。
- has: 檢查屬性是否是對象自身的屬性（原型鏈上的不算）。
- hslToRgb: 將 hsl 格式的顏色值轉換為 rgb 格式。
- identity: 返回傳入的第一個參數。
- idxOf: 返回指定值第一次在數組中出現的位置。
- indent: 對文本的每一行進行縮進處理。
- inherits: 使構造函數繼承另一個構造函數原型鏈上的方法。
- insertionSort: 插入排序實現。
- intersect: 計算所有數組的交集。
- intersectRange: 計算兩個區間的交集。
- invert: 生成一個新對象，該對象的鍵名和鍵值進行調換。
- isAbsoluteUrl: 檢查 url 是否是絕對地址。
- isArgs: 檢查值是否是參數類型。
- isArr: 檢查值是否是數組類型。
- isArrBuffer: 檢查值是否是 ArrayBuffer 類型。
- isArrLike: 檢查值是否是類數組對象。
- isBool: 檢查值是否是布爾類型。
- isBrowser: 檢測是否運行於瀏覽器環境。
- isClose: 檢查兩個數字是否近似相等。
- isDataUrl: 檢查字元串是否是有效的 Data Url。
- isDate: 檢查值是否是 Date 類型。
- isEmail: 簡單檢查值是否是合法的郵件地址。
- isEmpty: 檢查值是否是空對象或空數組。
- isEqual: 對兩個對象進行深度比較，如果相等，返回真。
- isErr: 檢查值是否是 Error 類型。
- isEven: 檢查數字是否是偶數。
- isFinite: 檢查值是否是有限數字。
- isFn: 檢查值是否是函數。
- isGeneratorFn: 檢查值是否是 Generator 函數。
- isInt: 檢查值是否是整數。
- isJson: 檢查值是否是有效的 JSON。
- isLeapYear: 檢查年份是否是閏年。
- isMap: 檢查值是否是 Map 對象。
- isMatch: 檢查對象所有鍵名和鍵值是否在指定的對象中。
- isMiniProgram: 檢測是否運行於微信小程序環境中。
- isMobile: 使用 ua 檢測是否運行於移動端瀏覽器。
- isNaN: 檢測值是否是 NaN。
- isNative: 檢查值是否是原生函數。
- isNil: 檢查值是否是 null 或 undefined，等價於 value == null。
- isNode: 檢測是否運行於 node 環境中。
- isNull: 檢查值是否是 Null 類型。
- isNum: 檢測值是否是數字類型。
- isNumeric: 檢查值是否是數字，包括數字字元串。
- isObj: 檢查值是否是對象。
- isOdd: 檢查數字是否是奇數。
- isPlainObj: 檢查值是否是用 Object 構造函數創建的對象。
- isPrime: 檢查整數是否是質數。
- isPrimitive: 檢測值是否是字元串，數字，布爾值或 null。
- isPromise: 檢查值是否是類 promise 對象。
- isRegExp: 檢查值是否是正則類型。
- isRelative: 檢查路徑是否是相對路徑。
- isSet: 檢查值是否是 Set 類型。
- isSorted: 檢查數組是否有序。
- isStr: 檢查值是否是字元串。
- isTypedArr: 檢查值是否 TypedArray 類型。
- isUndef: 檢查值是否是 undefined。
- isUrl: 簡單檢查值是否是有效的 url 地址。
- isWeakMap: 檢查值是否是 WeakMap 類型。
- isWeakSet: 檢查值是否是 WeakSet 類型。
- kebabCase: 將字元串轉換為短橫線式。
- keyCode: 鍵碼鍵名轉換。
- keys: 返回包含對象自身可遍歷所有鍵名的數組。
- last: 獲取數組的最後一個元素。
- linkify: 將文本中的 url 地址轉換為超鏈接。
- longest: 獲取數組中最長的一項。
- lowerCase: 轉換字元串為小寫。
- lpad: 對字元串進行左填充。
- ltrim: 刪除字元串頭部指定字元或空格。
- map: 對集合的每個元素調用轉換函數生成與之對應的數組。
- mapObj: 類似 map，但針對對象，生成一個新對象。
- matcher: 傳入對象返回函數，如果傳入參數中包含該對象則返回真。
- max: 獲取數字中的最大值。
- md5: MD5 演算法實現。
- memStorage: Web Storage 介面的純內存實現。
- memoize: 緩存函數計算結果。
- mergeSort: 歸併排序實現。
- methods: 獲取對象中所有方法名。
- min: 獲取數字中的最小值。
- moment: 簡單的類 moment.js 實現。
- ms: 時長字元串與毫秒轉換庫。
- negate: 創建一個將原函數結果取反的函數。
- nextTick: 能夠同時運行在 node 和瀏覽器端的 next tick 實現。
- noop: 一個什麼也不做的空函數。
- normalizeHeader: 標準化 HTTP 頭部名。
- normalizePath: 標準化文件路徑中的斜槓。
- now: 獲取當前時間戳。
- objToStr: Object.prototype.toString 的別名。
- omit: 類似 pick，但結果相反。
- once: 創建只能調用一次的函數。
- optimizeCb: 用於高效的函數上下文綁定。
- pad: 對字元串進行左右填充。
- pairs: 將對象轉換為包含【鍵名，鍵值】對的數組。
- parallel: 同時執行多個函數。
- parseArgs: 命令行參數簡單解析。
- partial: 返回局部填充參數的函數，與 bind 模塊相似。
- pascalCase: 將字元串轉換為帕斯卡式。
- perfNow: 高精度時間戳。
- pick: 過濾對象。
- pluck: 提取數組對象中指定屬性值，返回一個數組。
- precision: 獲取數字的精度。
- promisify: 轉換使用回調的非同步函數，使其返回 Promise。
- property: 返回一個函數，該函數返回任何傳入對象的指定屬性。
- query: 解析序列化 url 的 query 部分。
- quickSort: 快排實現。
- raf: requestAnimationFrame 快捷方式。
- random: 在給定區間內生成隨機數。
- randomItem: 隨機獲取數組中的某項。
- range: 創建整數數組。
- rc4: RC4 對稱加密演算法實現。
- reduce: 合併多個值成一個值。
- reduceRight: 類似於 reduce，只是從後往前合併。
- reject: 類似 filter，但結果相反。
- remove: 移除集合中所有通過真值檢測的元素，返回包含所有刪除元素的數組。
- repeat: 重複字元串指定次數。
- restArgs: 將給定序號後的參數合併成一個數組。
- rgbToHsl: 將 rgb 格式的顏色值轉換為 hsl 格式。
- root: 根對象引用，對於 nodeJs，取
global對象，對於瀏覽器，取window對象。 - rpad: 對字元串進行右填充。
- rtrim: 刪除字元串尾部指定字元或空格。
- safeCb: 創建回調函數，內部模塊使用。
- safeDel: 刪除對象屬性。
- safeGet: 獲取對象屬性值，路徑不存在時不報錯。
- safeSet: 設置對象屬性值。
- sample: 從集合中隨機抽取部分樣本。
- selectionSort: 選擇排序實現。
- shuffle: 將數組中元素的順序打亂。
- size: 獲取對象的大小或類數組元素的長度。
- sleep: 使用 Promise 模擬暫停方法。
- slice: 截取數組的一部分生成新數組。
- snakeCase: 轉換字元串為下劃線式。
- some: 檢查集合中是否有元素通過真值檢測。
- sortBy: 遍歷集合中的元素，將其作為參數調用函數，並以得到的結果為依據對數組進行排序。
- spaceCase: 將字元串轉換為空格式。
- splitCase: 將不同命名式的字元串拆分成數組。
- splitPath: 將路徑拆分為文件夾路徑，文件名和擴展名。
- startWith: 檢查字元串是否以指定字元串開頭。
- strHash: 使用 djb2 演算法進行字元串哈希。
- strToBytes: 將字元串轉換為位元組數組。
- stringify: JSON 序列化，支持循環引用和函數。
- stripAnsi: 清除字元串中的 ansi 控制碼。
- stripCmt: 清除源碼中的注釋。
- stripColor: 清除字元串中的 ansi 顏色控制碼。
- stripHtmlTag: 清除字元串中的 html 標籤。
- sum: 計算數字和。
- swap: 交換數組中的兩項。
- template: 將模板字元串編譯成函數用於渲染。
- throttle: 返回函數的節流閥版本。
- timeAgo: 將時間格式化成多久之前的形式。
- timeTaken: 獲取函數的執行時間。
- times: 調用目標函數 n 次。
- toArr: 將任意值轉換為數組。
- toBool: 將任意值轉換為布爾值。
- toDate: 將任意值轉換為日期類型。
- toInt: 將任意值轉換為整數。
- toNum: 將任意值轉換為數字。
- toSrc: 將函數轉換為源碼。
- toStr: 將任意值轉換為字元串。
- topoSort: 拓撲排序實現。
- trim: 刪除字元串兩邊指定字元或空格。
- tryIt: 在 try catch 塊中運行函數。
- type: 獲取 JavaScript 對象的內部類型。
- types: 僅用於生成 ts 定義文件。
- ucs2: UCS-2 編解碼。
- unescape: 和 escape 相反，轉義 HTML 實體回去。
- union: 返回傳入所有數組的並集。
- uniqId: 生成全局唯一 id。
- unique: 返回數組去重後的副本。
- unzip: 與 zip 相反。
- upperCase: 轉換字元串為大寫。
- upperFirst: 將字元串的第一個字元轉換為大寫。
- use: 使用 define 創建的模塊。
- utf8: UTF-8 編解碼。
- values: 返回對象所有的屬性值。
- vlq: vlq 編解碼。
- waitUntil: 等待直到條件函數返回真值。
- waterfall: 按順序執行函數序列。
- wrap: 將函數封裝到包裹函數裡面, 並把它作為第一個參數傳給包裹函數。
- wx: 小程序 wx 對象的 promise 版本。
- zip: 將每個數組中相應位置的值合併在一起。
推薦閱讀：
