obstructive与unobstructive JavaScript区别咨询及示例代码改造

核心区别 #

你提到的obstructive JavaScript实际为拼写误差，正确表述是obtrusive JavaScript（侵入式JavaScript），二者核心差异如下：

• 侵入式JavaScript：JS逻辑与HTML结构高度耦合，常见写法是直接在HTML标签内写onclick、onchange等内联事件属性，或是JS硬绑定页面标签结构，一旦HTML结构调整，JS逻辑很容易失效，可维护性、可复用性极低。
• 非侵入式JavaScript：核心设计原则是结构（HTML）、样式（CSS）、行为（JS）三者完全分离，JS不会侵入HTML结构，HTML也不需要内嵌任何JS相关属性，代码耦合度低，就算用户禁用JS，页面基础结构也能正常展示，后续迭代维护成本更低。

改造后的非侵入式代码 #

你给出的原有代码已经接近非侵入式写法，我们可以进一步优化解耦，改造后代码如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>非侵入式JS示例</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<p id="greet_msg">How are you doing?.</p>
<button id="answer_btn">Answer</button>

<!-- 业务逻辑可单独抽取为独立JS文件引入，进一步实现结构与行为分离 -->
<script>
// 提前缓存DOM节点，避免重复查询
const $greetMsg = $('#greet_msg')
const $answerBtn = $('#answer_btn')

// 给指定ID绑定事件，不依赖页面标签结构
$answerBtn.on('click', function () {
  $greetMsg.text('I am fine')
})
</script>
</body>
</html>

改造优化点 #

• 给p、button元素添加语义化ID，JS选择器直接绑定ID，和页面标签结构完全解耦，后续新增其他同类标签不会影响现有逻辑
• 将业务JS从head移到body末尾，无需依赖$(document).ready监听DOM加载完成事件，提升页面加载性能
• 缓存DOM节点变量，减少重复DOM查询，运行效率更高
• 支持将script标签内的业务代码单独抽取为独立JS文件引入，完全实现HTML和JS代码分离，符合非侵入式JS的设计要求

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