单页应用自定义数据绑定：选HTML属性还是JS代码配置？

Great question—this is a classic dilemma when building your own data binding layer, especially for SPAs where syncing UI with server-stored state is critical. Let’s break down the tradeoffs of each approach and how they fit your specific scenario:

Pros & Cons of HTML-Side Configuration (Option A) #

Advantages #

• Intuitive and self-documenting: Binding rules live right next to the UI elements they affect. You can glance at an <input> tag and immediately see which state property it’s tied to, which events trigger updates, and how attributes map—no need to dig through JS files to find the connection.
• Low friction for UI changes: As you noted, adjusting bindings or adding new elements only requires updating the HTML. This is a huge win if your UI is still in frequent iteration mode, or if you have designers/front-end devs working on markup without deep JS knowledge.
• Declarative style: Aligns with the pattern used by frameworks like Vue or Angular, which many developers find easier to reason about than imperative JS code. It keeps the "what" (the binding relationship) front-and-center instead of the "how" (the underlying event listeners and updates).

Disadvantages #

• Bloated HTML: Complex binding logic can lead to a mess of data-* attributes, making your markup hard to read and maintain. For example, adding conditional bindings or computed properties would require clunky workarounds in HTML.
• Limited flexibility: Dynamic scenarios—like switching a binding target based on server state, or binding to computed values—are difficult to handle purely through HTML attributes. You’ll end up writing extra JS to patch these gaps anyway.
• Initial performance overhead: Your JS will need to scan every element in the DOM to parse data-* attributes on initialization. For large pages, this could add unnecessary load time.

Pros & Cons of JS-Side Configuration (Option B) #

Advantages #

• Centralized logic: All binding rules live in one place (or a set of organized JS files), making it easier to manage complex state relationships, especially when your server-synced state has nested or dynamic properties.
• Maximum flexibility: You can easily implement dynamic bindings, conditional logic, computed properties, or even runtime adjustments to bindings based on server responses. For example, if a user’s permissions change, you can update bindings in JS without touching HTML.
• Clean separation of concerns: HTML stays focused on structure, while JS handles behavior. This follows traditional web best practices and can make your markup more reusable across different contexts.

Disadvantages #

• Dual maintenance burden: Every time you add or modify a UI element, you have to remember to update the corresponding binding code in JS. This increases the risk of bugs (e.g., forgetting to update a listener when renaming an element ID) and slows down UI iteration.
• Less transparency: Binding relationships aren’t visible in the HTML, so debugging or onboarding new team members requires searching through JS code to find how a UI element connects to state.
• More verbose code: You’ll have to write imperative code to set up event listeners, track state changes, and update the DOM—this can lead to more boilerplate compared to the declarative approach of Option A.

Recommendation for Your SPA Scenario #

Given that your SPA relies on server-stored state and dynamic JS-driven interactions, here’s how to choose:

• Choose Option A if: Your UI bindings are mostly simple, one-to-one mappings (e.g., input values tied directly to state properties), and your UI is still evolving frequently. The ability to tweak bindings without touching JS will save you time and reduce cognitive load.
• Choose Option B if: You have complex binding logic (e.g., conditional bindings, computed values, dynamic state targets) that changes based on server data. Centralizing this logic in JS will make it easier to manage and adapt as your app grows.
• Hybrid approach (best of both worlds): Use Option A for straightforward, static bindings (like basic form inputs) and Option B for dynamic, logic-heavy bindings (like elements that show/hide based on server permissions or computed state). This balances readability and flexibility.

At the end of the day, there’s no one-size-fits-all answer—it depends on your project’s complexity, team workflow, and how often your UI vs. state logic changes.

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