为什么现代JavaScript框架不鼓励与DOM的直接交互

@HDJEMAI链接到此文章，我会重复，因为它是一个很好的建议：https
://www.reddit.com/r/javascript/comments/6btma7/whats_so_wrong_with_direct_dom_manipulation/

我将在下面解释其中一些原因：

• 像Angular和React这样的现代框架旨在隐藏DOM，因为它们希望将DOM抽象化。通过直接使用DOM，您将破坏抽象并使代码对框架中引入的更改易碎。

• 有很多原因想要抽象化DOM，链接到的Reddit页面主要关注“状态管理”，因为您的框架（Angular，React等）可能会假设DOM的状态会被破坏，如果您可以直接操作DOM，例如：

  function this_is_your_pre() {tell_angular_to_make_my_sidebar_500px_wide();document.getElementById('mysidebar').style.width = 700px;var sidebar_width = ask_angular_for_sidebar_width();console.log( sidebar_width ); // will print "500px"

  }

• 提取DOM的另一个原因是，除了典型的Web浏览器

  document

  /

  window

  DOM环境外，还要确保您的代码还可以与非传统DOM一起使用，例如“ 服务器端Angular ”就是其中一些Angular代码在服务器上运行的东西预先渲染HTML以发送给客户端，以最大程度地减少应用程序启动延迟或允许没有Javascript的网络浏览器访问您的网页，在这种情况下，常规W3C DOM不再可用，但是“伪” DOM可用，但是它由Angular提供-仅通过Angular的抽象起作用-如果

  document

  直接操作，它将不起作用，例如：

  function this_is_your_pre_that_runs_in_nodejs() {tell_angular_to_make_my_sidebar_500px_wide(); // this works and Angular's built-in abstraction of the DOM makes the appropriate change to the rendered server-side HTMLdocument.getElementById('mysidebar').style.width = 500px; // fails because `document` is not available

  }