修正tagName

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) {
+    static text(text, __name, names) {
-        return createElement({ textContent: text }, this.name)
+        return createElement({ textContent: text }, __name, names)
     }
     static html(html) {
         return createElement({ innerHTML: html }, this.name)
     }
-    static childs(childs) {
+    static childs(childs, __name, names) {
-        return createElement({ children: childs }, this.name)
+        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,30 +227,29 @@ export class BaseElement {
     }
 }
 
-export const proxy = new Proxy(BaseElement, {
+function createProxy(tagName) {
+    return new Proxy(BaseElement, {
         get(target, property) {
             if (property in target) {
-            const __name = this.__name || ''
+                const __name = this.__name ?? tagName
-            console.log('name:', __name)
                 if (typeof target[property] === 'function') {
-                console.log('function:', property)
                     return function (...args) {
-                    return target[property](...args, __name)
+                        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 })
             }
         }
     })
+}
+
+export const div = createProxy('div')
 
-export class div extends proxy {
-    constructor(options) {
-        super(options)
-    }
-}
 
 export class span extends BaseElement {
     constructor(options) {