js-utils

主题

导航栏

浏览器 ​

addClass ​

为元素添加 class

typescript
import { addClass } from '@fang-kang/js-utils';

addClass('ele', 'class');

hasClass ​

判断元素是否有某个 class

typescript
import { hasClass } from '@fang-kang/js-utils';

hasClass('ele', 'class');

removeClass ​

为元素移除 class

typescript
import { removeClass } from '@fang-kang/js-utils';

removeClass('ele', 'class');

fullScreen ​

全屏模式

typescript
import { fullScreen } from '@fang-kang/js-utils';

fullScreen();

exitFullscreen ​

退出全屏模式

typescript
import { exitFullscreen } from '@fang-kang/js-utils';

exitFullscreen();

getFullscreenElement ​

获取当前全屏的节点

typescript
import { getFullscreenElement } from '@fang-kang/js-utils';

getFullscreenElement();
// 假设 document.documentElement 当前为全屏状态则
document.documentElement === getFullscreenElement();

getScrollTop ​

获取滚动条距顶部的距离

typescript
import { getScrollTop } from '@fang-kang/js-utils';

getScrollTop();

setScrollTop ​

设置滚动条距顶部的距离

typescript
import { setScrollTop } from '@fang-kang/js-utils';

setScrollTop(100);

scrollToTop ​

返回顶部

typescript
import { scrollToTop } from '@fang-kang/js-utils';

scrollToTop();

scrollToElement ​

可将指定元素平滑滚动到浏览器窗口的可见区域

typescript
import { scrollToElement } from '@fang-kang/js-utils';

smoothScroll('#fooBar');

getDevice ​

获取系统信息

typescript
import { getDevice } from '@fang-kang/js-utils';

console.log(getDevice()); // { os: 'android', dev: 'chrome' }

getUrlParams ​

获取 url 中的参数,地址不传默认取 window.location.search

typescript
import { getUrlParams } from '@fang-kang/js-utils';

getUrlParams();

stringfyQueryString ​

对象序列化

typescript
import { stringfyQueryString } from '@fang-kang/js-utils';

stringfyQueryString({ a: 1, b: 2 }); // a=1&b=2

getInnerHTML ​

获取 HTML 字符串中的文本内容

typescript
import { getInnerHTML } from '@fang-kang/js-utils';

getInnerHTML(`<div>123</div>`); // 123

injectScript ​

动态引入 js

typescript
import { injectScript } from '@fang-kang/js-utils';

injectScript('https://unpkg.com/@fang-kang/js-utils');

downloadByUrl ​

根据 url 下载文件

typescript
import { downloadByUrl } from '@fang-kang/js-utils';

downloadByUrl('https://unpkg.com/@fang-kang/js-utils', 'js-utils.js');

elementIsVisibleInViewport ​

el 是否在视口范围内

typescript
import { elementIsVisibleInViewport } from '@fang-kang/js-utils';

elementIsVisibleInViewport(document.querySelector('#app') as HTMLElement);

copyTextToClipboard ​

劫持粘贴板

typescript
import { copyTextToClipboard } from '@fang-kang/js-utils';

copyTextToClipboard('复制的内容');

hideElement ​

隐藏所有的指定标签

typescript
import { hideElement } from '@fang-kang/js-utils';

hideElement(document.querySelectorAll('img')); // 隐藏所有<img>标签

httpsRedirect ​

HTTP 跳转 HTTPS

typescript
import { httpsRedirect } from '@fang-kang/js-utils';

httpsRedirect(); // 若在`http://www.baidu.com`, 则跳转到`https://www.baidu.com`

insertAfter ​

在指定元素之后插入新元素

typescript
import { insertAfter } from '@fang-kang/js-utils';

// <div id="myId">...</div> <p>after</p>
insertAfter(document.getElementById('myId'), '<p>after</p>');

insertBefore ​

在指定元素之后插入新元素

typescript
import { insertBefore } from '@fang-kang/js-utils';

insertBefore(document.getElementById('myId'), '<p>before</p>');
// <p>before</p> <div id="myId">...</div>

escapeHTML ​

用来防 XSS 攻击

typescript
import { escapeHTML } from '@fang-kang/js-utils';

escapeHTML('<a href="#">Me & you</a>'); // '&lt;a href=&quot;#&quot;&gt;Me &amp; you&lt;/a&gt;

monitorPef ​

检测性能指标

typescript
import { monitorPef } from '@fang-kang/js-utils';

timeCost ​

检测函数执行耗时

typescript
import { timeCost } from '@fang-kang/js-utils';

createElement ​

创建元素和属性

typescript
import { createElement } from '@fang-kang/js-utils';

const p = createElement('p', {
  id: 'test',
  class: 'test',
  style: 'xxx',
});

createFragment ​

创建 fragment

typescript
import { createFragment } from '@fang-kang/js-utils';

createFragment();

createTextNode ​

创建 TextNode

typescript
import { createTextNode } from '@fang-kang/js-utils';

createFragment();

findElement ​

查找元素

typescript
import { findElement } from '@fang-kang/js-utils';

/**
 * @param { string | string[] } selector 选择器
 * @param { boolean } all 是否返回所有
 * @param { HTMLElement } currentNode 当前节点 默认为 document
 */

const p = findElement('p'); // 查找第一个 p 标签
const p = findElement('p', true); // 查找所有 p 标签
const result = findElement(['p', 'div']); // 查找第一个 p 标签和 div 标签
const result = findElement(['p', 'div'], true); // 查找所有 p 标签和 div 标签

removeElement ​

查找元素

typescript
import { removeElement } from '@fang-kang/js-utils';

const div = removeElement('div');
removeElement(div); // 将div元素从父节点中移除

useInterval ​

定时器执行函数

typescript
import { useInterval } from '@fang-kang/js-utils';

/**
 * @param { () => void } fn 执行函数
 * @param { number } duration 间隔时间
 * @return { () => void } 停止事件监听函数
 */

// 每秒打印一次
let count = 0;
const stop = useInterval(() => {
  console.log('hi');
  count++;
}, 1000);
// 第五次后停止
if (count === 5) {
  stop();
}

useTimeout ​

定时器执行函数

typescript
import { useTimeout } from '@fang-kang/js-utils';

/**
 * @param { () => void } fn 执行函数
 * @param { number } duration 间隔时间
 * @return { () => void } 停止事件监听函数
 */

// 一秒后打印
const stop = useTimeout(() => {
  console.log('hi');
}, 1000);

Released under the MIT License.

Copyright © 2023-present fk