From c204f8a3d6cdbb8d557657be17fa7d151a219eab Mon Sep 17 00:00:00 2001
From: satori <huan0016@gmail.com>
Date: Thu, 5 Sep 2024 12:33:32 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=AD=A3tagName?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 main.js | 58 ++++++++++++++++++++++++++++-----------------------------
 1 file changed, 29 insertions(+), 29 deletions(-)

diff --git a/main.js b/main.js
index c8bed22..13300f3 100644
--- a/main.js
+++ b/main.js
@@ -1,4 +1,4 @@
-export function createElement({ innerText, innerHTML, textContent, readOnly, children = [], dataset, style, classList = [], ...attributes }, tagName = 'div', __name = '') {
+export function createElement({ innerText, innerHTML, textContent, readOnly, children = [], dataset, style, classList = [], ...attributes }, tagName = 'div', names = []) {
     const element = document.createElement(tagName)
     for (const key in attributes) {
         if (key.startsWith('on')) element[key] = attributes[key] // 如果是事件则直接赋值
@@ -14,10 +14,10 @@ export function createElement({ innerText, innerHTML, textContent, readOnly, chi
     if (children) children.forEach(child => element.appendChild(child))
 
     // 生成样式
-    if (__name) console.log('name:', __name)
+    if (names.length) console.log('names:', names)
 
     // 分解类名, 生成样式, 直接将样式赋予元素
-    __name.split('.').map(name => name.split('_')).forEach(item => {
+    names.map(name => name.split('_')).forEach(item => {
         // 两个参数的情况下, 第一个参数是样式名, 第二个参数是样式值
         if (item.length === 2) {
             const [key, value] = item
@@ -146,18 +146,19 @@ export class BaseElement {
     constructor(options) {
         return createElement(options, this.constructor.name)
     }
-    static text(text) {
-        return createElement({ textContent: text }, this.name)
+    static text(text, __name, names) {
+        return createElement({ textContent: text }, __name, names)
     }
     static html(html) {
         return createElement({ innerHTML: html }, this.name)
     }
-    static childs(childs) {
-        return createElement({ children: childs }, this.name)
+    static childs(childs, __name, names) {
+        console.log('childs:', __name, names)
+        return createElement({ children: childs }, __name, names)
     }
-    static w(width, __name) {
+    static w(width, __name, names) {
         if (typeof width === 'number') width = width + 'px'
-        return createElement({ style: { width } }, this.name, __name)
+        return createElement({ style: { width } }, __name, names)
     }
     static h(height) {
         if (typeof height === 'number') height = height + 'px'
@@ -226,31 +227,30 @@ export class BaseElement {
     }
 }
 
-export const proxy = new Proxy(BaseElement, {
-    get(target, property) {
-        if (property in target) {
-            const __name = this.__name || ''
-            console.log('name:', __name)
-            if (typeof target[property] === 'function') {
-                console.log('function:', property)
-                return function (...args) {
-                    return target[property](...args, __name)
+function createProxy(tagName) {
+    return new Proxy(BaseElement, {
+        get(target, property) {
+            if (property in target) {
+                const __name = this.__name ?? tagName
+                if (typeof target[property] === 'function') {
+                    return function (...args) {
+                        const [tagname, ...names] = __name.split('.')
+                        return target[property](...args, tagName, names)
+                    }
                 }
+                return target[property]
+            } else {
+                if (!this.__name) this.__name = tagName
+                const __name = this.__name ? this.__name + '.' + property : property
+                return new Proxy(target, { __name, get: this.get })
             }
-            return target[property]
-        } else {
-            const __name = this.__name ? this.__name + '.' + property : property
-            return new Proxy(target, { __name, get: this.get })
         }
-    }
-})
-
-export class div extends proxy {
-    constructor(options) {
-        super(options)
-    }
+    })
 }
 
+export const div = createProxy('div')
+
+
 export class span extends BaseElement {
     constructor(options) {
         super(options)