mazey 3.5.4 → 3.6.1

package/README_CN.md

@@ -1,359 +0,0 @@
-⚠️ Note: The document has expired, please check the latest [README.md](./README.md).
-
-# mazey
-
-[![NPM version][npm-image]][npm-url]
-[![l][l-image]][l-url]
-
-[npm-image]: ./images/mazey-v1.4.39.svg
-[npm-url]: https://www.npmjs.com/package/mazey/v/1.4.39
-[l-image]: https://img.shields.io/npm/l/mazey
-[l-url]: https://github.com/mazeyqian/mazey
-
-后除的 JavaScript 函数库，所有的方法都在线上项目中使用过。
-
-**目录**
-
-- [mazey](#mazey)
-  - [安装](#安装)
-  - [使用](#使用)
-    - [加载资源](#加载资源)
-    - [存储数据](#存储数据)
-    - [操作 DOM](#操作-dom)
-    - [网站性能](#网站性能)
-    - [公式计算](#公式计算)
-    - [浏览器信息](#浏览器信息)
-    - [安全边际](#安全边际)
-    - [函数](#函数)
-    - [调试](#调试)
-  - [开发](#开发)
-  - [参考](#参考)
-
-## 安装
-
-使用 [NPM](https://www.npmjs.com/package/mazey/v/1.4.39) 安装 mazey@1.4.39
-
-```
-npm install mazey@1.4.39 --save
-```
-
-## 使用
-
-### 加载资源
-
-加载 JavaScript
-
-```
-import { loadScript } from 'mazey';
-
-loadScript({
-  url: 'http://www.mazey.net/js/plugin/jquery/jquery-2.1.1.min.js',
-  id: 'iamid', // 可选，script 标签 ID，默认无 ID
-  timeout: 5000, // 可选，超时时间，默认 5000
-  isDefer: false, // 可选，defer，默认 false
-})
-  .then(
-    res => {
-      console.log(`加载 JavaScript 成功: ${res}`);
-    }
-  )
-  .catch(
-    err => {
-      console.error(`加载 JavaScript 失败: ${err}`)
-    }
-  );
-```
-
-加载 CSS
-
-```
-import { loadCSS } from 'mazey';
-
-loadCSS({
-  url: 'http://www.mazey.net/css/mazey-base.css',
-  id: 'iamid', // 可选，link 标签 ID，默认无 ID
-})
-  .then(
-    res => {
-      console.log(`加载 CSS 成功: ${res}`);
-    }
-  )
-  .catch(
-    err => {
-      console.error(`加载 CSS 失败: ${err}`)
-    }
-  );
-```
-
-判断页面是否加载完成（兼容浏览器 `load` 事件已经触发过的情况）
-
-```
-import { loadCSS } from 'mazey';
-
-windowLoaded({ timeout: 30 })
-  .then(res => {
-    console.log(`加载完成：${res}`); // 加载完成：load
-  })
-  .catch(err => {
-    console.log(`加载超时或失败：${err}`);
-  });
-```
-
-### 存储数据
-
-Storage（兼容 JSON 格式，自行转换）
-
-```
-import { setSessionStorage, getSessionStorage, setLocalStorage, getLocalStorage } from 'mazey';
-
-setSessionStorage('test', '123');
-getSessionStorage('test'); // 123
-setLocalStorage('test', '123');
-getLocalStorage('test'); // 123
-```
-
-Cookie
-
-```
-import { setCookie, getCookie } from 'mazey';
-
-setCookie('test', '123', 30, 'mazey.net'); // key value day domain
-getCookie('test'); // 123
-```
-
-### 操作 DOM
-
-修改 `class`
-
-```
-import { hasClass, addClass, removeClass } from 'mazey';
-
-const dom = document.querySelector('#box');
-
-// 判断 class
-hasClass(dom, 'test');
-// 增加 class
-addClass(dom, 'test');
-// 删除 class
-removeClass(dom, 'test');
-```
-
-添加内联样式
-
-```
-import { addInlineStyle } from 'mazey';
-
-// 添加有 id 的内联样式，重复添加会更新内联样式而不是新增
-addInlineStyle({
-  inlineStyle: `
-    body {
-      background-color: #333;
-    }
-  `,
-  id: 'test',
-});
-// <style id="test">
-//   body {
-//     background-color: #333;
-//   }
-// </style>
-
-// 添加无 id 的内联样式，重复添加会新增内联样式
-addInlineStyle({
-  inlineStyle: `
-    body {
-      background-color: #444;
-    }
-  `,
-});
-// <style>
-//   body {
-//     background-color: #444;
-//   }
-// </style>
-```
-
-添加自定义滚动条（适用于用 `transform` 移动的元素）
-
-```
-import { customScrollBarForTransformEle } from 'mazey';
-
-// 使用类名
-customScrollBarForTransformEle({
-  containerClassName: 'i-am-container',
-  imgBoxClassName: 'i-am-img-father-i-can-transform',
-  imgClassName: 'i-am-img',
-});
-
-// 使用 Dom 对象
-customScrollBarForTransformEle({
-  containerClassName: 'i-am-container',
-  imgBoxDom: document.querySelector('.i-am-img-father-i-can-transform'),
-  imgDom: document.querySelector('.i-am-img-father-i-can-transform'),
-});
-
-// 按需直接隐藏滚动条
-customScrollBarForTransformEle({
-  containerClassName: 'i-am-container',
-  action: 'hide',
-});
-```
-
-计算适配容器宽度的图片的尺寸、距离顶部的距离
-
-```
-import { calcContainImageSizeAndPosition } from 'mazey';
-
-// 如果高度不足以占满容器，使其垂直居中；如果高度比容器长，由上向下铺开
-calcContainImageSizeAndPosition({ oriImageWidth: 300, oriImageHeight: 300, viewportWidth: 375, viewportHeight: 812 });
-// {"targetImageWidth":375,"targetImageHeight":375,"top":218.5,"wPer":1.25}
-```
-
-### 网站性能
-
-获取加载时间
-
-```
-import { getPerformance } from 'mazey';
-
-// camelCase：true（默认） 以驼峰形式返回数据 / false 以下划线形式返回数据
-getPerformance({ camelCase: true })
- .then(res => {
-  console.log(JSON.stringify(res));
-  // {"deviceType":"pc","network":"3g","unloadTime":0,"redirectTime":0,"dnsTime":0,"tcpTime":0,"responseTime":65,"downloadTime":1,"domreadyTime":369,"onloadTime":441,"whiteTime":94,"renderTime":441,"decodedBodySize":210,"encodedBodySize":210}
- })
- .catch(console.error);
-```
-
-| 指标 | 字段 | 计算⽅法 |
-| --- | --- | --- |
-| * DNS 查询时间 | dns_time | domainLookupEnd - domainLookupStart |
-| * 服务器连接时间 | tcp_time | connectEnd - connectStart |
-| * 服务器响应时间 | response_time | responseStart - requestStart |
-| * ⽩屏时间 | white_time | responseStart - navigationStart |
-| * DomReady 总时间 | domready_time  | domContentLoadedEventStart - navigationStart |
-| * 页面加载时间 | onload_time | loadEventStart - navigationStart |
-| * EventEnd 总时间 | render_time | loadEventEnd -navigationStart |
-| 上个⽂档卸载时间 | unload_time | unloadEventEnd - unloadEventStart |
-| 重定向时间 | redirect_time | redirectEnd - redirectStart |
-| 客户端⽩屏时间 | custom_white_time | renderTiming - navigationStart |
-| SSL连接时间 | ssl_time | connectEnd - secureConnectionStart |
-| ⽹⻚下载时间 | download_time | responseEnd - responseStart |
-| FCP | first_contentful_paint_time | firstPaintTime |
-
-### 公式计算
-
-计算两个字符串的最长公共子串
-
-```
-import { calLongestCommonSubstring } from 'mazey';
-
-calLongestCommonSubstring('fish', 'finish'); // 3
-```
-
-计算两个字符串的最长公共子序列
-
-```
-import { calLongestCommonSubsequence } from 'mazey';
-
-calLongestCommonSubsequence('fish', 'finish'); // 4
-```
-
-命中概率（1% ~ 100%）
-
-```
-import { inRate } from 'mazey';
-
-inRate(0.5); // 0.01 ~ 1 true / false
-
-// 测试准确性
-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
-```
-
-### 浏览器信息
-
-```
-import { getBrowserType } from 'mazey';
-
-getBrowserType(); // {"engine":"webkit","engineVs":"537.36","platform":"desktop","supporter":"chrome","supporterVs":"85.0.4183.121","system":"windows","systemVs":"10"}
-// 外壳和外壳版本 { shell: 'wechat', shellVs: '20' } shell: wechat qq uc 360 2345 sougou liebao maxthon
-```
-
-### 安全边际
-
-判断是否是安全的 PWA 运行环境
-
-```
-import { isSafePWAEnv } from 'mazey';
-
-isSafePWAEnv(); // true
-```
-
-### 函数
-
-防抖
-
-```
-import { debounce } from 'mazey';
-
-const foo = debounce(() => {
-  console.log('执行 1 秒内再次执行无反应');
-}, 1000, { leading: true })
-```
-
-判断是否是有效数字
-
-```
-import { isNumber } from 'mazey';
-
-isNumber(123); // true
-isNumber('123'); // false
-// 默认情况下 NaN、Infinity 不算有效数字
-isNumber(Infinity); // false
-isNumber(Infinity, { isUnFiniteAsNumber: true }); true
-isNumber(NaN); // false
-isNumber(NaN, { isNaNAsNumber: true, isUnFiniteAsNumber: true }); // true
-```
-
-### 调试
-
-自定义控制台打印（`console`）
-
-```
-import { genCustomConsole } from 'mazey';
-
-const myConsole = genCustomConsole({ prefix: 'MazeyLog:' });
-myConsole.log('I am string.'); // MazeyLog: I am string.
-myConsole.info('I am boolean.', true); // MazeyLog: I am boolean. true
-myConsole.info('I am number.', 123, 456); // MazeyLog: I am number. 123 456
-myConsole.info('I am object.', { a: 123, b: 456}); // MazeyLog: I am object. {a: 123, b: 456}
-```
-
-[更多接口>>](https://mazey.cn/docs/mazey/modules/_index_.html)
-
-## 开发
-
-```
-# dev
-npm run dev
-
-# build
-npm run build
-
-# documentation
-npm run docs
-```
-
-## 参考
-
-1. [@babel/preset-env conflicts with @babel/plugin-transform-runtime when using core-js@3](https://github.com/babel/babel/issues/10271#issuecomment-528379505)
-2. [@babel/plugin-transform-runtime](https://babeljs.io/docs/en/babel-plugin-transform-runtime)

package/examples/index.html

@@ -1,21 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <title>Test Page</title>
-  <link rel="shortcut icon" type="image/png" href="https://mazey.cn/fav/logo-dark-circle-transparent-144x144.png">
-  <style>
-    .box {
-      color: #333;
-    }
-  </style>
-</head>
-<body>
-    <div class="container">
-      <div class="box">
-        <span>Box</span>
-      </div>
-      <div class="s"></div>
-    </div>
-</body>
-</html>

package/examples/index.ts

@@ -1,121 +0,0 @@
-import {
-  isNumber,
-  getUrlParam,
-  updateQueryParam,
-  getHashQueryParam,
-  getDomain,
-  camelCaseToKebabCase,
-  camelCase2Underscore,
-  generateRndNum,
-  isNonEmptyArray,
-  getFileSize,
-  isSupportWebp,
-  genHashCode,
-  debounce,
-  genCustomConsole,
-  formatDate,
-  isValidData
-} from '../src/index';
-
-// Sync
-console.log(
-  'Is Infinity number?',
-  isNumber(Infinity, { isUnFiniteAsNumber: true })
-);
-console.log(
-  'Is NaN number?',
-  isNumber(NaN, { isNaNAsNumber: true, isUnFiniteAsNumber: true })
-);
-console.log('Did ttt exist?', getHashQueryParam('ttt'));
-console.log(
-  'What is t3?',
-  getUrlParam('http://example.com/?t1=1&t2=2&t3=3&t4=4', 't3')
-);
-console.log(
-  'Can query param update successfully?',
-  updateQueryParam('http://example.com/?t1=1&t2=2&t3=3&t4=4', 't3', 'three')
-);
-console.log(
-  'What is domain?',
-  getDomain('http://example.com/?t1=1&t2=2&t3=3&t4=4')
-);
-console.log('Get KebabCase:', camelCaseToKebabCase('aBC'));
-console.log('Get Underscore:', camelCase2Underscore('bBC'));
-console.log('Get a string with random number:', generateRndNum(7));
-console.log('Is non-empty array?', isNonEmptyArray(['a', 123]));
-console.log('Get file size:', getFileSize(2000));
-console.log('Generate a Hash from a string:', genHashCode('123'));
-const genLog = genCustomConsole('GenLog:', {
-  isClosed: false,
-  showWrap: false,
-  showDate: true,
-  locales: 'zh-CN'
-});
-genLog.log('test?');
-// const s011101 = ;
-console.log('Default formatDate value:', formatDate());
-// 2022-01-11
-console.log(
-  'String formatDate value:',
-  formatDate(
-    'Tue Jan 11 2022 14:12:26 GMT+0800 (China Standard Time)',
-    'yyyy-MM-dd hh:mm:ss'
-  )
-);
-// 2022-01-11 14:12:26
-console.log(
-  'Number formatDate value:',
-  formatDate(1641881235000, 'yyyy-MM-dd hh:mm:ss')
-);
-// 2022-01-11 14:07:15
-// (new Date(2014, 1, 11), 'MM/dd/yyyy')
-console.log(
-  'Date formatDate value:',
-  formatDate(new Date(2014, 1, 11), 'MM/dd/yyyy')
-);
-// Date formatDate value: 02/11/2014
-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);
-
-// isValidDataResA: false
-// isValidDataResB: true
-// isValidDataResC: false
-
-// Async
-(async () => {
-  console.log('Detect webp support:', await isSupportWebp());
-
-  // debounce
-  console.log('Test debounce - begin');
-  const c = debounce(
-    () => {
-      console.log('Test debounce - fun myself');
-    },
-    3000,
-    true
-  );
-  console.log('Test debounce - invoke first');
-  c();
-  setTimeout(() => {
-    c();
-    console.log('Test debounce - 2000ms second');
-  }, 2000);
-  setTimeout(() => {
-    c();
-    console.log('Test debounce - 10000ms third');
-  }, 10000);
-  console.log('Test debounce - end');
-})();

package/images/mazey-v1.4.39.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="88" height="20" role="img" aria-label="npm: v1.4.39"><title>npm: v1.4.39</title><linearGradient id="s" x2="0" y2="100%"><stop offset="0" stop-color="#bbb" stop-opacity=".1"/><stop offset="1" stop-opacity=".1"/></linearGradient><clipPath id="r"><rect width="88" height="20" rx="3" fill="#fff"/></clipPath><g clip-path="url(#r)"><rect width="35" height="20" fill="#555"/><rect x="35" width="53" height="20" fill="#007ec6"/><rect width="88" height="20" fill="url(#s)"/></g><g fill="#fff" text-anchor="middle" font-family="Verdana,Geneva,DejaVu Sans,sans-serif" text-rendering="geometricPrecision" font-size="110"><text aria-hidden="true" x="185" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="250">npm</text><text x="185" y="140" transform="scale(.1)" fill="#fff" textLength="250">npm</text><text aria-hidden="true" x="605" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="430">v1.4.39</text><text x="605" y="140" transform="scale(.1)" fill="#fff" textLength="430">v1.4.39</text></g></svg>