@whitesev/domutils 1.0.0

package/dist/src/Data.d.ts

@@ -0,0 +1,5 @@
+declare const DOMUtilsData: {
+    /** .on绑定的事件 */
+    SymbolEvents: symbol;
+};
+export { DOMUtilsData };

package/dist/src/OriginPrototype.d.ts

@@ -0,0 +1,6 @@
+declare const OriginPrototype: {
+    Object: {
+        defineProperty: <T>(o: T, p: PropertyKey, attributes: PropertyDescriptor & ThisType<any>) => T;
+    };
+};
+export { OriginPrototype };

package/global.d.ts

@@ -0,0 +1 @@
+declare var unsafeWindow: Window & typeof globalThis;

package/index.ts

@@ -0,0 +1,3 @@
+import { DOMUtils } from "./src/DOMUtils";
+
+export default DOMUtils;

package/package.json

@@ -0,0 +1,34 @@
+{
+	"name": "@whitesev/domutils",
+	"version": "1.0.0",
+	"description": "使用js重新对jQuery的部分函数进行了仿写",
+	"main": "dist/index.cjs.js",
+	"module": "dist/node/index.esm.js",
+	"types": "dist/index.d.ts",
+	"jsdelivr": "dist/index.umd.js",
+	"exports": {
+		"./package.json": "./package.json",
+		".": {
+			"import": "./dist/index.esm.js",
+			"require": "./dist/index.cjs.js",
+			"types": "./dist/index.d.ts"
+		}
+	},
+	"scripts": {
+		"build": "rollup --config"
+	},
+	"keywords": [
+		"typescript"
+	],
+	"author": "WhiteSev",
+	"license": "MIT",
+	"dependencies": {
+		"@rollup/plugin-commonjs": "^25.0.8",
+		"@rollup/plugin-node-resolve": "^15.2.3",
+		"@rollup/plugin-typescript": "^11.1.6",
+		"tslib": "^2.6.2"
+	},
+	"devDependencies": {
+		"typescript": "^5.4.5"
+	}
+}

package/rollup.config.js

@@ -0,0 +1,28 @@
+// 允许使用 node 或 umd 包
+const commonjs = require("@rollup/plugin-commonjs");
+const { nodeResolve } = require("@rollup/plugin-node-resolve");
+// 编译 TS 代码
+const typescript = require("@rollup/plugin-typescript");
+
+module.exports = {
+	plugins: [nodeResolve(), commonjs(), typescript()],
+	input: "./index.ts", // 源文件入口
+	output: [
+		{
+			file: "dist/index.esm.js", // package.json 中 "module": "dist/index.esm.js"
+			format: "esm", // es module 形式的包， 用来import 导入， 可以tree shaking
+			sourcemap: true,
+		},
+		{
+			file: "dist/index.cjs.js", // package.json 中 "main": "dist/index.cjs.js",
+			format: "cjs", // commonjs 形式的包， require 导入
+			sourcemap: true,
+		},
+		{
+			file: "dist/index.umd.js",
+			name: "DOMUtils", // 模块名
+			format: "umd", // umd 兼容形式的包， 可以直接应用于网页 script
+			sourcemap: true,
+		},
+	],
+};

package/src/CommonDOMUtils.ts

@@ -0,0 +1,96 @@
+/** 通用工具类 */
+const CommonDOMUtils = {
+	/**
+	 * 判断元素是否已显示或已连接
+	 * @param element
+	 */
+	isShow(element: HTMLElement) {
+		return Boolean(element.getClientRects().length);
+	},
+	/**
+	 * 用于显示元素并获取它的高度宽度等其它属性
+	 * @param element
+	 */
+	showElement(element: HTMLElement) {
+		let dupNode = element.cloneNode(true) as HTMLElement;
+		dupNode.setAttribute(
+			"style",
+			"visibility: hidden !important;display:block !important;"
+		);
+		document.documentElement.appendChild(dupNode);
+		return {
+			/**
+			 * 恢复修改的style
+			 */
+			recovery() {
+				dupNode.remove();
+			},
+		};
+	},
+	/**
+	 * 获取元素上的Float格式的属性px
+	 * @param element
+	 * @param styleName style名
+	 */
+	getStyleValue(element: HTMLElement | CSSStyleDeclaration, styleName: string) {
+		let view = null;
+		let styles = null;
+		if (element instanceof CSSStyleDeclaration) {
+			/* 直接就获取了style属性 */
+			styles = element;
+		} else {
+			view = element.ownerDocument.defaultView;
+			if (!view || !view.opener) {
+				view = window;
+			}
+			styles = view.getComputedStyle(element);
+		}
+		let value = parseFloat(styles[styleName as any]);
+		if (isNaN(value)) {
+			return 0;
+		} else {
+			return value;
+		}
+	},
+	/**
+	 * 判断是否是window，例如window、self、globalThis
+	 * @param target
+	 */
+	isWin(target: any) {
+		if (typeof target !== "object") {
+			return false;
+		}
+		if (target instanceof Node) {
+			return false;
+		}
+		if (target === globalThis) {
+			return true;
+		}
+		if (target === window) {
+			return true;
+		}
+		if (target === self) {
+			return true;
+		}
+		if (typeof unsafeWindow !== "undefined" && target === unsafeWindow) {
+			return true;
+		}
+		if (target?.Math?.toString() !== "[object Math]") {
+			return false;
+		}
+		return true;
+	},
+	/**
+	 * 删除对象上的属性
+	 * @param target
+	 * @param propName
+	 */
+	delete(target: any, propName: any) {
+		if (typeof Reflect === "object" && Reflect.deleteProperty) {
+			Reflect.deleteProperty(target, propName);
+		} else {
+			delete target[propName];
+		}
+	},
+};
+export { CommonDOMUtils };

package/src/Core.ts

@@ -0,0 +1,224 @@
+declare type DOMUtilsCreateElementAttributesMap = {
+	style?: string;
+	id?: string;
+	class?: string;
+	"data-"?: string;
+	type?: string;
+	[key: string]: any;
+};
+/**
+ * 鼠标事件
+ * + https://blog.csdn.net/weixin_68658847/article/details/126939879
+ */
+
+interface DOMUtils_MouseEvent {
+	click: MouseEvent | PointerEvent;
+	contextmenu: MouseEvent | PointerEvent;
+	dblclick: MouseEvent | PointerEvent;
+	mousedown: MouseEvent | PointerEvent;
+	mouseenter: MouseEvent | PointerEvent;
+	mouseleave: MouseEvent | PointerEvent;
+	mousemove: MouseEvent | PointerEvent;
+	mouseover: MouseEvent | PointerEvent;
+	mouseout: MouseEvent | PointerEvent;
+	mouseup: MouseEvent | PointerEvent;
+}
+type DOMUtils_MouseEventType = keyof DOMUtils_MouseEvent;
+/**
+ * 鼠标事件
+ */
+interface DOMUtils_KeyboardEvent {
+	keydown: KeyboardEvent;
+	keypress: KeyboardEvent;
+	keyup: KeyboardEvent;
+}
+type DOMUtils_KeyboardEventType = keyof DOMUtils_KeyboardEvent;
+/**
+ * 框架/对象事件
+ */
+interface DOMUtils_Frame_Object_Event {
+	abort: Event;
+	beforeunload: Event;
+	error: Event;
+	hashchange: Event;
+	load: Event;
+	pageshow: Event;
+	pagehide: Event;
+	resize: Event;
+	scroll: Event;
+	unload: Event;
+}
+type DOMUtils_Frame_Object_EventType = keyof DOMUtils_Frame_Object_Event;
+/**
+ * 表单事件
+ */
+interface DOMUtils_FormEvent {
+	blur: Event;
+	change: Event;
+	focus: Event;
+	focusin: Event;
+	focusout: Event;
+	input: Event;
+	reset: Event;
+	search: Event;
+}
+type DOMUtils_FormEventType = keyof DOMUtils_FormEvent;
+
+/**
+ * 剪贴板事件
+ */
+interface DOMUtils_ClipboardEvent {
+	copy: ClipboardEvent;
+	cut: ClipboardEvent;
+	paste: ClipboardEvent;
+}
+type DOMUtils_ClipboardEventType = keyof DOMUtils_ClipboardEvent;
+
+/**
+ * 打印事件
+ */
+interface DOMUtils_PrintEvent {
+	afterprint: Event;
+	beforeprint: Event;
+}
+type DOMUtils_PrintEventType = keyof DOMUtils_PrintEvent;
+
+/**
+ * 拖动事件
+ */
+interface DOMUtils_DragEvent {
+	drag: DragEvent;
+	dragend: DragEvent;
+	dragenter: DragEvent;
+	dragleave: DragEvent;
+	dragover: DragEvent;
+	dragstart: DragEvent;
+	drop: DragEvent;
+}
+type DOMUtils_DragEventType = keyof DOMUtils_DragEvent;
+
+/**
+ * 多媒体（Media）事件
+ */
+interface DOMUtils_MediaEvent {
+	abort: Event;
+	canplay: Event;
+	canplaythrough: Event;
+	durationchange: Event;
+	emptied: Event;
+	ended: Event;
+	error: Event;
+	loadeddata: Event;
+	loadedmetadata: Event;
+	loadstart: Event;
+	pause: Event;
+	play: Event;
+	playing: Event;
+	progress: Event;
+	ratechange: Event;
+	seeked: Event;
+	seeking: Event;
+	stalled: Event;
+	suspend: Event;
+	timeupdate: Event;
+	volumechange: Event;
+	waiting: Event;
+}
+type DOMUtils_MediaEventType = keyof DOMUtils_MediaEvent;
+
+/**
+ * 动画事件
+ */
+interface DOMUtils_AnimationEvent {
+	animationend: AnimationEvent;
+	animationiteration: AnimationEvent;
+	animationstart: AnimationEvent;
+}
+type DOMUtils_AnimationEventType = keyof DOMUtils_AnimationEvent;
+
+/**
+ * 过渡事件
+ */
+interface DOMUtils_TransitionEvent {
+	transitionend: TransitionEvent;
+}
+type DOMUtils_TransitionEventType = keyof DOMUtils_TransitionEvent;
+
+/**
+ * 触摸事件
+ */
+interface DOMUtils_TouchEvent {
+	touchstart: TouchEvent;
+	touchmove: TouchEvent;
+	touchend: TouchEvent;
+	touchcancel: TouchEvent;
+	touchenter: TouchEvent;
+	touchleave: TouchEvent;
+}
+type DOMUtils_TouchEventType = keyof DOMUtils_TouchEvent;
+/**
+ * 其它事件
+ */
+interface DOMUtils_OtherEvent {
+	message: Event;
+	online: Event;
+	offline: Event;
+	popstate: Event;
+	show: Event;
+	storage: Event;
+	toggle: Event;
+	wheel: Event;
+	propertychange: Event;
+	fullscreenchange: Event;
+	DOMContentLoaded: Event;
+}
+type DOMUtils_OtherEventType = keyof DOMUtils_OtherEvent;
+
+/**
+ * 全部事件
+ */
+declare type DOMUtils_Event = DOMUtils_MouseEvent &
+	DOMUtils_KeyboardEvent &
+	DOMUtils_Frame_Object_Event &
+	DOMUtils_FormEvent &
+	DOMUtils_ClipboardEvent &
+	DOMUtils_PrintEvent &
+	DOMUtils_DragEvent &
+	DOMUtils_MediaEvent &
+	DOMUtils_AnimationEvent &
+	DOMUtils_TransitionEvent &
+	DOMUtils_TouchEvent &
+	DOMUtils_OtherEvent;
+
+/**
+ * 事件类型
+ */
+declare type DOMUtils_EventType = keyof DOMUtils_Event;
+
+/**
+ * 元素上的events属性
+ */
+declare interface DOMUtilsEventListenerOptionsAttribute {
+	/**
+	 * 自定义的ownCallBack
+	 */
+	callback: () => void;
+	/**
+	 * 属性配置
+	 */
+	option: AddEventListenerOptions;
+	/**
+	 * 用户添加的事件
+	 */
+	originCallBack: () => void;
+	/**
+	 * 子元素选择器
+	 */
+	selector?: string;
+}
+
+type ParseHTMLReturnType<T1, T2> = T1 extends true
+	? T2 extends true
+		? Document
+		: HTMLElement
+	: HTMLElement;