标准组件

public/music.js

@@ -1,4 +1,4 @@
-import { Text, Button, List, ListItem } from './weigets.js'
+import { Span, Button, List, ListItem } from './weigets.js'
 
 export default class MusicList {
     constructor({ list = [], EventListeners = {}, onplay, onstop, onadd, onremove, onlike, onunlike, onban, onload }) {
@@ -88,8 +88,8 @@ export default class MusicList {
             id: item.id,
             classList: item.arrayBuffer ? ['cache'] : [],
             children: [
-                Text({
+                Span({
-                    innerText: `${item.name} - ${bytesToSize(item.size)}`,
+                    textContent: `${item.name} - ${bytesToSize(item.size)}`,
                     onclick: event => {
                         event.stopPropagation()
                         if (!this.audio.paused) {
@@ -103,14 +103,14 @@ export default class MusicList {
                     }
                 }),
                 Button({
-                    innerText: item.arrayBuffer ? '移除' : '缓存',
+                    textContent: item.arrayBuffer ? '移除' : '缓存',
                     onclick: event => {
                         event.stopPropagation()
                         if (item.arrayBuffer) {
-                            event.target.innerText = '缓存'
+                            event.target.textContent = '缓存'
                             this.unlike(item)
                         } else {
-                            event.target.innerText = '移除'
+                            event.target.textContent = '移除'
                             this.ul.querySelector(`#${item.id}`).classList.add('cache')
                             this.like(item)
                         }

public/weigets.js

@@ -1,33 +1,53 @@
-export function Button({ innerText, onclick }) {
+export function List({ innerText, textContent, onclick, children = [], dataset, classList = [], ...attributes }) {
-    const button = document.createElement('button')
+    const element = document.createElement('ul')
-    button.innerText = innerText
+    for (const key in attributes) {
-    button.onclick = onclick
+        element.setAttribute(key, attributes[key])
-    return button
+    }
+    element.classList.add(...classList)
+    if (innerText) element.innerText = innerText
+    if (textContent) element.textContent = textContent
+    if (onclick) element.onclick = onclick
+    if (dataset) Object.keys(dataset).forEach(key => element.dataset[key] = dataset[key])
+    if (children) children.forEach(child => element.appendChild(child))
+    return element
 }
 
-export function List({ children = [] }) {
+export function ListItem({ innerText, textContent, onclick, children = [], dataset, classList = [], ...attributes }) {
-    const ul = document.createElement('ul')
-    children.forEach(child => ul.appendChild(child))
-    return ul
-}
-
-export function ListItem({ innerText, onclick, children = [], dataset, classList = [], ...attributes }) {
     const element = document.createElement('li')
     for (const key in attributes) {
         element.setAttribute(key, attributes[key])
     }
-    classList.forEach(item => element.classList.add(item))
+    element.classList.add(...classList)
     if (innerText) element.innerText = innerText
+    if (textContent) element.textContent = textContent
     if (onclick) element.onclick = onclick
     if (dataset) Object.keys(dataset).forEach(key => element.dataset[key] = dataset[key])
     if (children) children.forEach(child => element.appendChild(child))
     return element
 }
 
-export function Text({ innerText, onclick, children, dataset, classList, ...attributes }) {
+export function Span({ innerText, textContent, onclick, children = [], dataset, classList = [], ...attributes }) {
     const element = document.createElement('span')
-    if (classList) classList.forEach(item => element.classList.add(item))
+    for (const key in attributes) {
+        element.setAttribute(key, attributes[key])
+    }
+    element.classList.add(...classList)
     if (innerText) element.innerText = innerText
+    if (textContent) element.textContent = textContent
+    if (onclick) element.onclick = onclick
+    if (dataset) Object.keys(dataset).forEach(key => element.dataset[key] = dataset[key])
+    if (children) children.forEach(child => element.appendChild(child))
+    return element
+}
+
+export function Button({ innerText, textContent, onclick, children = [], dataset, classList = [], ...attributes }) {
+    const element = document.createElement('button')
+    for (const key in attributes) {
+        element.setAttribute(key, attributes[key])
+    }
+    element.classList.add(...classList)
+    if (innerText) element.innerText = innerText
+    if (textContent) element.textContent = textContent
     if (onclick) element.onclick = onclick
     if (dataset) Object.keys(dataset).forEach(key => element.dataset[key] = dataset[key])
     if (children) children.forEach(child => element.appendChild(child))