前端一款小巧、零依赖的工具库!

lxf2023-03-12 12:42:01

大家好,我是前端实验室的老鱼!一名资深的互联网玩家,专注分享大前端领域技术、面试宝典、学习资料等~

今天大给大家推荐一个简单又灵活的工具库:Licia

前言

大家在前端开发过程中,有没有碰见下面这样的问题?

  • 因为要进行几个Dom操作,引入整个zepto文件。

  • 要使用数组的几个操作,引入 underscore 或 lodash
    ...

为了几个小小的操作,引入了一个个大大的包。严重影响了项目包的体积和项目开发效率。

现在这个问题可以由Licia来解决。

简介

Licia 是一套在开发中实践积累起来的实用 JavaScript 工具库。该库目前拥有超过 400 个模块。

前端一款小巧、零依赖的工具库!

它包括 Dom 操作,cookie 设置,类创建,模板函数,日期格式化等实用模块,可以极大地提高开发效率。同时配套有打包工具 Eustia 进行定制化,使JS脚本加载量缩减在 10KB 以下,极大优化移动端页面的加载速度。

优势

1.同时支持浏览器、node 及小程序运行环境 在开发中,我们发现相当一部分 npm 包是无法直接在小程序中跑起来的。比如前端工程师十分常用的 lodash,在小程序中引入会报错。要进行一定的修改才能正常跑在小程序中。
2.比lodash和underscore增加更多的适用函数
400+ 的模块不是吹的。md5、atob、btoa、Emitter、dateFormat等方法精炼简单。
3.定制化生成可以使用更小体积的工具库
这应该是大师兄最喜欢的点了。只需要工程中需要的函数,其他通通砍掉!

使用方法

1、 安装 npm 包

npm i miniprogram-licia --save

2、直接在代码中引入使用

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

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

需要 es 模块版本以支持 tree-shaking,可以使用 licia-es。你也可以直接使用在线工具进行自定义工具库的生成。

生成定制化 util.js

使用 npm 包的方式会将所有功能引入到代码包中,大概会增加 100 kb 的大小。如果你只想引入所需脚本,可以使用在线工具生成定制化 util 库。

1、访问 licia.liriliri.io/builder.htm…

2、输入需要的模块名,点击生成下载 util.js。

前端一款小巧、零依赖的工具库! 3、将生成的工具库拷贝到小程序项目任意目录下然后直接引入使用。

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

util.md5('licia'); // -> 'e59f337d85e9a467f1783fab282a41d0'
util.safeGet({a: {b1}}, 'a.b'); // -> 1
util.wx.getStorage({
  key'test'
}).then(res => console.log(res.data));

其他

Licia 的目标是提供一系列在日常开发中使用率较高的 JavaScript 模块。因此,每一个新加入的模块都是在项目中实际使用到时才被添加进去。相信它可以满足大家日常开发的绝大部分需求了。更多内容请查看官方文档

官方地址 licia.liriliri.io/

开启AdminJS成长之旅!这是我参与「AdminJS日新计划 · 2 月更文挑战」的第 5 天,点击查看活动详情