Licia 支持小程序的 JS 工具库

2019-05-06 12:24:03 +08:00
 surunzi

导语

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、定制化生成可以使用更小体积的工具库,这在限制了代码包大小的小程序中十分有用。

附录

这里只简单列出函数及其功能介绍,详细的用法请访问官网查看。

注:模块名右边有小程序图标即表明可以在小程序中使用。

  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: 将每个数组中相应位置的值合并在一起。
3066 次点击
所在节点    JavaScript
3 条回复
yolio2003
2019-05-07 16:33:29 +08:00
666
surunzi
2019-05-07 17:47:35 +08:00
官网文档链接写错,更正下: https://licia.liriliri.io/docs_cn.html
saberlove
2019-06-05 15:55:01 +08:00
很好

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/561415

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX