优化JavaScript DOM元素创建脚本：探寻更简洁的实现方式

Absolutely! There are several cleaner, more concise ways to create DOM elements like your toolbar—no more repetitive element.style.x = y lines. Let’s break down a few practical approaches:

1. Bulk Property/Style Assignment with Object.assign #

Instead of setting each property and style individually, use Object.assign to apply all configurations in one go. This cuts down on redundant references to your element:

$hubbe.toolbarLeft = Object.assign(document.createElement('DIV'), {
  id: 'toolbar-left',
  style: {
    width: '50px',
    height: '100%',
    position: 'fixed',
    left: '0',
    backgroundColor: 'grey',
    color: 'white',
    textAlign: 'center'
  }
});
document.body.appendChild($hubbe.toolbarLeft);

This keeps all your element’s settings grouped together, making the code easier to scan and modify.

2. Template Strings for Quick HTML Injection #

For simple elements (especially static ones), using template strings to define the HTML structure is incredibly intuitive and concise. You can either inject it directly into the DOM or extract the element:

Option A: Directly insert into the DOM #

const toolbarHTML = `
<div id="toolbar-left" style="width:50px; height:100%; position:fixed; left:0; background-color:grey; color:white; text-align:center"></div>
`;
document.body.insertAdjacentHTML('beforeend', toolbarHTML);
$hubbe.toolbarLeft = document.getElementById('toolbar-left');

Option B: Create the element first (no need for getElementById) #

const toolbarHTML = `
<div id="toolbar-left" style="width:50px; height:100%; position:fixed; left:0; background-color:grey; color:white; text-align:center"></div>
`;
$hubbe.toolbarLeft = document.createRange().createContextualFragment(toolbarHTML).firstElementChild;
document.body.appendChild($hubbe.toolbarLeft);

Note: This works great for static content. If you’re dealing with user-generated content, be cautious of XSS risks—sanitize inputs first!

3. Reusable Factory Function (For Scalability) #

If you find yourself creating multiple similar UI elements, wrap the creation logic in a reusable function. This makes your code modular and easier to maintain:

function createElement(tag, props = {}, parentElement = null) {
  const element = document.createElement(tag);
  // Apply all properties (including style) to the element
  Object.assign(element, props);
  // Append to parent if provided
  if (parentElement) parentElement.appendChild(element);
  return element;
}

// Usage for your toolbar
$hubbe.toolbarLeft = createElement('DIV', {
  id: 'toolbar-left',
  style: {
    width: '50px',
    height: '100%',
    position: 'fixed',
    left: '0',
    backgroundColor: 'grey',
    color: 'white',
    textAlign: 'center'
  }
}, document.body);

Now you can reuse createElement for any other elements you need to build later!

Which to Choose? #

• Use template strings for simple, static elements—they’re the fastest to write and read.
• Use Object.assign when you need dynamic control over properties/styles (e.g., values change based on user input).
• Use the factory function if you’re building multiple components or want to keep your code DRY (Don’t Repeat Yourself).

内容的提问来源于stack exchange，提问作者Sebastian Andersson