V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
推荐关注
Meteor
JSLint - a JavaScript code quality tool
jsFiddle
D3.js
WebStorm
推荐书目
JavaScript 权威指南第 5 版
Closure: The Definitive Guide
surunzi
V2EX  ›  JavaScript

Licia 支持小程序的 JS 工具库

  •  
  •   surunzi · 2019-05-06 12:24:03 +08:00 · 3069 次点击
    这是一个创建于 2064 天前的主题,其中的信息可能已经有所发展或是发生改变。

    导语

    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: 将每个数组中相应位置的值合并在一起。
    3 条回复    2019-06-05 15:55:01 +08:00
    surunzi
        2
    surunzi  
    OP
       2019-05-07 17:47:35 +08:00
    官网文档链接写错,更正下: https://licia.liriliri.io/docs_cn.html
    saberlove
        3
    saberlove  
       2019-06-05 15:55:01 +08:00
    很好
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   902 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 38ms · UTC 20:12 · PVG 04:12 · LAX 12:12 · JFK 15:12
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.