Licia：最全最实用的 JavaScript 工具库

前言

在业务开发过程中，我们经常会重复使用日期格式化、cookie 操作、模板、浏览器判断、类型判断等功能。为了避免不同项目之间进行复制粘贴，可以将这些常用的函数封装到一起并发布 npm 包。在将近三年的前端开发工作中，笔者将自己平时用到的工具库统统封装到了一个项目中 Licia。目前所包含模块已达三百个，基本可以满足前端的日常工发需求。如果你对该项目感兴趣，欢迎试用并帮忙持续改进:)

使用方法

一、安装 npm 包

首先安装 npm 包到本地。

npm i licia --save

安装完之后，你就可以直接在项目中引用模块了，就像使用 lodash 一样。

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

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

二、使用打包工具

该项目自带打包工具 eustia，可以通过配置文件或命令行扫描源码自动生成项目专用的工具库。

npm i eustia -g

假设你想html文件中使用trim方法，先直接在代码中使用：

<html>
<head>
    <meta charset="utf-8"/>
    <title>Eustia</title>
    <script src="util.js"></script>
</head>
<body>
    <script>
    var projectName = _.trim(' Eustia ');
    // Some code...
    </script>
</body>
</html>

然后跑下命令：

eustia build

该工具会扫描你的html代码并生成一个util.js(默认文件名)文件，大功告成！

PS: 之前做的手机调试工具 eruda 源码里的 util.js 就是使用该工具生成的:)

三、使用在线工具生成 util 库

你可以直接访问 https://eustia.liriliri.io/builder.html 在输入框输入需要的工具函数（以逗号分隔），然后点击下载 util.js 文件并将该文件放入项目中去即可。

支持模块汇总

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

$: jQuery like style dom manipulator.
$attr: Element attribute manipulation.
$class: Element class manipulations.
$css: Element css manipulation.
[$data](https://eustia.liriliri.io/module.html#dollar-data): Wrapper of $attr, adds data- prefix to keys.
$event: bind events to certain dom elements.
$insert: Insert html on different position.
$offset: Get the position of the element in document.
$property: Element property html, text, val getter and setter.
$remove: Remove the set of matched elements from the DOM.
$safeEls: Convert value into an array, if it's a string, do querySelector.
$show: Show elements.
Blob: Use Blob when available, otherwise BlobBuilder.
Class: Create JavaScript class.
Color: Color converter.
Dispatcher: Flux dispatcher.
Emitter: Event emitter class which provides observer pattern.
Enum: Enum type implementation.
JsonTransformer: Json to json transformer.
LinkedList: Doubly-linked list implementation.
LocalStore: LocalStorage wrapper.
Logger: Simple logger with level filter.
MutationObserver: Safe MutationObserver, does nothing if MutationObserver is not supported.
Promise: Lightweight Promise implementation.
Queue: Queue data structure.
ReduceStore: Simplified redux like state container.
Select: Simple wrapper of querySelectorAll to make dom selection easier.
SessionStore: SessionStorage wrapper.
Stack: Stack data structure.
State: Simple state machine.
Store: Memory storage.
Tween: Tween engine for JavaScript animations.
Url: Simple url manipulator.
Validator: Object values validation.
abbrev: Calculate the set of unique abbreviations for a given set of strings.
after: Create a function that invokes once it's called n or more times.
ajax: Perform an asynchronous HTTP request.
allKeys: Retrieve all the names of object's own and inherited properties.
arrToMap: Make an object map using array of strings.
atob: Use Buffer to emulate atob when running in node.
average: Get average value of given numbers.
base64: Basic base64 encoding and decoding.
before: Create a function that invokes less than n times.
bind: Create a function bound to a given object.
btoa: Use Buffer to emulate btoa when running in node.
bubbleSort: Bubble sort implementation.
callbackify: Convert a function that returns a Promise to a function following the error-first callback style.
camelCase: Convert string to "camelCase".
capitalize: Convert the first character to upper case and the remaining to lower case.
castPath: Cast value into a property path array.
centerAlign: Center align text in a string.
char: Return string representing a character whose Unicode code point is the given integer.
chunk: Split array into groups the length of given size.
clamp: Clamp number within the inclusive lower and upper bounds.
className: Utility for conditionally joining class names.
clone: Create a shallow-copied clone of the provided plain object.
cloneDeep: Recursively clone value.
cmpVersion: Compare version strings.
compact: Return a copy of the array with all falsy values removed.
compose: Compose a list of functions.
compressImg: Compress image using canvas.
concat: Concat multiple arrays into a single array.
contain: Check if the value is present in the list.
convertBase: Convert base of a number.
cookie: Simple api for handling browser cookies.
copy: Copy text to clipboard using document.execCommand.
createAssigner: Used to create extend, extendOwn and defaults.
createUrl: CreateObjectURL wrapper.
cssSupports: Check if browser supports a given CSS feature.
curry: Function currying.
dateFormat: Simple but extremely useful date format function.
debounce: Return a new debounced version of the passed function.
debug: A tiny JavaScript debugging utility.
decodeUriComponent: Better decodeURIComponent that does not throw if input is invalid.
defaults: Fill in undefined properties in object with the first value present in the following list of defaults objects.
define: Define a module, should be used along with use.
defineProp: Shortcut for Object.defineProperty(defineProperties).
delay: Invoke function after certain milliseconds.
delegate: Event delegation.
detectBrowser: Detect browser info using ua.
detectOs: Detect operating system using ua.
difference: Create an array of unique array values not included in the other given array.
dotCase: Convert string to "dotCase".
download: Trigger a file download on client side.
each: Iterate over elements of collection and invokes iteratee for each element.
easing: Easing functions adapted from http://jqueryui.com/
endWith: Check if string ends with the given target string.
escape: Escapes a string for insertion into HTML, replacing &, <, >, ", `, and ' characters.
escapeJsStr: Escape string to be a valid JavaScript string literal between quotes.
escapeRegExp: Escape special chars to be used as literals in RegExp constructors.
evalCss: Load css into page.
evalJs: Execute js in given context.
every: Check if predicate return truthy for all elements.
extend: Copy all of the properties in the source objects over to the destination object.
extendDeep: Recursive object extending.
extendOwn: Like extend, but only copies own properties over to the destination object.
extractBlockCmts: Extract block comments from source code.
extractUrls: Extract urls from plain text.
fetch: Turn XMLHttpRequest into promise like.
fibonacci: Calculate fibonacci number.
fileSize: Turn bytes into human readable file size.
fill: Fill elements of array with value.
filter: Iterates over elements of collection, returning an array of all the values that pass a truth test.
find: Find the first value that passes a truth test in a collection.
findIdx: Return the first index where the predicate truth test passes.
findKey: Return the first key where the predicate truth test passes.
findLastIdx: Return the last index where the predicate truth test passes.
flatten: Recursively flatten an array.
fnParams: Get a function parameter's names.
format: Format string in a printf-like format.
fraction: Convert number to fraction.
freeze: Shortcut for Object.freeze.
freezeDeep: Recursively use Object.freeze.
gcd: Compute the greatest common divisor using Euclid's algorithm.
getUrlParam: Get url param.
has: Checks if key is a direct property.
hotkey: Capture keyboard input to trigger given events.
hslToRgb: Convert hsl to rgb.
identity: Return the first argument given.
idxOf: Get the index at which the first occurrence of value.
indent: Indent each line in a string.
inherits: Inherit the prototype methods from one constructor into another.
insertionSort: Insertion sort implementation.
intersect: Compute the list of values that are the intersection of all the arrays.
intersectRange: Intersect two ranges.
invert: Create an object composed of the inverted keys and values of object.
isAbsoluteUrl: Check if an url is absolute.
isArgs: Check if value is classified as an arguments object.
isArr: Check if value is an Array object.
isArrBuffer: Check if value is an ArrayBuffer.
isArrLike: Check if value is array-like.
isBlob: Check if value is a Blob.
isBool: Check if value is a boolean primitive.
isBrowser: Check if running in a browser.
isBuffer: Check if value is a buffer.
isClose: Check if values are close(almost equal) to each other.
isDataUrl: Check if a string is a valid data url.
isDate: Check if value is classified as a Date object.
isEl: Check if value is a DOM element.
isEmail: Loosely validate an email address.
isEmpty: Check if value is an empty object or array.
isEqual: Performs an optimized deep comparison between the two objects, to determine if they should be considered equal.
isErr: Check if value is an error.
isEven: Check if number is even.
isFile: Check if value is a file.
isFinite: Check if value is a finite primitive number.
isFn: Check if value is a function.
isGeneratorFn: Check if value is a generator function.
isInt: Checks if value is classified as a Integer.
isJson: Check if value is a valid JSON.
isLeapYear: Check if a year is a leap year.
isMatch: Check if keys and values in src are contained in obj.
isMiniProgram: Check if running in wechat mini program.
isMobile: Check whether client is using a mobile browser using ua.
isNaN: Check if value is an NaN.
isNative: Check if value is a native function.
isNil: Check if value is null or undefined, the same as value == null.
isNode: Check if running in node.
isNull: Check if value is an Null.
isNum: Check if value is classified as a Number primitive or object.
isNumeric: Check if value is numeric.
isObj: Check if value is the language type of Object.
isOdd: Check if number is odd.
isPlainObj: Check if value is an object created by Object constructor.
isPrimitive: Check if value is string, number, boolean or null.
isPromise: Check if value looks like a promise.
isRegExp: Check if value is a regular expression.
isRelative: Check if path appears to be relative.
isRetina: Determine if running on a high DPR device or not.
isStr: Check if value is a string primitive.
isStream: Check if value is a Node.js stream.
isTypedArr: Check if value is a typed array.
isUndef: Check if value is undefined.
isUrl: Loosely validate an url.
isWindows: Check if platform is windows.
jsonp: A simple jsonp implementation.
kebabCase: Convert string to "kebabCase".
keyCode: Key codes and key names conversion.
keys: Create an array of the own enumerable property names of object.
last: Get the last element of array.
lazyRequire: Require modules lazily.
linkify: Hyperlink urls in a string.
loadCss: Inject link tag into page with given href value.
loadImg: Load image with given src.
loadJs: Inject script tag into page with given src value.
longest: Get the longest item in an array.
lowerCase: Convert string to lower case.
lpad: Pad string on the left side if it's shorter than length.
ltrim: Remove chars or white-spaces from beginning of string.
map: Create an array of values by running each element in collection through iteratee.
mapObj: Map for objects.
matcher: Return a predicate function that checks if attrs are contained in an object.
max: Get maximum value of given numbers.
memStorage: Memory-backed implementation of the Web Storage API.
memoize: Memoize a given function by caching the computed result.
meta: Document meta manipulation, turn name and content into key value pairs.
methods: Return a sorted list of the names of every method in an object.
min: Get minimum value of given numbers.
mkdir: Recursively create directories.
moment: Tiny moment.js like implementation.
ms: Convert time string formats to milliseconds.
negate: Create a function that negates the result of the predicate function.
nextTick: Next tick for both node and browser.
noop: A no-operation function.
normalizePath: Normalize file path slashes.
now: Gets the number of milliseconds that have elapsed since the Unix epoch.
objToStr: Alias of Object.prototype.toString.
omit: Opposite of pick.
once: Create a function that invokes once.
optimizeCb: Used for function context binding.
orientation: Screen orientation helper.
pad: Pad string on the left and right sides if it's shorter than length.
pairs: Convert an object into a list of [key, value] pairs.
parallel: Run an array of functions in parallel.
parseArgs: Parse command line argument options, the same as minimist.
partial: Partially apply a function by filling in given arguments.
pascalCase: Convert string to "pascalCase".
perfNow: High resolution time up to microsecond precision.
pick: Return a filtered copy of an object.
pluck: Extract a list of property values.
precision: Find decimal precision of a given number.
prefix: Add vendor prefixes to a CSS attribute.
promisify: Convert callback based functions into Promises.
property: Return a function that will itself return the key property of any passed-in object.
query: Parse and stringify url query strings.
raf: Shortcut for requestAnimationFrame.
random: Produces a random number between min and max(inclusive).
randomBytes: Random bytes generator.
range: Create flexibly-numbered lists of integers.
ready: Invoke callback when dom is ready, similar to jQuery ready.
reduce: Turn a list of values into a single value.
reject: Opposite of filter.
remove: Remove all elements from array that predicate returns truthy for and return an array of the removed elements.
repeat: Repeat string n-times.
restArgs: This accumulates the arguments passed into an array, after a given index.
rgbToHsl: Convert rgb to hsl.
rmCookie: Loop through all possible path and domain to remove cookie.
rmdir: Recursively remove directories.
root: Root object reference, global in nodeJs, window in browser.
rpad: Pad string on the right side if it's shorter than length.
rtrim: Remove chars or white-spaces from end of string.
safeCb: Create callback based on input value.
safeDel: Delete object property.
safeGet: Get object property, don't throw undefined error.
safeSet: Set value at path of object.
safeStorage: Use storage safely in safari private browsing and older browsers.
sample: Sample random values from a collection.
scrollTo: Scroll to a target with animation.
selectionSort: Selection sort implementation.
shuffle: Randomize the order of the elements in a given array.
size: Get size of object, length of array like object or the number of keys.
slice: Create slice of source array or array-like object.
snakeCase: Convert string to "snakeCase".
some: Check if predicate return truthy for any element.
spaceCase: Convert string to "spaceCase".
splitCase: Split different string case to an array.
splitPath: Split path into device, dir, name and ext.
startWith: Check if string starts with the given target string.
strHash: String hash function using djb2.
stringify: JSON stringify with support for circular object, function etc.
stripAnsi: Strip ansi codes from a string.
stripCmt: Strip comments from source code.
stripColor: Strip ansi color codes from a string.
stripHtmlTag: Strip html tags from a string.
sum: Compute sum of given numbers.
template: Compile JavaScript template into function that can be evaluated for rendering.
throttle: Return a new throttled version of the passed function.
through: Tiny wrapper of stream Transform.
timeAgo: Format datetime with * time ago statement.
timeTaken: Get execution time of a function.
toArr: Convert value to an array.
toBool: Convert value to a boolean.
toDate: Convert value to a Date.
toEl: Convert html string to dom elements.
toInt: Convert value to an integer.
toNum: Convert value to a number.
toSrc: Convert function to its source code.
toStr: Convert value to a string.
topoSort: Topological sorting algorithm.
trigger: Trigger browser events.
trim: Remove chars or white-spaces from beginning end of string.
tryIt: Run function in a try catch.
type: Determine the internal JavaScript [[Class]] of an object.
ucs2: UCS-2 encoding and decoding.
unescape: Convert HTML entities back, the inverse of escape.
union: Create an array of unique values, in order, from all given arrays.
uniqId: Generate a globally-unique id.
unique: Create duplicate-free version of an array.
unzip: Opposite of zip.
upperCase: Convert string to upper case.
upperFirst: Convert the first character of string to upper case.
use: Use modules that is created by define.
utf8: UTF-8 encoding and decoding.
uuid: RFC4122 version 4 compliant uuid generator.
values: Create an array of the own enumerable property values of object.
viewportScale: Get viewport scale.
waterfall: Run an array of functions in series.
workerize: Move a stand-alone function to a worker thread.
wrap: Wrap the function inside a wrapper function, passing it as the first argument.
zip: Merge together the values of each of the arrays with the values at the corresponding position.

Licia：最全最实用的 JavaScript 工具库

前言

使用方法

一、安装 npm 包

二、使用打包工具

三、使用在线工具生成 util 库

支持模块汇总

surunzi

引用和评论

VSCode 插件推荐：前端配置可视化编辑

前端如何入门 Go 语言

100个React最佳实践小技巧

gitbook使用教程

前端开发工具

开发插件集合

喜大普奔，适用于 VS Code 的 GitHub Copilot 全新免费版本正式推出，GitHub 全球开发者突破1.5亿