如何用JavaScript实现类Angular/Vue的无元素替换式动态数据绑定更新

Hey there! I’ve spent a fair bit of time digging into how frameworks like Angular and Vue handle data binding without replacing elements, so I can walk you through a vanilla JavaScript solution that fits all your three scenarios. The core idea is to track where {{a}} appears in the DOM, then update only those specific parts when the variable changes—no element replacement needed.

First, Let’s Build a Reactive Variable Foundation #

We’ll start with a simple reactive setup for variable a that triggers updates whenever its value changes. This mimics the reactivity you get in frameworks:

// Our target variable
let a = "initial-value";
// Array to hold functions that run when a changes
const aUpdateSubscribers = [];

// Function to update a and trigger all subscribers
function updateA(newValue) {
  a = newValue;
  aUpdateSubscribers.forEach(callback => callback(newValue));
}

1. Property Binding Scenario: <span id="{{a}}"></span> #

For attributes that include {{a}}, we need to track which elements and attributes use this binding, then update the attribute value directly when a changes.

// Parse all elements for attribute bindings
document.querySelectorAll("*").forEach(element => {
  // Loop through every attribute on the element
  Array.from(element.attributes).forEach(attr => {
    if (attr.value.includes("{{a}}")) {
      // Store the original attribute template (e.g., "{{a}}")
      const originalAttrTemplate = attr.value;
      // Set the initial attribute value
      element.setAttribute(attr.name, originalAttrTemplate.replace("{{a}}", a));
      
      // Add a subscriber to update this attribute when a changes
      aUpdateSubscribers.push(newVal => {
        element.setAttribute(attr.name, originalAttrTemplate.replace("{{a}}", newVal));
      });
    }
  });
});

How this works: We don’t replace the <span> element—we just modify its id attribute directly every time a updates.

2. Text Binding Scenario: <span>{{a}}</span> #

For text content containing {{a}}, we’ll target the actual text nodes (not the parent elements) and update their content. This avoids replacing the parent <span> entirely.

First, we need a helper function to traverse all text nodes in the DOM:

// Recursively traverse all text nodes in a given element
function traverseTextNodes(rootNode, callback) {
  if (rootNode.nodeType === Node.TEXT_NODE) {
    callback(rootNode);
  } else {
    rootNode.childNodes.forEach(child => traverseTextNodes(child, callback));
  }
}

Then, process the text bindings:

// Parse all text nodes for {{a}} bindings
traverseTextNodes(document.body, textNode => {
  const originalText = textNode.textContent;
  if (originalText.includes("{{a}}")) {
    // Set initial text content
    textNode.textContent = originalText.replace("{{a}}", a);
    
    // Add a subscriber to update this text node when a changes
    aUpdateSubscribers.push(newVal => {
      textNode.textContent = originalText.replace("{{a}}", newVal);
    });
  }
});

This works even for mixed text like <span>Hello, {{a}}!</span>—it’ll only replace the {{a}} portion, not the entire text.

3. Nested Element Scenario: <div id="hello"><input type="text">{{a}}</div> #

Great news—this scenario is already handled by our text binding code! The traverseTextNodes function will recursively look inside the #hello div, find only the text node with {{a}}, and update it without touching the <input> or re-rendering the entire #hello div.

Test it with this HTML:

<div id="hello">
  <input type="text" placeholder="Your input stays here!">
  Current value of a: {{a}}
</div>

When you call updateA("new-value"), only the text "Current value of a: ..." changes—your input field and its state (like any text you’ve typed) remain completely untouched.

Test the Whole Setup #

Add a button to trigger updates and see it in action:

<button onclick="updateA('Updated at ' + new Date().toLocaleTimeString())">Update a</button>

Clicking this button will update all three binding scenarios instantly, without replacing any elements.

Why This Is Better Than Your Initial Idea #

Your thought to replace {{a}} with <span id="a"></span> works for simple text bindings, but this solution:

• Doesn’t require modifying your original HTML
• Handles mixed text content naturally
• Supports attribute bindings (your original sticking point)
• Preserves all element states (like input values, focus, etc.)

内容的提问来源于stack exchange，提问作者Alisha Sharma