xesl v0.1.4

XESL

版本0.1.4

规范

JSDoc

DOM

• 操作dom相关方法

addEvent

在dom对象elem上添加type类型的处理函数callback

/**
 * @param {Element} elem
 * @param {String} type
 * @param {function} callback
 * @return {void}
 */

使用

xesl.DOM.addEvent(/* DOM对象 */, "click", () => {
    // 处理逻辑
});

AutoAdaptive

通过监听屏幕尺寸变化设置html的fontsize实现基于rem的自动适配

/**
 * @constructor
 * @param {Array<subarea>} scopes
 */

构造器

• constructor

/**
 * @description: html标签的fontSize属性 自动适配
 * @param {Array<subarea>} scopes
 * @return {AutoAdaptive}
 */

• scopes默认值

new Array(
    // mobile
    {
        max: 768,
        size: 750,
    },
    // pad
    {
        min: 769,
        max: 1024,
        size: 1024,
    },
    // pc
    {
        min: 1025,
        size: 1920,
    },
);

成员方法

• start

/**
 * @description: 开启屏幕尺寸变化监听，并设置html的fontSize
 * @param {number} [rate=100]
 * @param {number} [fontSize=14] body 上的font-size
 * @return {void}
 */

• stop

/**
 * @description: 停止监听屏幕变化
 * @return {void}
 */

使用

// 创建实例对象
const autoAdaptive = new xesl.DOM.AutoAdaptive();
// 启动监听
autoAdaptive.start();
// 停止监听
autoAdaptive.stop();

cancelHandler

取消默认事件

/**
 * @param {Event} event
 * @return {*}
 */

使用

xesl.DOM.cancelHandler(event);

downloadFile

下载文件

/**
 * @param {string} url // 文件路径
 * @param {string | number} name // 文件名，默认当前时间戳
 * @return {void}
 */

使用

xesl.DOM.downloadFile("http://文件地址");

getEventSource

获取事件源对象

/**
 * @param {Event} e
 * @return {EventTarget | null}
 */

使用

// 返回事件源对象
const targetEl = xesl.DOM.getEventSource(e);

getScrollOffset

获取滚动条x,y轴滚动距离

/**
 * @return {distance}
 */

使用

// 返回滚动条滚动参数
const scrollParam = xesl.DOM.getScrollOffset();

• 返回参数

interface distance {
    x: number; // x 轴滚动距离
    y: number; // y 轴滚动距离
}

getViewportOffset

返回可视窗口尺寸

/**
 * @return {distance}
 */

使用

// 返回可视窗口尺寸
xesl.DOM.getViewportOffset();

• 返回参数

interface distance {
    w: number; // 可视窗口宽度
    h: number; // 可视窗口高度
}

getStyle

获取元素css属性值

/**
 * @param {Element} elem
 * @param {string | number} prop
 * @return {string}
 */

使用

// 获取指定样式值
const colorStr = xesl.DOM.getStyle(this.$refs.boxRef, "color");

loadScript

脚本异步加载

/**
 * @param {string} url
 * @param {Function} callback
 * @return {void}
 */

使用

xesl.DOM.loadScript(
    "https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js",
    () => {
        // 加载成功回调
    }
);

getCurrentELementChildNode

返回当前元素的元素子节点

/**
 * @param {HTMLElement} node
 * @return {nodeArray}
 */

使用

const result = xesl.DOM.getCurrentELementChildNode(source as HTMLElement);

• 返回参数

interface nodeArray {
    length: number;
    push(...items: any[]): number;
    splice(start: number, deleteCount?: number): Array<any>;
}

stopBubble

停止事件冒泡

/**
 * @param {Event} event
 * @return {void}
 */

使用

xesl.DOM.stopBubble(event);

compressImg

压缩图片

/**
 * @description: 压缩图片
 * @param {File} file
 * @param {number} [quality=1] 图片质量，值0-1之间，可不填默
 * @param {number} [zoom=1] 宽度缩放比例，可自定义大小
 * @return {Promise<File>}
 */

使用

xesl.DOM.compressImg(/* 文件 */, 0.8, 0.8);

imgUrlToFile

图片地址生成File文件

/**
 * @description: 图片地址生成File文件
 * @param {string} url 图片路径
 * @param {string} [fileName] 图片名称，默认当前时间戳
 * @return {Promise<File>}
 */

使用

xesl.DOM.imgUrlToFile("图片地址").then(file: File => {
    console.log(file);
})

Tools

• js 基础工具类

deepClone

深度克隆数组或对象

/**
 * @param {T} origin - 源对象
 * @param {T} [target] - 将源对象克隆至目标对象,如果不传默认创建空对象
 * @return {T}
 */

使用

const obj3 = xesl.Tools.deepClone(obj1[, obj2]);

NumCnToggle

阿拉伯数字，中文数字相互转换

构造器

• constructor

default constructor

成员方法

• toCN

/**
 * @description: 阿拉伯数字转中文数字
 * @param {number} num
 * @return {string}
 */

• toNum

/**
 * @description: 中文数字转阿拉伯数字
 * @param {string} chnStr
 * @return {number}
 */

使用

const numCnToggle = new xesl.Tools.NumCnToggle();
console.log(numCnToggle.toCN(1204)); // 一千二百零四
console.log(numCnToggle.toNum("一千二百零四")); // 1204

randomNum

生成 n,m 的随机整数

/**
 * @param {Number} minNum
 * @param {Number} maxNum
 * @return {Number}
 */

使用

// 产生1-10的随机数
const num = xesl.Tools.randomNum(1, 10);

ValidateRules

校验规则

静态方法

• verify

/**
 * @description: 校验
 * @param {string | number} val
 * @param {keyof typeof ValidateRules.rules} type
 * @return {boolean}
 */

使用

• type

const bl = xesl.Tools.ValidateRules.verify("a244123", "ACCOUNTS");
// true

retainValidNum

保留有效小数

/**
 * @param {string | number} num 目标数据
 * @param {number} [len=2] 保留小数长度
 * @return {string}
 */

使用

const strNum = xesl.Tools.retainValidNum(12.13, 4);
// 12.1300

fillZero

基于小数点(前|后)填充零

/**
 * @param {string | number} num 目标数据
 * @param {number} len 补零长度
 * @param {boolean} isR 补零方向
 * @return {string}
 */

使用

const strNum = xesl.Tools.fillZero(12.13, 4, false);
// 000012.13

timeFormat

日期时间格式化

/**
 * @param {string} fmt 日期格式
 * @param {Date} [date] 日期对象，默认当前时间
 * @return {string}
 */

使用

const dateStr = xesl.Tools.timeFormat("yyyy-MM-dd", new Date());

timeFrom

多久以前

/**
 * @description: 多久以前
 * @param {*} targetDate 目标时间
 * @param {string} format 时间格式，如果此参数为false，返回均为"多久之前"的结果
 * @return {}
 */

使用

const result = Tools.timeFrom("2022-08-16 22:14:20");
console.log(result);

UrlQs

地址栏参数处理

构造器

• constructor

default constructor

静态方法

• stringify

/**
 * @description: 地址栏参数处理
 * @param {object} data 参数对象
 * @param {boolean} [encode=true] 是否编码
 * @return {string}
 */

• parse

/**
 * @description: 反序列化
 * @param {string} str 编码后字符串
 * @param {string} [decode=true] 是否解码
 * @return {object}
 */

使用

const { UrlQs } = xesl.Tools;
const query = {
    a: "你好",
    b: ["你", "好"],
    c: {
        d: "你好"
    }
};
const queryStringify = UrlQs.stringify(query);
// a=%E4%BD%A0%E5%A5%BD&b=%5B%22%E4%BD%A0%22%2C%22%E5%A5%BD%22%5D&c=%7B%22d%22%3A%22%E4%BD%A0%E5%A5%BD%22%7D
console.log(queryStringify);
const queryParse = UrlQs.parse(queryStringify);
//{
//    a: "你好",
//    b: ['你', '好'],
//    c: {d: '你好'}
//}
console.log(queryParse);

Thread

静态方法

• sleep

/**
 * @description: 休眠指定毫秒数
 * @param {number} [ms=0] 休眠毫秒数
 * @return {type} Promise
 */

使用

// 配合 async 和 await 使用
Thread.sleep(1000);

debounce

防抖，在连续的操作中，无论进行了多长时间，只有某一次的操作后在指定的时间内没有再操作，这一次才被判定有效

/**
 * @description: 防抖，在连续的操作中，无论进行了多长时间，只有某一次的操作后在指定的时间内没有再操作，这一次才被判定有效
 * @param {Function} func 需要执行的函数
 * @param {number} [wait=500] 间隔时间（毫秒）
 * @return {Function}
 */

throttle

节流，规定时间内，只触发一次

/**
 * @description: 节流，规定时间内，只触发一次
 * @param {Function} func 需要执行的函数
 * @param {number} [wait=500] 延迟执行时间（毫秒）
 * @param {boolean} [immediate=true] 是否表立即执行
 * @return {Function}
 */

Encode

编码转换

静态方法

/**
 * @description: 编码转换
 * @return {*}
 */

使用

const str = Tools.Encode.utf16ToEntities("1😀2👉3");
console.log(str);
// 1😀2👉3
const emoji = Tools.Encode.entitiesToUtf16("1😀2👉3");
console.log(emoji);
// 1😀2👉3

toFixed

保留有效小数位，0不显示

/**
 * @description: 保留有效小数位，0不显示
 * @param {number} num 目标数据
 * @param {number} [accuracy=0] 小数精度
 * @param {boolean} [round=false] 是否四舍五入
 * @return {number}
 */

使用

console.log(Tools.toFixed(1.4351, 2)); // 1.43
console.log(Tools.toFixed(1.4341, 2)); // 1.43
console.log(Tools.toFixed(-1.4351, 2)); // -1.43
console.log(Tools.toFixed(-1.4341, 2)); // -1.43
console.log(Tools.toFixed(1.4351, 2, true)); // 1.44
console.log(Tools.toFixed(1.4341, 2, true)); // 1.43
console.log(Tools.toFixed(-1.4351, 2, true)); // -1.44
console.log(Tools.toFixed(-1.4341, 2, true)); // -1.43

格式化

npx prettier --write .

开发

本地调试npm模块

• 不同目录下链接

# 先去到模块目录，把它链接到全局
npm link
# 通过包名建立链接
npm link module-name

• 解除链接

# 解除项目和模块的链接
npm unlink module-name
# 解除模块的全局链接
npm unlink module-name -g

构建

开发模式

npm run dev

build

npm run build

使用

require

const xesl = require("xesl/xesl/dist/xesl");

browser

<script src="xesl/xesl/browser/xesl.js"></script>

import

import * as xesl from "xesl";
// 或
import * as xesl from "xesl/src/index";