Browse Source

优化浏览器工具库功能并添加测试用例

dev
谢亚昕 3 weeks ago
parent
commit
3643ad61c5
  1. 7
      packages/.vitepress/plugins/markdownTransform.ts
  2. 72
      packages/browser/src/check/__tests__/index.ts
  3. 45
      packages/browser/src/check/docs/demo.vue
  4. 2
      packages/browser/src/check/docs/index.md
  5. 47
      packages/browser/src/check/docs/index.vue
  6. 31
      packages/browser/src/event/docs/demo.vue
  7. 35
      packages/browser/src/event/docs/index.vue
  8. 1
      packages/browser/src/index.ts
  9. 15
      packages/browser/src/scrollTo/docs/demo.vue
  10. 19
      packages/browser/src/scrollTo/docs/index.vue
  11. 30
      packages/browser/src/sessionStorage/__tests__/index.ts
  12. 7
      packages/browser/src/sessionStorage/docs/index.md
  13. 10
      packages/browser/src/sessionStorage/docs/index.vue
  14. 55
      packages/browser/src/sessionStorage/index.ts
  15. 7
      packages/core/src/array/demote/docs/index.md
  16. 29
      packages/core/src/array/demote/docs/index.vue
  17. 7
      packages/core/src/throttle/index.ts
  18. 6
      packages/core/src/utils/index.ts

7
packages/.vitepress/plugins/markdownTransform.ts

@ -29,7 +29,12 @@ export function MarkdownTransform(): any {
let rawcodeArray = (Array.from(code.matchAll(/<\!--code\:(.*?)\:code-->/g) ?? []) as any).map(([_, name]) => name)
// console.log(this._container.config.root);
// console.log(id);
// console.log(oneDir);
// console.log(allFiles);
// console.log(matter);
for (let i = 0; i < allFiles.length; i++) {
const file = allFiles[i];
const p = path.resolve(oneDir, file)

72
packages/browser/src/check/__tests__/index.ts

@ -0,0 +1,72 @@
import { IEVersion } from "@xyx-utils/browser";
describe("测试 on 与 off", () => {
it("IE7 版本", () => {
global.navigator = {
...global.navigator, // 保留其他可能存在的属性
userAgent: 'Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 5.1)'
};
expect(IEVersion()).toBe(7);
});
it("IE6 版本", () => {
global.navigator = {
...global.navigator, // 保留其他可能存在的属性
userAgent: 'Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1)'
};
expect(IEVersion()).toBe(6);
});
it("IE8 版本", () => {
global.navigator = {
...global.navigator, // 保留其他可能存在的属性
userAgent: 'Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1)'
};
expect(IEVersion()).toBe(8);
});
it("IE9 版本", () => {
global.navigator = {
...global.navigator, // 保留其他可能存在的属性
userAgent: 'Mozilla/4.0 (compatible; MSIE 9.0; Windows NT 5.1)'
};
expect(IEVersion()).toBe(9);
});
it("IE10 版本", () => {
global.navigator = {
...global.navigator, // 保留其他可能存在的属性
userAgent: 'Mozilla/4.0 (compatible; MSIE 10.0; Windows NT 5.1)'
};
expect(IEVersion()).toBe(10);
});
it("edge", () => {
global.navigator = {
...global.navigator, // 保留其他可能存在的属性
userAgent: 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/46.0.2486.0 Safari/537.36Edge/13.10586'
};
expect(IEVersion()).toBe("edge");
});
// it("触发多次click事件", () => {
// const mockListener = vi.fn();
// const element = document.createElement("div");
// on(element, "click", mockListener);
// const event = new MouseEvent("click");
// element.dispatchEvent(event);
// element.dispatchEvent(event);
// expect(mockListener).toBeCalledTimes(2);
// });
// it("仅触发一次click事件", () => {
// const mockListener = vi.fn();
// const element = document.createElement("div");
// on(element, "click", mockListener);
// const event = new MouseEvent("click");
// element.dispatchEvent(event);
// off(element, "click", mockListener);
// element.dispatchEvent(event);
// element.dispatchEvent(event);
// expect(mockListener).toBeCalledTimes(1);
// });
});

45
packages/browser/src/check/docs/demo.vue

@ -1,45 +0,0 @@
<template>
<div>
<cop info="getExplorerInfo" :text="ExplorerInfo"></cop>
<cop info="getExplorerInfo" :text="IeInfo === -1 ? '这不是IE' : '这是IE' + IeInfo"></cop>
<cop info="isHtml5Plus" :text="html5PlusInfo ? '这是html5Plus环境' : '这不是html5Plus环境'"></cop>
<cop info="isWxMp" :text="wxMpInfo ? '这是微信小程序' : '这不是微信小程序'"></cop>
<cop info="isWeChat" :text="weChatInfo ? '这是微信浏览器' : '这不是微信浏览器'"></cop>
<cop info="isMobile" :text="mobileInfo ? '这是手机' : '这不是手机'"></cop>
<cop info="isWeCom" :text="isWeCom ? '这是企业微信' : '这不是企业微信'"></cop>
<cop info="isAlipay" :text="isAlipay ? '这是支付宝' : '这不是支付宝'"></cop>
<cop info="isDingTalk" :text="isDingTalk ? '这是钉钉' : '这不是钉钉'"></cop>
</div>
</template>
<script lang="ts" setup>
import { getExplorerInfo, IEVersion } from '@xyx-utils/browser/check'
import { isWeCom, isAlipay, isDingTalk, isHtml5Plus, isMobile, isWeChat, isWxMp } from '@xyx-utils/browser'
import { defineComponent, h, ref } from 'vue'
const cop = defineComponent({
props: ['info', 'text'],
setup(props: any, ctx) {
return () => h('div', [
h('code', [props.info]),
h('span', ["检测结果:" + props.text]),
])
},
})
const ExplorerInfo = getExplorerInfo()
const IeInfo = IEVersion()
const html5PlusInfo = isHtml5Plus()
const mobileInfo = isMobile()
const weChatInfo = isWeChat()
const wxMpInfo = ref<boolean>();
; (async () => {
try {
await isWxMp()
wxMpInfo.value = true
} catch (error) {
wxMpInfo.value = false
}
})();
</script>
<style lang="less" scoped></style>

2
packages/browser/src/check/docs/index.md

@ -7,4 +7,4 @@ title: 平台检测
## Demo
<preview path="./demo.vue" title="@xyx-utils/browser" description="用于平台的判断"></preview>
<preview path="./index.vue" title="@xyx-utils/browser" description="用于平台的判断"></preview>

47
packages/browser/src/check/docs/index.vue

@ -1,10 +1,45 @@
<template>
<ClientComp></ClientComp>
<div>
<cop info="getExplorerInfo" :text="ExplorerInfo"></cop>
<cop info="getExplorerInfo" :text="IeInfo === -1 ? '这不是IE' : '这是IE' + IeInfo"></cop>
<cop info="isHtml5Plus" :text="html5PlusInfo ? '这是html5Plus环境' : '这不是html5Plus环境'"></cop>
<cop info="isWxMp" :text="wxMpInfo ? '这是微信小程序' : '这不是微信小程序'"></cop>
<cop info="isWeChat" :text="weChatInfo ? '这是微信浏览器' : '这不是微信浏览器'"></cop>
<cop info="isMobile" :text="mobileInfo ? '这是手机' : '这不是手机'"></cop>
<cop info="isWeCom" :text="isWeCom ? '这是企业微信' : '这不是企业微信'"></cop>
<cop info="isAlipay" :text="isAlipay ? '这是支付宝' : '这不是支付宝'"></cop>
<cop info="isDingTalk" :text="isDingTalk ? '这是钉钉' : '这不是钉钉'"></cop>
</div>
</template>
<script setup>
import { defineClientComponent } from 'vitepress'
<script lang="ts" setup>
import { getExplorerInfo, IEVersion } from '@xyx-utils/browser/check'
import { isWeCom, isAlipay, isDingTalk, isHtml5Plus, isMobile, isWeChat, isWxMp } from '@xyx-utils/browser'
import { defineComponent, h, ref } from 'vue'
const ClientComp = defineClientComponent(() => {
return import('./demo.vue')
const cop = defineComponent({
props: ['info', 'text'],
setup(props: any, ctx) {
return () => h('div', [
h('code', [props.info]),
h('span', ["检测结果:" + props.text]),
])
},
})
</script>
const ExplorerInfo = getExplorerInfo()
const IeInfo = IEVersion()
const html5PlusInfo = isHtml5Plus()
const mobileInfo = isMobile()
const weChatInfo = isWeChat()
const wxMpInfo = ref<boolean>();
; (async () => {
try {
await isWxMp()
wxMpInfo.value = true
} catch (error) {
wxMpInfo.value = false
}
})();
</script>
<style lang="less" scoped></style>

31
packages/browser/src/event/docs/demo.vue

@ -1,31 +0,0 @@
<template>
<div>
<n-space style="margin-bottom: 10px;">
<n-button @click="onBindEvent">绑定点击事件</n-button>
<n-button @click="onRemoveEvent">移除点击事件</n-button>
</n-space>
<n-tag><span ref="targetRef">{{ isBind ? '已绑定,点击测试' : '未绑定' }}</span></n-tag>
</div>
</template>
<script lang="ts" setup>
import { ref } from "vue";
import { on, off } from "@xyx-utils/browser/event";
const targetRef = ref<HTMLElement>();
const isBind = ref(false)
function clickNode() {
alert("click");
}
function onBindEvent() {
on(targetRef.value, "click", clickNode);
isBind.value = true
}
function onRemoveEvent() {
off(targetRef.value, "click", clickNode);
isBind.value = false
}
</script>
<style lang="less" scoped></style>

35
packages/browser/src/event/docs/index.vue

@ -1,10 +1,31 @@
<template>
<ClientComp></ClientComp>
<div>
<n-space style="margin-bottom: 10px;">
<n-button @click="onBindEvent">绑定点击事件</n-button>
<n-button @click="onRemoveEvent">移除点击事件</n-button>
</n-space>
<n-tag><span ref="targetRef">{{ isBind ? '已绑定,点击测试' : '未绑定' }}</span></n-tag>
</div>
</template>
<script setup>
import { defineClientComponent } from 'vitepress'
<script lang="ts" setup>
import { ref } from "vue";
import { on, off } from "@xyx-utils/browser/event";
const ClientComp = defineClientComponent(() => {
return import('./demo.vue')
})
</script>
const targetRef = ref<HTMLElement>();
const isBind = ref(false)
function clickNode() {
alert("click");
}
function onBindEvent() {
on(targetRef.value, "click", clickNode);
isBind.value = true
}
function onRemoveEvent() {
off(targetRef.value, "click", clickNode);
isBind.value = false
}
</script>
<style lang="less" scoped></style>

1
packages/browser/src/index.ts

@ -1,3 +1,4 @@
export * from "./event";
export * from "./check";
export * from "./scrollTo";
// export * from "./sessionStorage";

15
packages/browser/src/scrollTo/docs/demo.vue

@ -1,15 +0,0 @@
<template>
<n-space style="position: fixed;top: 200px;">
<n-button @click="onBindEvent(1000)">点击滚动到1000位置</n-button>
<n-button @click="onBindEvent(0)">点击滚动到顶部</n-button>
</n-space>
</template>
<script lang="ts" setup>
import { scrollTo } from "@xyx-utils/browser/scrollTo";
function onBindEvent(height) {
scrollTo(height, 1000)
}
</script>
<style lang="less" scoped></style>

19
packages/browser/src/scrollTo/docs/index.vue

@ -1,10 +1,15 @@
<template>
<ClientComp></ClientComp>
<n-space style="position: fixed;top: 200px;">
<n-button @click="onBindEvent(1000)">点击滚动到1000位置</n-button>
<n-button @click="onBindEvent(0)">点击滚动到顶部</n-button>
</n-space>
</template>
<script setup>
import { defineClientComponent } from 'vitepress'
<script lang="ts" setup>
import { scrollTo } from "@xyx-utils/browser/scrollTo";
const ClientComp = defineClientComponent(() => {
return import('./demo.vue')
})
</script>
function onBindEvent(height) {
scrollTo(height, 1000)
}
</script>
<style lang="less" scoped></style>

30
packages/browser/src/sessionStorage/__tests__/index.ts

@ -0,0 +1,30 @@
import { on, off } from "@xyx-utils/browser";
describe("测试 on 与 off", () => {
it("触发多次click事件", () => {
const mockListener = vi.fn();
const element = document.createElement("div");
on(element, "click", mockListener);
const event = new MouseEvent("click");
element.dispatchEvent(event);
element.dispatchEvent(event);
expect(mockListener).toBeCalledTimes(2);
});
it("仅触发一次click事件", () => {
const mockListener = vi.fn();
const element = document.createElement("div");
on(element, "click", mockListener);
const event = new MouseEvent("click");
element.dispatchEvent(event);
off(element, "click", mockListener);
element.dispatchEvent(event);
element.dispatchEvent(event);
expect(mockListener).toBeCalledTimes(1);
});
});

7
packages/browser/src/sessionStorage/docs/index.md

@ -0,0 +1,7 @@
---
title: session存储
---
## Demo
<preview path="./index.vue" title="sessionStorage" description="session存储工具"></preview>

10
packages/browser/src/sessionStorage/docs/index.vue

@ -0,0 +1,10 @@
<template>
<div>
sada
</div>
</template>
<script setup>
import { session_storage, remove_session_storage_item, clear_session_storage } from "@xyx-utils/browser/sessionStorage"
session_storage("asda", "sada")
</script>

55
packages/browser/src/sessionStorage/index.ts

@ -0,0 +1,55 @@
const _is_session_storage = !!window.sessionStorage;
let _data_session_dom, _dataSessionDom_name = window.location.hostname || 'sessionUserData';
if (!_is_session_storage) {
try {
_data_session_dom = document.createElement('input');
_data_session_dom.type = 'hidden';
_data_session_dom.style.display = "none";
_data_session_dom.addBehavior('#default#userData'); //userData的语法
document.body.appendChild(_data_session_dom);
_data_session_dom.expires = new Date($.date().addDays(365)).toUTCString(); //设定过期时间
//加载userdata
_data_session_dom.load(_dataSessionDom_name);
} catch (e) {
_data_session_dom = null;
console.log("userData初始化失败!");
}
}
export const session_storage = (key, value) => {
let _return_value;
try {
if (_is_session_storage) {
if (value != undefined) {
sessionStorage.setItem(encodeURIComponent(key), encodeURIComponent(value));
} else {
_return_value = sessionStorage.getItem(encodeURIComponent(key));
return _return_value ? decodeURIComponent(_return_value) : null;
}
} else if (_data_session_dom) {
if (value != undefined) {
_data_session_dom.setAttribute(key, value);
_data_session_dom.save(_dataSessionDom_name);
} else {
_return_value = _data_session_dom.getAttribute(key);
return _return_value ? decodeURIComponent(_return_value) : null;
}
}
} catch (e) {
return false;
}
};
export const remove_session_storage_item = (key) => {
if (_is_session_storage) {
sessionStorage.removeItem(encodeURIComponent(key));
} else if (_data_session_dom) {
_data_session_dom.removeAttribute(encodeURIComponent(key));
_data_session_dom.save(_dataSessionDom_name);
}
};
export const clear_session_storage = () => {
if (_is_session_storage) {
sessionStorage.clear();
} else {
_data_session_dom.remove();
}
};

7
packages/core/src/array/demote/docs/index.md

@ -0,0 +1,7 @@
---
title: demote
category: 数组
source-path: /docs/array/demote.html
---
<preview path="./index.vue" title="@niu-tools/core" description="demote"></preview>

29
packages/core/src/array/demote/docs/index.vue

@ -0,0 +1,29 @@
<script setup lang="ts">
import { demote } from "@xyx-utils/core"
import { ref } from "vue"
const outout = ref<string[]>([])
console.log = (str) => {
outout.value.push(str)
}
function run() {
console.log(demote([1,2,3, [1,2,3]]));
}
</script>
<template>
<div>
<div>
[1,2,3, [1,2,3]]
</div>
<button @click="run">运行</button>
<div>输出</div>
<div v-for="i in outout">
{{ i }}
</div>
</div>
</template>

7
packages/core/src/throttle/index.ts

@ -1,3 +1,10 @@
/**
*
* @param fn
* @param wait
* @param options
* @returns
*/
export function throttle<T extends any[], R = void>(
fn: (...args: T) => R,
wait: number = 200,

6
packages/core/src/utils/index.ts

@ -1,4 +1,8 @@
/**
*
* @param arr
* @returns
*/
export function isArray(arr) {
return Array.isArray(arr)
}
Loading…
Cancel
Save