Licia实用 JavaScript 工具库

联合创作 · 2023-09-22 02:34

Licia


Licia 是 Eustia 的官方模块,它一套在开发中实践积累起来的实用 JavaScript 工具库。该库目前拥有超过 300 个模块,包括 Dom 操作,cookie 设置,类创建,模板函数,日期格式化等实用模块,同时配套有打包工具 Eustia 进行定制化,使JS脚本加载量缩减在 10KB 以下,极大优化移动端页面的加载速度。


目前拥有的所有模块可 点此 查看。


开发背景


Licia 从一开始就不是为了单纯地替代 underscore 或 lodash 而生。它的目标是提供一系列在日常开发中使用率较高的 JavaScript 模块。因此,每一个新加入的模块都是在项目中实际使用到时才被添加进去。当前已经累积 300+ 模块,而且还在不断更新中,已经可以满足移动端日常开发的绝大部分需求。


你不再需要引入 zepto 了,因为已经有个类 jQuery 的模块了;不再需要引入 cookie 库了,因为已经有 cookie 操作模块了;不再需要moment 了,因为有个 dateFormat 可以满足大部分格式化需求了;不再需要引入 Promise pollyfill,因为已经有个通过 Promise A+ 测试的 Promise 库了;不再需要引入 EventEmitter 库了,因为已经有了;不再需要引入 ajax 库了,因为有 ajax,而且还有 fetch;不再需要引入underscore,仅仅是为了使用一个打乱数组的 shuffle 函数;还有那个引用数奇高的 mkdirp 模块,再也不需要再把它装到 node_modules 里去了。


使用方法


推荐使用官方打包工具 eustia 针对项目定制工具库按需引入。当然安装 **licia** 模块然后直接引用也是可以的。



npm i licia --save


var uuid = require('licia/uuid');

console.log(uuid()); // -> 0e3b84af-f911-4a55-b78a-cedf6f0bd815

你也可以直接使用在线工具进行自定义工具库的生成,请 点此 查看使用。


支持模块汇总


这里只简单列出函数及其功能介绍,详细的用法请访问 https://eustia.liriliri.io/module_cn.html 查看。


1. $: 类似 jQuery 的 dom 操作库。


2. $attr: 操作元素属性。


3. $class: 操作元素 class。


4. $css: 操作元素样式。


5. $data: 同 $attr,自动给属性名加 data- 前缀。


6. $event: 给指定 dom 元素绑定事件。


7. $insert: 插入 html 到不同位置。


8. $offset: 获取元素在文档中的位置。


9. $property: 设置或获取元素的 html, text,val 等值。


10. $remove: 移除指定元素集。


11. $safeEls: 将值转换为数组,如果值为字符串,使用 querySelector 获取元素集。


12. $show: 显示元素。


13. Blob: 如果支持 Blob,直接返回 Blob,否则使用 BlobBuilder 进行兼容。


14. Class: 创建 JavaScript 类。


15. Color: 颜色转换。


16. Dispatcher: Flux 调度器。


17. Emitter: 提供观察者模式的 Event emitter 类。


18. Enum: Enum 类实现。


19. JsonTransformer: JSON 转换器。


20. LinkedList: 双向链表实现。


21. LocalStore: LocalStorage 存储。


22. Logger: 带日志级别的简单日志库。


23. MutationObserver: MutationObserver 安全版本,如果不支持,则什么也不做。


24. Promise: 轻量 Promise 实现。


25. PseudoMap: 类似 es6 的 Map,不支持遍历器。


26. Queue: 队列数据结构。


27. ReduceStore: 简单类 redux 状态管理。


28. Select: querySelectorAll 的简单包装类。


29. SessionStore: SessionStorage 存储。


30. Stack: 栈数据结构。


31. State: 简单状态机。


32. Store: 内存存储。


33. Tween: JavaScript 补间动画库。


34. Url: 简单 url 操作库。


35. Validator: 对象属性值校验。


36. abbrev: 计算字符串集的缩写集合。


37. after: 创建一个函数,只有在调用 n 次后才会调用一次。


38. ajax: 执行异步 HTTP 请求。


39. allKeys: 获取对象的所有键名,包括自身的及继承的。


40. arrToMap: 将字符串列表转换为映射。


41. atob: window.atob,运行在 node 环境时使用 Buffer 进行模拟。


42. average: 获取数字的平均值。


43. base64: base64 编解码。


44. before: 创建一个函数,只能调用少于 n 次。


45. bind: 创建一个绑定到指定对象的函数。


46. btoa: window.btoa,运行在 node 环境时使用 Buffer 进行模拟。


47. bubbleSort: 冒泡排序实现。


48. callbackify: 将返回 Promise 的函数转换为使用回调的函数。


49. camelCase: 将字符串转换为驼峰式。


50. capitalize: 将字符串的第一个字符转换为大写,其余字符转换为小写。


51. castPath: 将值转换为属性路径数组。


52. centerAlign: 字符串居中。


53. char: 根据指定的整数返回 unicode 编码为该整数的字符。


54. chunk: 将数组拆分为指定长度的子数组。


55. clamp: 将数字限定于指定区间。


56. className: 合并 class。


57. clone: 对指定对象进行浅复制。


58. cloneDeep: 深复制。


59. cmpVersion: 比较版本号。


60. compact: 返回数组的拷贝并移除其中的虚值。


61. compose: 将多个函数组合成一个函数。


62. compressImg: 使用 canvas 对图像进行压缩。


63. concat: 将多个数组合并成一个数组。


64. contain: 检查数组中是否有指定值。


65. convertBase: 对数字进行进制转换。


66. cookie: 浏览器 cookie 操作库。


67. copy: 使用 document.execCommand 将文本拷贝到剪贴板。


68. createAssigner: 用于创建 extend,extendOwn 和 defaults 等模块。


69. createUrl: CreateObjectURL 的包裹函数。


70. cssSupports: 检查浏览器是否支持某项 CSS 特性。


71. curry: 函数柯里化。


72. dateFormat: 简单日期格式化。


73. debounce: 返回函数的防反跳版本。


74. debug: 简单的 JavaScript 输出 debug 日志函数。


75. decodeUriComponent: 类似 decodeURIComponent 函数,只是输入不合法时不抛出错误并尽可能地对其进行解码。


76. defaults: 填充对象的默认值。


77. define: 定义一个模块,需要跟 use 模块配合使用。


78. defineProp: Object.defineProperty(defineProperties) 的快捷方式。


79. delay: 在指定时长后执行函数。


80. delegate: 事件委托。


81. detectBrowser: 使用 ua 检测浏览器信息。


82. detectMocha: 检测是否有 mocha 测试框架在运行。


83. detectOs: 使用 ua 检测操作系统。


84. difference: 创建一个数组,该数组的元素不存在于给定的其它数组中。


85. dotCase: 将字符串转换为点式。


86. download: 在浏览器端触发文件下载。


87. each: 遍历集合中的所有元素,用每个元素当做参数调用 iteratee 函数。


88. easing: 缓动函数,参考 http://jqueryui.com/ 。


89. endWith: 检查字符串是否以指定字符串结尾。


90. escape: 转义 HTML 字符串,替换 &,<,>,",`,和 ' 字符。


91. escapeJsStr: 转义字符串为合法的 JavaScript 字符串字面量。


92. escapeRegExp: 转义特殊字符用于 RegExp 构造函数。


93. evalCss: 加载 css 到页面中。


94. evalJs: 在指定的上下文执行 js 代码。


95. every: 检查是否集合中的所有元素都能通过 predicate 的真值检测。


96. extend: 复制多个对象中的所有属性到目标对象上。


97. extendDeep: 类似 extend,但会递归进行扩展。


98. extendOwn: 类似 extend,但只复制自己的属性,不包括原型链上的属性。


99. extractBlockCmts: 从源码中提取块注释。


100. extractUrls: 从文本中提取 url。


101. fetch: 将 XMLHttpRequest 转换为 promise 的形式。


102. fibonacci: 计算斐波那契数列中某位数字。


103. fileSize: 将字节数转换为易于阅读的形式。


104. fill: 在数组指定位置填充指定值。


105. filter: 遍历集合中的每个元素,返回所有通过真值检测的元素组成的数组。


106. find: 找到集合中第一个通过真值检测的元素。


107. findIdx: 返回第一个通过真值检测元素在数组中的位置。


108. findKey: 返回对象中第一个通过真值检测的属性键名。


109. findLastIdx: 同 findIdx,只是查找顺序改为从后往前。


110. flatten: 递归拍平数组。


111. fnParams: 获取函数的参数名列表。


112. format: 使用类似于 printf 的方式来格式化字符串。


113. fraction: 转换数字为分数形式。


114. freeze: Object.freeze 的快捷方式。


115. freezeDeep: 递归进行 Object.freeze。


116. fs: node.js fs 模块的 promise 版本。


117. gcd: 使用欧几里德算法求最大公约数。


118. getUrlParam: 获取 url 参数值。


119. has: 检查属性是否是对象自身的属性(原型链上的不算)。


120. hotkey: 监听键盘触发对应的事件。


121. hslToRgb: 将 hsl 格式的颜色值转换为 rgb 格式。


122. identity: 返回传入的第一个参数。


123. idxOf: 返回指定值第一次在数组中出现的位置。


124. indent: 对文本的每一行进行缩进处理。


125. inherits: 使构造函数继承另一个构造函数原型链上的方法。


126. insertionSort: 插入排序实现。


127. intersect: 计算所有数组的交集。


128. intersectRange: 计算两个区间的交集。


129. invert: 生成一个新对象,该对象的键名和键值进行调换。


130. isAbsoluteUrl: 检查 url 是否是绝对地址。


131. isArgs: 检查值是否是参数类型。


132. isArr: 检查值是否是数组类型。


133. isArrBuffer: 检查值是否是 ArrayBuffer 类型。


134. isArrLike: 检查值是否是类数组对象。


135. isBlob: 检查值是否是 Blob 类型。


136. isBool: 检查值是否是布尔类型。


137. isBrowser: 检测是否运行于浏览器环境。


138. isBuffer: 检查值是否是 Buffer 类型。


139. isClose: 检查两个数字是否近似相等。


140. isDataUrl: 检查字符串是否是有效的 Data Url。


141. isDate: 检查值是否是 Date 类型。


142. isEl: 检查值是否是 DOM 元素。


143. isEmail: 简单检查值是否是合法的邮件地址。


144. isEmpty: 检查值是否是空对象或空数组。


145. isEqual: 对两个对象进行深度比较,如果相等,返回真。


146. isErr: 检查值是否是 Error 类型。


147. isEven: 检查数字是否是偶数。


148. isFile: 检查值是否是 File 类型。


149. isFinite: 检查值是否是有限数字。


150. isFn: 检查值是否是函数。


151. isGeneratorFn: 检查值是否是 Generator 函数。


152. isInt: 检查值是否是整数。


153. isJson: 检查值是否是有效的 JSON。


154. isLeapYear: 检查年份是否是闰年。


155. isMap: 检查值是否是 Map 对象。


156. isMatch: 检查对象所有键名和键值是否在指定的对象中。


157. isMiniProgram: 检测是否运行于微信小程序环境中。


158. isMobile: 使用 ua 检测是否运行于移动端浏览器。


159. isNaN: 检测值是否是 NaN。


160. isNative: 检查值是否是原生函数。


161. isNil: 检查值是否是 null 或 undefined,等价于 value == null。


162. isNode: 检测是否运行于 node 环境中。


163. isNull: 检查值是否是 Null 类型。


164. isNum: 检测值是否是数字类型。


165. isNumeric: 检查值是否是数字,包括数字字符串。


166. isObj: 检查值是否是对象。


167. isOdd: 检查数字是否是奇数。


168. isPlainObj: 检查值是否是用 Object 构造函数创建的对象。


169. isPrimitive: 检测值是否是字符串,数字,布尔值或 null。


170. isPromise: 检查值是否是类 promise 对象。


171. isRegExp: 检查值是否是正则类型。


172. isRelative: 检查路径是否是相对路径。


173. isRetina: 判断是否运行在 retina 屏幕的设备上。


174. isSet: 检查值是否是 Set 类型。


175. isSorted: 检查数组是否有序。


176. isStr: 检查值是否是字符串。


177. isStream: 检查值是否是 Node.js Stream 类型。


178. isTypedArr: 检查值是否 TypedArray 类型。


179. isUndef: 检查值是否是 undefined。


180. isUrl: 简单检查值是否是有效的 url 地址。


181. isWeakMap: 检查值是否是 WeakMap 类型。


182. isWeakSet: 检查值是否是 WeakSet 类型。


183. isWindows: 检测是否运行在 windows 操作系统上。


184. jsonp: 简单 jsonp 实现。


185. kebabCase: 将字符串转换为短横线式。


186. keyCode: 键码键名转换。


187. keys: 返回包含对象自身可遍历所有键名的数组。


188. last: 获取数组的最后一个元素。


189. lazyRequire: 模块懒加载。


190. linkify: 将文本中的 url 地址转换为超链接。


191. loadCss: 往页面插入样式链接。


192. loadImg: 加载指定地址的图片。


193. loadJs: 往页面插入脚本链接。


194. longest: 获取数组中最长的一项。


195. lowerCase: 转换字符串为小写。


196. lpad: 对字符串进行左填充。


197. ltrim: 删除字符串头部指定字符或空格。


198. map: 对集合的每个元素调用转换函数生成与之对应的数组。


199. mapObj: 类似 map,但针对对象,生成一个新对象。


200. matcher: 传入对象返回函数,如果传入参数中包含该对象则返回真。


201. max: 获取数字中的最大值。


202. memStorage: Web Storage 接口的纯内存实现。


203. memoize: 缓存函数计算结果。


204. mergeSort: 归并排序实现。


205. meta: meta 操作库,将 name 和 content 属性值转换为键值对。


206. methods: 获取对象中所有方法名。


207. min: 获取数字中的最小值。


208. mkdir: 递归地创建文件夹。


209. moment: 简单的类 moment.js 实现。


210. ms: 时长字符串与毫秒转换库。


211. negate: 创建一个将原函数结果取反的函数。


212. nextTick: 能够同时运行在 node 和浏览器端的 next tick 实现。


213. noop: 一个什么也不做的空函数。


214. normalizePath: 标准化文件路径中的斜杠。


215. now: 获取当前时间戳。


216. objToStr: Object.prototype.toString 的别名。


217. omit: 类似 pick,但结果相反。


218. once: 创建只能调用一次的函数。


219. optimizeCb: 用于高效的函数上下文绑定。


220. orientation: 屏幕方向工具库。


221. pad: 对字符串进行左右填充。


222. pairs: 将对象转换为包含【键名,键值】对的数组。


223. parallel: 同时执行多个函数。


224. parseArgs: 命令行参数简单解析。


225. partial: 返回局部填充参数的函数,与 bind 模块相似。


226. pascalCase: 将字符串转换为帕斯卡式。


227. perfNow: 高精度时间戳。


228. pick: 过滤对象。


229. pluck: 提取数组对象中指定属性值,返回一个数组。


230. precision: 获取数字的精度。


231. prefix: 给 css 属性名增加浏览器前缀。


232. promisify: 转换使用回调的异步函数,使其返回 Promise。


233. property: 返回一个函数,该函数返回任何传入对象的指定属性。


234. query: 解析序列化 url 的 query 部分。


235. quickSort: 快排实现。


236. raf: requestAnimationFrame 快捷方式。


237. random: 在给定区间内生成随机数。


238. randomBytes: 随机字节序列生成器。


239. randomItem: 随机获取数组中的某项。


240. range: 创建整数数组。


241. ready: dom 准备好时调用回调函数,类似于 jQuery 的 ready 方法。


242. reduce: 合并多个值成一个值。


243. reduceRight: 类似于 reduce,只是从后往前合并。


244. reject: 类似 filter,但结果相反。


245. remove: 移除集合中所有通过真值检测的元素,返回包含所有删除元素的数组。


246. repeat: 重复字符串指定次数。


247. restArgs: 将给定序号后的参数合并成一个数组。


248. rgbToHsl: 将 rgb 格式的颜色值转换为 hsl 格式。


249. rmCookie: 遍历所有可能的路径和域名将 cookie 删除。


250. rmdir: 递归地删除文件夹。


251. root: 根对象引用,对于 nodeJs,取 `global` 对象,对于浏览器,取 `window` 对象。


252. rpad: 对字符串进行右填充。


253. rtrim: 删除字符串尾部指定字符或空格。


254. safeCb: 创建回调函数,内部模块使用。


255. safeDel: 删除对象属性。


256. safeGet: 获取对象属性值,路径不存在时不报错。


257. safeSet: 设置对象属性值。


258. safeStorage: 安全地使用 storage,使其在旧浏览器及 safari 无痕模式下能正常运行。


259. sample: 从集合中随机抽取部分样本。


260. scrollTo: 以动画的形式滚动到指定目标。


261. selectionSort: 选择排序实现。


262. shuffle: 将数组中元素的顺序打乱。


263. size: 获取对象的大小或类数组元素的长度。


264. slice: 截取数组的一部分生成新数组。


265. snakeCase: 转换字符串为下划线式。


266. some: 检查集合中是否有元素通过真值检测。


267. sortBy: 遍历集合中的元素,将其作为参数调用函数,并以得到的结果为依据对数组进行排序。


268. spaceCase: 将字符串转换为空格式。


269. splitCase: 将不同命名式的字符串拆分成数组。


270. splitPath: 将路径拆分为文件夹路径,文件名和扩展名。


271. startWith: 检查字符串是否以指定字符串开头。


272. strHash: 使用 djb2 算法进行字符串哈希。


273. stringify: JSON 序列化,支持循环引用和函数。


274. stripAnsi: 清除字符串中的 ansi 控制码。


275. stripCmt: 清除源码中的注释。


276. stripColor: 清除字符串中的 ansi 颜色控制码。


277. stripHtmlTag: 清除字符串中的 html 标签。


278. sum: 计算数字和。


279. swap: 交换数组中的两项。


280. template: 将模板字符串编译成函数用于渲染。


281. throttle: 返回函数的节流阀版本。


282. through: stream Transform 类的简单包装。


283. timeAgo: 将时间格式化成多久之前的形式。


284. timeTaken: 获取函数的执行时间。


285. toArr: 将任意值转换为数组。


286. toBool: 将任意值转换为布尔值。


287. toDate: 将任意值转换为日期类型。


288. toEl: 将 html 字符串转换为 dom 元素。


289. toInt: 将任意值转换为整数。


290. toNum: 将任意值转换为数字。


291. toSrc: 将函数转换为源码。


292. toStr: 将任意值转换为字符串。


293. topoSort: 拓扑排序实现。


294. trigger: 触发浏览器事件。


295. trim: 删除字符串两边指定字符或空格。


296. tryIt: 在 try catch 块中运行函数。


297. type: 获取 JavaScript 对象的内部类型。


298. ucs2: UCS-2 编解码。


299. unescape: 和 escape 相反,转义 HTML 实体回去。


300. union: 返回传入所有数组的并集。


301. uniqId: 生成全局唯一 id。


302. unique: 返回数组去重后的副本。


303. unzip: 与 zip 相反。


304. upperCase: 转换字符串为大写。


305. upperFirst: 将字符串的第一个字符转换为大写。


306. use: 使用 define 创建的模块。


307. utf8: UTF-8 编解码。


308. uuid: 生成符合 RFC4112 版本 4 协议的 uuid。


309. values: 返回对象所有的属性值。


310. viewportScale: 获取窗口缩放比。


311. waterfall: 按顺序执行函数序列。


312. workerize: 将函数运行在 worker 线程中。


313. wrap: 将函数封装到包裹函数里面, 并把它作为第一个参数传给包裹函数。


314. zip: 将每个数组中相应位置的值合并在一起。

浏览 21
点赞
评论
收藏
分享

手机扫一扫分享

编辑 分享
举报
评论
图片
表情
推荐
点赞
评论
收藏
分享

手机扫一扫分享

编辑 分享
举报