摘要:为了避免不同项目之间进行复制粘贴,可以将这些常用的函数封装到一起并发布包。目前所包含模块已达三百个,基本可以满足前端的日常工发需求。二使用打包工具该项目自带打包工具,可以通过配置文件或命令行扫描源码自动生成项目专用的工具库。
前言
在业务开发过程中,我们经常会重复使用日期格式化、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方法,先直接在代码中使用:
Eustia
然后跑下命令:
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.
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/94762.html
摘要:注模块名右边有小程序图标即表明可以在小程序中使用。转义字符串为合法的字符串字面量。转义特殊字符用于构造函数。使构造函数继承另一个构造函数原型链上的方法。 导语 Licia 是一套在开发中实践积累起来的实用 JavaScript 工具库。该库目前拥有超过 300 个模块,同时支持浏览器、node 及小程序运行环境,提供了包括日期格式化、md5、颜色转换等实用模块,可以极大地提高开发效率。...
摘要:非常的庞大,而且它是完全为设计而生的动效库。它运行于纯粹的之上,是目前最强健的动画资源库之一。可能是创建滚动特效最好用的工具,它支持大量的浏览器,只要它们支持和特性。可以通过安装吊炸天了,接近现实生活中的物理运动碰撞惯性动画库。 收集日期为2019-02-28,★代表当时的该项目在github的star数量 Animate.css 56401 ★ 一个跨浏览器的动效基础库,是许多基础动...
摘要:也是一款优秀的响应式框架站点所使用的一套框架为微信服务量身设计的一套框架一组很小的,响应式的组件,你可以在网页的项目上到处使用一个可定制的文件,使浏览器呈现的所有元素,更一致和符合现代标准。 GitHub 值得收藏的前端项目 整理与收集的一些比较优秀github项目,方便自己阅读,顺便分享出来,大家一起学习,本篇文章会持续更新,版权归原作者所有。欢迎github star与fork 预...
阅读 2408·2021-10-08 10:17
阅读 1798·2021-09-06 15:02
阅读 2505·2019-08-29 17:30
阅读 2627·2019-08-29 13:24
阅读 1474·2019-08-29 11:12
阅读 3313·2019-08-28 17:52
阅读 633·2019-08-26 11:30
阅读 3546·2019-08-26 11:01