English | 简体中文
mazey is a functional library for daily front-end work. There are already many excellent libraries for front-end development, but creating a file named utils.js
or common.js
is generally used to supply common functions in projects. It's boring to copy similar functions across multiple projects. That's why I've created this library and will keep updating it to serve as a reliable resource for front-end needs.
Use mazey via npm.
npm install mazey --save
Use mazey from CDN.
<script type="text/javascript" src="//i.mazey.net/mazey/lib/mazey.min.js"></script>
Of course, you can also download this file and serve it yourself. The file locates at the lib/mazey.min.js
.
Example: Use a function to load JavaScript script.
Import from npm.
import { isNumber } from 'mazey';
const x = Infinity;
isNumber(x); // <=> typeof x === 'string' && !isNaN(x) && isFinite(x)
// Output: false
Import from CDN.
<script type="text/javascript" src="//i.mazey.net/mazey/lib/mazey.min.js"></script>
<script>
const x = Infinity;
mazey.isNumber(x, { isInfinityAsNumber: true }); // <=> typeof x === 'string' && !isNaN(x)
// Output: true
</script>
There are some examples maintained by hand below. For more information, please check the full documentation.
Table of Contents
Load a JavaScript file from the server and execute it.
loadScript(
'http://example.com/static/js/plugin-2.1.1.min.js',
{
id: 'iamid', // (Optional) script ID, default none
timeout: 5000, // (Optional) timeout, default `5000`
isDefer: false, // (Optional) defer, default `false`
}
)
.then(
res => {
console.log(`Load JavaScript script: ${res}`);
}
)
.catch(
err => {
console.error(`Load JavaScript script: ${err.message}`)
}
);
Load a script from the given URL if it (window['attribute']
) has not already been loaded.
loadScriptIfUndefined('jQuery', 'https://example.com/lib/jquery.min.js')
.then(() => {
console.log('jQuery is loaded.');
})
.catch(err => {
console.log('Failed to load jQuery.', err);
});
Load a CSS file from the server.
loadCSS(
'http://example.com/path/example.css',
{
id: 'iamid', // Optional, link ID, default none
}
)
.then(
res => {
console.log(`Load CSS Success: ${res}`);
}
)
.catch(
err => {
console.error(`Load CSS Fail: ${err.message}`)
}
);
Load an image from the given URL.
The target image will be loaded in the background, and the Promise status will change after the image is loaded. If the image fails to load, the Promise status will change to reject
with the error object. If the image is loaded successfully, the Promise status will change to resolve
with the image object. This method can be used to preload images and cache them in the browser. It can also be used to implement lazy loading of images.
Note that this method will not add the image to the DOM.
loadImage('https://example.com/example.png')
.then((img) => {
console.log(img);
})
.catch((err) => {
console.log(err);
});
Check whether the page is loaded successfully (Keep the compatibility if the browser's load
event has been triggered).
windowLoaded(30) // second
.then(res => {
console.log(`Load Success: ${res}`); // Load Success: load
})
.catch(err => {
console.log(`Load Timeout or Fail: ${err.message}`);
});
Check whether it is a right number.
isNumber(123); // true
isNumber('123'); // false
// Default: NaN, Infinity is not Number
isNumber(Infinity); // false
isNumber(Infinity, { isInfinityAsNumber: true }); // true
isNumber(NaN); // false
isNumber(NaN, { isNaNAsNumber: true, isInfinityAsNumber: true }); // true
Check whether it is a valid JSON string.
Usage:
isJSONString(`['a', 'b', 'c']`);
isJSONString(`["a", "b", "c"]`);
Output:
false
true
Determine the validity of the data.
Usage:
const validData = {
a: {
b: {
c: 413
}
}
};
const isValidDataResA = isValidData(validData, ['a', 'b', 'c'], 2333);
const isValidDataResB = isValidData(validData, ['a', 'b', 'c'], 413);
const isValidDataResC = isValidData(validData, ['d', 'd'], 413);
console.log('isValidDataResA:', isValidDataResA);
console.log('isValidDataResB:', isValidDataResB);
console.log('isValidDataResC:', isValidDataResC);
Output:
isValidDataResA: false
isValidDataResB: true
isValidDataResC: false
Produce a random string of number, genRndNumString(7)
=> '7658495'.
genRndNumString(4); // '9730'
genRndNumString(7); // '2262490'
Return the formatted date string in the given format.
Usage:
console.log('Default formatDate value:', formatDate());
console.log('String formatDate value:', formatDate('Tue Jan 11 2022 14:12:26 GMT+0800 (China Standard Time)', 'yyyy-MM-dd hh:mm:ss'));
console.log('Number formatDate value:', formatDate(1641881235000, 'yyyy-MM-dd hh:mm:ss'));
console.log('Date formatDate value:', formatDate(new Date(2014, 1, 11), 'MM/dd/yyyy'));
Output:
Default formatDate value: 2023-01-11
String formatDate value: 2022-01-11 14:12:26
Number formatDate value: 2022-01-11 14:07:15
Date formatDate value: 02/11/2014
Debounce
const foo = debounce(() => {
console.log('The debounced function will only be invoked in 1000 milliseconds, the other invoking will disappear during the wait time.');
}, 1000, true);
Throttle
const foo = throttle(() => {
console.log('The function will be invoked at most once per every wait 1000 milliseconds.');
}, 1000, { leading: true });
Reference: Lodash
Transfer CamelCase to KebabCase.
convertCamelToKebab('ABC'); // a-b-c
convertCamelToKebab('aBC'); // a-b-c
Transfer CamelCase to Underscore.
convertCamelToUnder('ABC'); // a_b_c
convertCamelToUnder('aBC'); // a_b_c
Copy/Clone Object deeply.
Usage:
deepCopy(['a', 'b', 'c']);
deepCopy('abc');
Output:
['a', 'b', 'c']
'abc'
Get the query param's value of the current Web URL(location.search
).
// http://example.com/?t1=1&t2=2&t3=3&t4=4#2333
// ?t1=1&t2=2&t3=3&t4=4
getQueryParam('t3'); // 3
getQueryParam('t4'); // 4
Returns the value of the specified query parameter in the input URL.
getUrlParam('http://example.com/?t1=1&t2=2&t3=3&t4=4', 't3'); // Returns '3'
getUrlParam('http://example.com/?t1=1&t2=2&t3=3&t4=4', 't4'); // Returns '4'
Get the hash query param's value of the current Web URL(location.hash
).
Usage:
// http://example.com/?#2333?t1=1&t2=2&t3=3&t4=4
// #2333?t1=1&t2=2&t3=3&t4=4
getHashQueryParam('t3');
getHashQueryParam('t4');
Output:
3
4
Get the domain of URL, and other params.
Usage:
getDomain('http://example.com/?t1=1&t2=2&t3=3&t4=4');
getDomain('http://example.com/test/thanks?t1=1&t2=2&t3=3&t4=4', ['hostname', 'pathname']);
getDomain('http://example.com:7890/test/thanks', ['hostname']);
getDomain('http://example.com:7890/test/thanks', ['host']); // With Port
getDomain('http://example.com:7890/test/thanks', ['origin']);
getDomain('http://example.com:7890/test/thanks?id=1', ['origin', 'pathname', 'search']);
Output:
example.com
example.com/test/thanks
example.com
example.com:7890
http://example.com:7890
http://example.com:7890/test/thanks?id=1
Update the query param's value of the input URL.
Usage:
updateQueryParam('http://example.com/?t1=1&t2=2&t3=3&t4=4', 't3', 'three');
updateQueryParam('http://example.com/?t1=1&t2=2&t3=3&t4=4', 't4', 'four');
Output:
http://example.com/?t1=1&t2=2&t3=three&t4=4
http://example.com/?t1=1&t2=2&t3=3&t4=four
Checks if the given string is a valid URL, including scheme URLs.
isValidUrl('https://www.example.com'); // true
isValidUrl('http://example.com/path/exx/ss'); // true
isValidUrl('https://www.example.com/?q=hello&age=24#world'); // true
isValidUrl('http://www.example.com/#world?id=9'); // true
isValidUrl('ftp://example.com'); // true
If you are specifically checking for HTTP/HTTPS URLs, it is recommended to use the isValidHttpUrl
function instead.
The isValidUrl
function matches all scheme URLs, including FTP and other non-HTTP schemes.
Check if the given string is a valid HTTP/HTTPS URL.
isValidHttpUrl('https://www.example.com'); // true
isValidHttpUrl('http://example.com/path/exx/ss'); // true
isValidHttpUrl('https://www.example.com/?q=hello&age=24#world'); // true
isValidHttpUrl('http://www.example.com/#world?id=9'); // true
isValidHttpUrl('ftp://example.com'); // false
Handle Cookie.
setCookie('test', '123', 30, 'example.com'); // key value day domain
getCookie('test'); // 123
Handle Storage (Keep fit for JSON, it can transfer format automatically).
setSessionStorage('test', '123');
getSessionStorage('test'); // 123
setLocalStorage('test', '123');
getLocalStorage('test'); // 123
// or package in usage
const projectName = 'mazey';
function mSetLocalStorage (key, value) {
return setLocalStorage(`${projectName}_${key}`, value);
}
function mGetLocalStorage (key) {
return getLocalStorage(`${projectName}_${key}`);
}
Add <style>
in <head>
.
Example 1: Add the <style>
with id
, and repeated invoking will update the content instead of adding a new one.
addStyle(
`
body {
background-color: #333;
}
`,
{
id: 'test',
}
);
// <style id="test">
// body {
// background-color: #333;
// }
// </style>
Example 2: Add the <style>
without id
, and repeated invoking will add a new one.
addStyle(
`
body {
background-color: #444;
}
`
);
// <style>
// body {
// background-color: #444;
// }
// </style>
Modify class
.
const dom = document.querySelector('#box');
// Determine `class`
hasClass(dom, 'test');
// Add `class`
addClass(dom, 'test');
// Remove `class`
removeClass(dom, 'test');
Make a new line of HTML.
newLine('a\nb\nc'); // 'a<br />b<br />c'
newLine('a\n\nbc'); // 'a<br /><br />bc'
Hit probability (1% ~ 100%).
Usage:
inRate(0.5); // 0.01 ~ 1 true/false
Output:
true
Example: Test the precision.
// Test
let trueCount = 0;
let falseCount = 0;
new Array(1000000).fill(0).forEach(() => {
if (inRate(0.5)) {
trueCount++;
} else {
falseCount++;
}
});
console.log(trueCount, falseCount); // 499994 500006
Computes the longest common substring of two strings.
Usage:
longestComSubstring('fish', 'finish');
Output:
3
Computes the longest common subsequence of two strings.
Usage:
longestComSubsequence('fish', 'finish');
Output:
4
Browser Information
Usage:
getBrowserInfo();
Output:
{"engine":"webkit","engineVs":"537.36","platform":"desktop","supporter":"chrome","supporterVs":"85.0.4183.121","system":"windows","systemVs":"10"}
Results:
Attribute | Description | Type | Values |
---|---|---|---|
system | System | string | android, ios, windows, macos, linux |
systemVs | System version | string | windows: 2000, xp, 2003, vista, 7, 8, 8.1, 10 macos: ... |
platform | Platform | string | desktop, mobile |
engine | Engine | string | webkit, gecko, presto, trident |
engineVs | Engine version | string | - |
supporter | Supporter | string | edge, opera, chrome, safari, firefox, iexplore |
supporterVs | Supporter version | string | - |
shell | Shell | string | (Optional) wechat, qq_browser, qq_app, uc, 360, 2345, sougou, liebao, maxthon, bilibili |
shellVs | Shell version | string | (Optional) 20/... |
appleType | Apple device type | string | (Optional) ipad, iphone, ipod, iwatch |
Example: Determine the environment of the mobile QQ.
const { system, shell } = getBrowserInfo();
const isMobileQQ = ['android', 'ios'].includes(system) && ['qq_browser', 'qq_app'].includes(shell);
Detect the margin of Safety. Determine if it is a secure PWA environment that it can run.
Usage:
isSafePWAEnv();
Output:
true
Get page load time(PerformanceNavigationTiming
).
This function uses the PerformanceNavigationTiming
API to get page load time data.
The PerformanceNavigationTiming
API provides more accurate and detailed information about page load time than the deprecated PerformanceTiming
API.
If you are using an older browser that does not support PerformanceNavigationTiming
, you can still use the PerformanceTiming
API by using the previous version of this library (v3.9.7
).
Usage:
// `camelCase:false` (Default) Return underline(`a_b`) data.
// `camelCase:true` Return hump(`aB`) data.
getPerformance()
.then(res => {
console.log(JSON.stringify(res));
})
.catch(console.error);
Output:
{"source":"PerformanceNavigationTiming","os":"others","os_version":"","device_type":"pc","network":"4g","screen_direction":"","unload_time":0,"redirect_time":0,"dns_time":0,"tcp_time":0,"ssl_time":0,"response_time":2,"download_time":2,"first_paint_time":288,"first_contentful_paint_time":288,"dom_ready_time":0,"onload_time":0,"white_time":0,"render_time":0,"decoded_body_size":718,"encoded_body_size":718}
Results:
Attribute | Description | Type | Values |
---|---|---|---|
dns_time | DNS Lookup | number | domainLookupEnd - domainLookupStart |
tcp_time | Connection Negotiation | number | connectEnd - connectStart |
response_time | Requests and Responses | number | responseStart - requestStart |
white_time | White Screen | number | responseStart - navigationStart |
dom_ready_time | Dom Ready | number | domContentLoadedEventStart - navigationStart |
onload_time | Onload | number | loadEventStart - navigationStart |
render_time | EventEnd | number | loadEventEnd -navigationStart |
unload_time | Unload | number | (Optional) unloadEventEnd - unloadEventStart |
redirect_time | Redirect | number | (Optional) redirectEnd - redirectStart |
ssl_time | SSL | number | (Optional) connectEnd - secureConnectionStart |
download_time | Download | number | (Optional) responseEnd - responseStart |
Custom console printing (console
).
Usage:
const myConsole = genCustomConsole('MazeyLog:');
myConsole.log('I am string.');
myConsole.info('I am boolean.', true);
myConsole.info('I am number.', 123, 456);
myConsole.info('I am object.', { a: 123, b: 456});
Output:
MazeyLog: I am string.
MazeyLog: I am boolean. true
MazeyLog: I am number. 123 456
MazeyLog: I am object. {a: 123, b: 456}
Install Dependencies
npm i
Development
npm run dev
Build
npm run build
Document
npm run docs
Test
npm run test
Values | Description | Type |
---|---|---|
ok | The operation was successful. | string |
loaded | Some assets have been loaded. | string |
fail | An error occurred. | string |
defined | The value is defined. | string |
undefined | The value is undefined. | string |
timeout | The operation timed out. | string |
true | The value is true. | boolean |
false | The value is false. | boolean |
This software is released under the terms of the MIT license.