Licia 支持小程序的 JS 工具庫

導語

Licia 是一套在開發中實踐積累起來的實用 JavaScript 工具庫。該庫目前擁有超過 300 個模塊,同時支持瀏覽器、node 及小程序運行環境,提供了包括日期格式化、md五、顏色轉換等實用模塊,能夠極大地提升開發效率。javascript

前言

由於小程序運行的是 JavaScript 代碼,傳統前端所使用的 JS 庫理應也可以被用在小程序中才對。然而,通過實際測試,你會發現有至關一部分 npm 包是沒法直接在小程序中跑起來的。好比前端工程師十分經常使用的 lodash,在小程序中引入會報錯。html

爲何會這樣?前端

主要緣由就是絕大部分庫的開發者在設計時只會考慮兩種運行環境,瀏覽器和 node,而小程序並不會在其考慮範圍內。所以,只要開發者的 JS 代碼使用了只有瀏覽器與 node 中才有的接口,如 DOM 操做、文件讀寫等,該庫就不能正常地運行在小程序環境中。除此以外,假如他們使用了小程序禁用的功能,例如全局變量與動態代碼執行,這時候代碼跑在小程序環境也會出錯。java

使用

使用 npm 安裝

一、 安裝 npm 包node

npm i miniprogram-licia --save

二、點擊開發者工具中的菜單欄:工具 --> 構建 npmjquery

三、直接在代碼中引入使用es6

const licia = require('miniprogram-licia');

licia.md5('licia'); // -> 'e59f337d85e9a467f1783fab282a41d0'
licia.safeGet({a: {b: 1}}, 'a.b'); // -> 1

生成定製化 util.js

使用 npm 包的方式會將全部功能引入到代碼包中,大概會增長 100 kb 的大小。若是你只想引入所需腳本,可使用在線工具生成定製化 util 庫。算法

一、訪問 https://licia.liriliri.io/builder.htmlnpm

二、輸入須要的模塊名,點擊生成下載 util.js。redux

三、將生成的工具庫拷貝到小程序項目任意目錄下而後直接引入使用。

const util = require('../lib/util');

util.wx.getStorage({
  key: 'test'
}).then(res => console.log(res.data));

優勢

一、目前擁有 270 多個模塊可在小程序中正常運行,而 underscore 只有 120 個函數左右。

二、與 lodash 相比增長了很多更加實用的函數,好比 md五、atob、btoa、Emitter、dateFormat 等。

三、能夠直接在小程序中引入運行,不像 lodash 須要進行必定的修改才能正常跑在小程序中。

四、定製化生成可使用更小體積的工具庫,這在限制了代碼包大小的小程序中十分有用。

附錄

這裏只簡單列出函數及其功能介紹,詳細的用法請訪問官網查看。

注:模塊名右邊有小程序圖標即代表能夠在小程序中使用。

  1. Class: 建立 JavaScript 類。
  2. Color: 顏色轉換。
  3. Dispatcher: Flux 調度器。
  4. Emitter: 提供觀察者模式的 Event emitter 類。
  5. Enum: Enum 類實現。
  6. JsonTransformer: JSON 轉換器。
  7. LinkedList: 雙向鏈表實現。
  8. Logger: 帶日誌級別的簡單日誌庫。
  9. Lru: 簡單 LRU 緩存。
  10. Promise: 輕量 Promise 實現。
  11. PseudoMap: 相似 es6 的 Map,不支持遍歷器。
  12. Queue: 隊列數據結構。
  13. QuickLru: 不使用鏈表的 LRU 實現。
  14. ReduceStore: 簡單類 redux 狀態管理。
  15. Stack: 棧數據結構。
  16. State: 簡單狀態機。
  17. Store: 內存存儲。
  18. Tween: JavaScript 補間動畫庫。
  19. Url: 簡單 url 操做庫。
  20. Validator: 對象屬性值校驗。
  21. abbrev: 計算字符串集的縮寫集合。
  22. after: 建立一個函數,只有在調用 n 次後纔會調用一次。
  23. allKeys: 獲取對象的全部鍵名,包括自身的及繼承的。
  24. arrToMap: 將字符串列表轉換爲映射。
  25. atob: window.atob,運行在 node 環境時使用 Buffer 進行模擬。
  26. average: 獲取數字的平均值。
  27. base64: base64 編解碼。
  28. before: 建立一個函數,只能調用少於 n 次。
  29. binarySearch: 二分查找實現。
  30. bind: 建立一個綁定到指定對象的函數。
  31. btoa: window.btoa,運行在 node 環境時使用 Buffer 進行模擬。
  32. bubbleSort: 冒泡排序實現。
  33. bytesToStr: 將字節數組轉換爲字符串。
  34. callbackify: 將返回 Promise 的函數轉換爲使用回調的函數。
  35. camelCase: 將字符串轉換爲駝峯式。
  36. capitalize: 將字符串的第一個字符轉換爲大寫,其他字符轉換爲小寫。
  37. castPath: 將值轉換爲屬性路徑數組。
  38. centerAlign: 字符串居中。
  39. char: 根據指定的整數返回 unicode 編碼爲該整數的字符。
  40. chunk: 將數組拆分爲指定長度的子數組。
  41. clamp: 將數字限定於指定區間。
  42. className: 合併 class。
  43. clone: 對指定對象進行淺複製。
  44. cloneDeep: 深複製。
  45. cmpVersion: 比較版本號。
  46. combine: 建立一個數組,用一個數組的值做爲其鍵名,另外一個數組的值做爲其值。
  47. compact: 返回數組的拷貝並移除其中的虛值。
  48. compose: 將多個函數組合成一個函數。
  49. concat: 將多個數組合併成一個數組。
  50. contain: 檢查數組中是否有指定值。
  51. convertBase: 對數字進行進制轉換。
  52. createAssigner: 用於建立 extend,extendOwn 和 defaults 等模塊。
  53. curry: 函數柯里化。
  54. dateFormat: 簡單日期格式化。
  55. debounce: 返回函數的防反跳版本。
  56. decodeUriComponent: 相似 decodeURIComponent 函數,只是輸入不合法時不拋出錯誤並儘量地對其進行解碼。
  57. defaults: 填充對象的默認值。
  58. define: 定義一個模塊,須要跟 use 模塊配合使用。
  59. defineProp: Object.defineProperty(defineProperties) 的快捷方式。
  60. delay: 在指定時長後執行函數。
  61. detectBrowser: 使用 ua 檢測瀏覽器信息。
  62. detectMocha: 檢測是否有 mocha 測試框架在運行。
  63. detectOs: 使用 ua 檢測操做系統。
  64. difference: 建立一個數組,該數組的元素不存在於給定的其它數組中。
  65. dotCase: 將字符串轉換爲點式。
  66. each: 遍歷集合中的全部元素,用每一個元素當作參數調用迭代器。
  67. easing: 緩動函數,參考 http://jqueryui.com/
  68. endWith: 檢查字符串是否以指定字符串結尾。
  69. escape: 轉義 HTML 字符串,替換 &,<,>,",`,和 ' 字符。
  70. escapeJsStr: 轉義字符串爲合法的 JavaScript 字符串字面量。
  71. escapeRegExp: 轉義特殊字符用於 RegExp 構造函數。
  72. every: 檢查是否集合中的全部元素都能經過真值檢測。
  73. extend: 複製多個對象中的全部屬性到目標對象上。
  74. extendDeep: 相似 extend,但會遞歸進行擴展。
  75. extendOwn: 相似 extend,但只複製本身的屬性,不包括原型鏈上的屬性。
  76. extractBlockCmts: 從源碼中提取塊註釋。
  77. extractUrls: 從文本中提取 url。
  78. fibonacci: 計算斐波那契數列中某位數字。
  79. fileSize: 將字節數轉換爲易於閱讀的形式。
  80. fill: 在數組指定位置填充指定值。
  81. filter: 遍歷集合中的每一個元素,返回全部經過真值檢測的元素組成的數組。
  82. find: 找到集合中第一個經過真值檢測的元素。
  83. findIdx: 返回第一個經過真值檢測元素在數組中的位置。
  84. findKey: 返回對象中第一個經過真值檢測的屬性鍵名。
  85. findLastIdx: 同 findIdx,只是查找順序改成從後往前。
  86. flatten: 遞歸拍平數組。
  87. fnParams: 獲取函數的參數名列表。
  88. format: 使用相似於 printf 的方式來格式化字符串。
  89. fraction: 轉換數字爲分數形式。
  90. freeze: Object.freeze 的快捷方式。
  91. freezeDeep: 遞歸進行 Object.freeze。
  92. gcd: 使用歐幾里德算法求最大公約數。
  93. getUrlParam: 獲取 url 參數值。
  94. has: 檢查屬性是不是對象自身的屬性(原型鏈上的不算)。
  95. hslToRgb: 將 hsl 格式的顏色值轉換爲 rgb 格式。
  96. identity: 返回傳入的第一個參數。
  97. idxOf: 返回指定值第一次在數組中出現的位置。
  98. indent: 對文本的每一行進行縮進處理。
  99. inherits: 使構造函數繼承另外一個構造函數原型鏈上的方法。
  100. insertionSort: 插入排序實現。
  101. intersect: 計算全部數組的交集。
  102. intersectRange: 計算兩個區間的交集。
  103. invert: 生成一個新對象,該對象的鍵名和鍵值進行調換。
  104. isAbsoluteUrl: 檢查 url 是不是絕對地址。
  105. isArgs: 檢查值是不是參數類型。
  106. isArr: 檢查值是不是數組類型。
  107. isArrBuffer: 檢查值是不是 ArrayBuffer 類型。
  108. isArrLike: 檢查值是不是類數組對象。
  109. isBool: 檢查值是不是布爾類型。
  110. isBrowser: 檢測是否運行於瀏覽器環境。
  111. isClose: 檢查兩個數字是否近似相等。
  112. isDataUrl: 檢查字符串是不是有效的 Data Url。
  113. isDate: 檢查值是不是 Date 類型。
  114. isEmail: 簡單檢查值是不是合法的郵件地址。
  115. isEmpty: 檢查值是不是空對象或空數組。
  116. isEqual: 對兩個對象進行深度比較,若是相等,返回真。
  117. isErr: 檢查值是不是 Error 類型。
  118. isEven: 檢查數字是不是偶數。
  119. isFinite: 檢查值是不是有限數字。
  120. isFn: 檢查值是不是函數。
  121. isGeneratorFn: 檢查值是不是 Generator 函數。
  122. isInt: 檢查值是不是整數。
  123. isJson: 檢查值是不是有效的 JSON。
  124. isLeapYear: 檢查年份是不是閏年。
  125. isMap: 檢查值是不是 Map 對象。
  126. isMatch: 檢查對象全部鍵名和鍵值是否在指定的對象中。
  127. isMiniProgram: 檢測是否運行於微信小程序環境中。
  128. isMobile: 使用 ua 檢測是否運行於移動端瀏覽器。
  129. isNaN: 檢測值是不是 NaN。
  130. isNative: 檢查值是不是原生函數。
  131. isNil: 檢查值是不是 null 或 undefined,等價於 value == null。
  132. isNode: 檢測是否運行於 node 環境中。
  133. isNull: 檢查值是不是 Null 類型。
  134. isNum: 檢測值是不是數字類型。
  135. isNumeric: 檢查值是不是數字,包括數字字符串。
  136. isObj: 檢查值是不是對象。
  137. isOdd: 檢查數字是不是奇數。
  138. isPlainObj: 檢查值是不是用 Object 構造函數建立的對象。
  139. isPrime: 檢查整數是不是質數。
  140. isPrimitive: 檢測值是不是字符串,數字,布爾值或 null。
  141. isPromise: 檢查值是不是類 promise 對象。
  142. isRegExp: 檢查值是不是正則類型。
  143. isRelative: 檢查路徑是不是相對路徑。
  144. isSet: 檢查值是不是 Set 類型。
  145. isSorted: 檢查數組是否有序。
  146. isStr: 檢查值是不是字符串。
  147. isTypedArr: 檢查值是否 TypedArray 類型。
  148. isUndef: 檢查值是不是 undefined。
  149. isUrl: 簡單檢查值是不是有效的 url 地址。
  150. isWeakMap: 檢查值是不是 WeakMap 類型。
  151. isWeakSet: 檢查值是不是 WeakSet 類型。
  152. kebabCase: 將字符串轉換爲短橫線式。
  153. keyCode: 鍵碼鍵名轉換。
  154. keys: 返回包含對象自身可遍歷全部鍵名的數組。
  155. last: 獲取數組的最後一個元素。
  156. linkify: 將文本中的 url 地址轉換爲超連接。
  157. longest: 獲取數組中最長的一項。
  158. lowerCase: 轉換字符串爲小寫。
  159. lpad: 對字符串進行左填充。
  160. ltrim: 刪除字符串頭部指定字符或空格。
  161. map: 對集合的每一個元素調用轉換函數生成與之對應的數組。
  162. mapObj: 相似 map,但針對對象,生成一個新對象。
  163. matcher: 傳入對象返回函數,若是傳入參數中包含該對象則返回真。
  164. max: 獲取數字中的最大值。
  165. md5: MD5 算法實現。
  166. memStorage: Web Storage 接口的純內存實現。
  167. memoize: 緩存函數計算結果。
  168. mergeSort: 歸併排序實現。
  169. methods: 獲取對象中全部方法名。
  170. min: 獲取數字中的最小值。
  171. moment: 簡單的類 moment.js 實現。
  172. ms: 時長字符串與毫秒轉換庫。
  173. negate: 建立一個將原函數結果取反的函數。
  174. nextTick: 可以同時運行在 node 和瀏覽器端的 next tick 實現。
  175. noop: 一個什麼也不作的空函數。
  176. normalizeHeader: 標準化 HTTP 頭部名。
  177. normalizePath: 標準化文件路徑中的斜槓。
  178. now: 獲取當前時間戳。
  179. objToStr: Object.prototype.toString 的別名。
  180. omit: 相似 pick,但結果相反。
  181. once: 建立只能調用一次的函數。
  182. optimizeCb: 用於高效的函數上下文綁定。
  183. pad: 對字符串進行左右填充。
  184. pairs: 將對象轉換爲包含【鍵名,鍵值】對的數組。
  185. parallel: 同時執行多個函數。
  186. parseArgs: 命令行參數簡單解析。
  187. partial: 返回局部填充參數的函數,與 bind 模塊類似。
  188. pascalCase: 將字符串轉換爲帕斯卡式。
  189. perfNow: 高精度時間戳。
  190. pick: 過濾對象。
  191. pluck: 提取數組對象中指定屬性值,返回一個數組。
  192. precision: 獲取數字的精度。
  193. promisify: 轉換使用回調的異步函數,使其返回 Promise。
  194. property: 返回一個函數,該函數返回任何傳入對象的指定屬性。
  195. query: 解析序列化 url 的 query 部分。
  196. quickSort: 快排實現。
  197. raf: requestAnimationFrame 快捷方式。
  198. random: 在給定區間內生成隨機數。
  199. randomItem: 隨機獲取數組中的某項。
  200. range: 建立整數數組。
  201. rc4: RC4 對稱加密算法實現。
  202. reduce: 合併多個值成一個值。
  203. reduceRight: 相似於 reduce,只是從後往前合併。
  204. reject: 相似 filter,但結果相反。
  205. remove: 移除集合中全部經過真值檢測的元素,返回包含全部刪除元素的數組。
  206. repeat: 重複字符串指定次數。
  207. restArgs: 將給定序號後的參數合併成一個數組。
  208. rgbToHsl: 將 rgb 格式的顏色值轉換爲 hsl 格式。
  209. root: 根對象引用,對於 nodeJs,取 global 對象,對於瀏覽器,取 window 對象。
  210. rpad: 對字符串進行右填充。
  211. rtrim: 刪除字符串尾部指定字符或空格。
  212. safeCb: 建立回調函數,內部模塊使用。
  213. safeDel: 刪除對象屬性。
  214. safeGet: 獲取對象屬性值,路徑不存在時不報錯。
  215. safeSet: 設置對象屬性值。
  216. sample: 從集合中隨機抽取部分樣本。
  217. selectionSort: 選擇排序實現。
  218. shuffle: 將數組中元素的順序打亂。
  219. size: 獲取對象的大小或類數組元素的長度。
  220. sleep: 使用 Promise 模擬暫停方法。
  221. slice: 截取數組的一部分生成新數組。
  222. snakeCase: 轉換字符串爲下劃線式。
  223. some: 檢查集合中是否有元素經過真值檢測。
  224. sortBy: 遍歷集合中的元素,將其做爲參數調用函數,並以獲得的結果爲依據對數組進行排序。
  225. spaceCase: 將字符串轉換爲空格式。
  226. splitCase: 將不一樣命名式的字符串拆分紅數組。
  227. splitPath: 將路徑拆分爲文件夾路徑,文件名和擴展名。
  228. startWith: 檢查字符串是否以指定字符串開頭。
  229. strHash: 使用 djb2 算法進行字符串哈希。
  230. strToBytes: 將字符串轉換爲字節數組。
  231. stringify: JSON 序列化,支持循環引用和函數。
  232. stripAnsi: 清除字符串中的 ansi 控制碼。
  233. stripCmt: 清除源碼中的註釋。
  234. stripColor: 清除字符串中的 ansi 顏色控制碼。
  235. stripHtmlTag: 清除字符串中的 html 標籤。
  236. sum: 計算數字和。
  237. swap: 交換數組中的兩項。
  238. template: 將模板字符串編譯成函數用於渲染。
  239. throttle: 返回函數的節流閥版本。
  240. timeAgo: 將時間格式化成多久以前的形式。
  241. timeTaken: 獲取函數的執行時間。
  242. times: 調用目標函數 n 次。
  243. toArr: 將任意值轉換爲數組。
  244. toBool: 將任意值轉換爲布爾值。
  245. toDate: 將任意值轉換爲日期類型。
  246. toInt: 將任意值轉換爲整數。
  247. toNum: 將任意值轉換爲數字。
  248. toSrc: 將函數轉換爲源碼。
  249. toStr: 將任意值轉換爲字符串。
  250. topoSort: 拓撲排序實現。
  251. trim: 刪除字符串兩邊指定字符或空格。
  252. tryIt: 在 try catch 塊中運行函數。
  253. type: 獲取 JavaScript 對象的內部類型。
  254. types: 僅用於生成 ts 定義文件。
  255. ucs2: UCS-2 編解碼。
  256. unescape: 和 escape 相反,轉義 HTML 實體回去。
  257. union: 返回傳入全部數組的並集。
  258. uniqId: 生成全局惟一 id。
  259. unique: 返回數組去重後的副本。
  260. unzip: 與 zip 相反。
  261. upperCase: 轉換字符串爲大寫。
  262. upperFirst: 將字符串的第一個字符轉換爲大寫。
  263. use: 使用 define 建立的模塊。
  264. utf8: UTF-8 編解碼。
  265. values: 返回對象全部的屬性值。
  266. vlq: vlq 編解碼。
  267. waitUntil: 等待直到條件函數返回真值。
  268. waterfall: 按順序執行函數序列。
  269. wrap: 將函數封裝到包裹函數裏面, 並把它做爲第一個參數傳給包裹函數。
  270. wx: 小程序 wx 對象的 promise 版本。
  271. zip: 將每一個數組中相應位置的值合併在一塊兒。
相關文章
相關標籤/搜索