JavaScript中在其他函数作用域运行代码：自制框架数据绑定疑问

Hey there, sounds like you're building a really solid foundation for your future projects with this custom JS tooling—great initiative! Let's walk through how to flesh out that object-based data binding system you described, plus some upgrades to make it more flexible and reactive.

First, let's turn your initial idea into working code. This version will scan your target HTML elements for {{key}} placeholders and swap them with values from your data object.

Step 1: The HTML Markup #

<div id="app">
  <h1>Hello, {{name}}!</h1>
  <p>You're building a {{projectType}} tool framework—nice work!</p>
</div>

Step 2: The JavaScript Binding Function #

Here's a straightforward, readable implementation:

function bindData(targetElement, data) {
  // Recursively grab all non-empty text nodes (avoids messing with HTML tags)
  const textNodes = getTextNodes(targetElement);
  
  textNodes.forEach(node => {
    // Replace all {{key}} patterns with matching data values
    node.textContent = node.textContent.replace(/\{\{(\w+)\}\}/g, (match, key) => {
      // Fallback to the original placeholder if the key doesn't exist
      return data[key] ?? match;
    });
  });
}

// Helper to traverse elements and collect text nodes
function getTextNodes(element) {
  let nodes = [];
  for (const node of element.childNodes) {
    if (node.nodeType === Node.TEXT_NODE && node.textContent.trim() !== '') {
      nodes.push(node);
    } else if (node.nodeType === Node.ELEMENT_NODE) {
      nodes = nodes.concat(getTextNodes(node));
    }
  }
  return nodes;
}

// Example usage
const appData = {
  name: "Joseph",
  projectType: "JavaScript data binding"
};

bindData(document.getElementById('app'), appData);

How It Works #

• The getTextNodes helper ensures we only modify actual text content, not HTML tag attributes or structure.
• The regex /\{\{(\w+)\}\}/g catches all {{key}} patterns, capturing the key name inside the brackets.
• We use a nullish coalescing operator (??) to fall back to the original placeholder if the key isn't found in your data object—no broken UI!

If you want your UI to automatically refresh when your data changes (instead of a one-time replacement), use JavaScript's Proxy object to intercept property changes:

function createReactiveData(data, updateCallback) {
  return new Proxy(data, {
    set(target, key, value) {
      // Update the underlying data property
      target[key] = value;
      // Trigger the DOM refresh
      updateCallback();
      // Return true to confirm successful assignment
      return true;
    }
  });
}

// Usage with reactive data
const reactiveAppData = createReactiveData({
  name: "Joseph",
  projectType: "JavaScript data binding"
}, () => {
  // Re-run binding logic whenever data changes
  bindData(document.getElementById('app'), reactiveAppData);
});

// Now updates to data auto-refresh the DOM!
reactiveAppData.name = "Joe";
reactiveAppData.projectType = "reactive JS tool framework";

Key Win Here #

The Proxy wraps your data object and listens for any property updates. When a change happens, it automatically re-runs your binding logic—no manual DOM updates needed.

To make this framework production-ready, consider these tweaks:

• Support Nested Objects: Modify the lookup logic to handle keys like {{user.name}} by splitting the key path and traversing nested objects:

  function getNestedValue(obj, keyPath) {
    return keyPath.split('.').reduce((current, key) => current?.[key], obj);
  }
  

• Prevent XSS Attacks: If your data includes user-generated content, add an HTML escape helper to avoid malicious code injection:

  function escapeHtml(text) {
    const div = document.createElement('div');
    div.textContent = text;
    return div.innerHTML;
  }
  

• Cache Text Nodes: Avoid re-scanning the entire DOM on every update—cache text nodes and their original placeholder patterns to only update what's necessary.

内容的提问来源于stack exchange，提问作者Ryan Hillis