增加常用方法

pull/1/head
yutent 2023-03-07 22:44:15 +08:00
parent 487392b085
commit e53a60d7a4
3 changed files with 188 additions and 2 deletions

View File

@ -1,6 +1,6 @@
{ {
"name": "@ninejs/core", "name": "@ninejs/core",
"version": "0.0.1", "version": "0.1.0",
"type": "module", "type": "module",
"description": "9号UI组件库的核心", "description": "9号UI组件库的核心",
"main": "dist/index.js", "main": "dist/index.js",

View File

@ -5,7 +5,30 @@
*/ */
import { css, adoptStyles } from './css.js' import { css, adoptStyles } from './css.js'
import { render, html, svg } from './html.js' import { render, html, svg } from './html.js'
export { html, css, svg } import {
$,
$$,
nextTick,
offset,
bind,
unbind,
outsideClick,
clearOutsideClick,
fire
} from './utils.js'
export {
html,
css,
svg,
$,
$$,
nextTick,
offset,
bind,
unbind,
outsideClick,
clearOutsideClick
}
var defaultConverter = { var defaultConverter = {
toAttribute(value, type) { toAttribute(value, type) {
@ -378,4 +401,12 @@ export class Component extends HTMLElement {
} }
updated(_changedProperties) {} updated(_changedProperties) {}
firstUpdated(_changedProperties) {} firstUpdated(_changedProperties) {}
$on(type, callback) {
return bind(this, type, callback)
}
$emit(type, data = {}) {
return fire(this, type, data)
}
} }

155
src/utils.js Normal file
View File

@ -0,0 +1,155 @@
/**
* {常用方法库}
* @author yutent<yutent.io@gmail.com>
* @date 2023/03/07 22:11:30
*/
export function $(selector, container) {
if (container) {
return container.querySelector(selector)
}
return document.body.querySelector(selector)
}
export function $$(selector, container) {
if (container) {
return container.querySelectorsAll(selector)
}
return document.body.querySelectorsAll(selector)
}
export const nextTick = (function () {
let queue = []
let node = document.createTextNode('<!-- -->')
let bool = false
function callback() {
let n = queue.length
for (let i = 0; i < n; i++) {
queue[i]()
}
queue = queue.slice(n)
}
new MutationObserver(callback).observe(node, { characterData: true })
return function (fn) {
queue.push(fn)
bool = !bool
node.data = bool
}
})()
//取得距离页面左上角的坐标
export function offset(node) {
try {
let rect = node.getBoundingClientRect()
if (rect.width || rect.height || node.getClientRects().length) {
let doc = node.ownerDocument
let root = doc.documentElement
let win = doc.defaultView
return {
top: rect.top + win.pageYOffset - root.clientTop,
left: rect.left + win.pageXOffset - root.clientLeft
}
}
} catch (e) {
return {
left: 0,
top: 0
}
}
}
/**
* 事件绑定
*/
export function bind(dom, type, selector, fn, phase = true) {
let events = type.split(',')
let callback
if (typeof selector === 'function') {
phase = fn
fn = selector
selector = null
} else {
if (typeof selector !== 'string') {
selector = null
}
fn = fn || noop
}
if (selector) {
callback = function (ev) {
let agents = $(selector, ev.currentTarget)
let elem = ev.target
if (agents) {
while (true) {
if (elem === ev.currentTarget) {
break
}
if (agents.contains(elem)) {
fn(ev)
break
} else {
elem = elem.parentNode
}
}
}
}
} else {
callback = fn
}
events.forEach(function (t) {
dom.addEventListener(t.trim(), callback, phase)
})
return callback
}
/**
* 解除事件绑定
*/
export function unbind(dom, type, fn = noop, phase = false) {
let events = type.split(',')
events.forEach(function (t) {
dom.removeEventListener(t.trim(), fn, phase)
})
}
// 指定节点外点击(最高不能超过body层)
export function outsideClick(dom, fn = noop) {
return bind(document, 'mousedown', ev => {
let path = ev.composedPath ? ev.composedPath() : ev.path
if (path) {
while (path.length > 3) {
if (path.shift() === dom) {
return
}
}
} else {
let target = ev.explicitOriginalTarget || ev.target
if (
dom === target ||
dom.contains(target) ||
(dom.root && dom.root.contains(target))
) {
return
}
}
fn(ev)
})
}
export function clearOutsideClick(fn = noop) {
unbind(document, 'mousedown', fn)
}
export function fire(el, name = 'click', data = {}) {
let ev = document.createEvent('Events')
ev.initEvent(name, true, true)
Object.assign(ev, data)
el.dispatchEvent(ev)
}