编辑“︁JavaScript反模式”︁（章节）

== 常见JavaScript反模式 ==

=== 1. 全局变量污染 ===

在全局作用域中声明变量是一种常见的反模式，因为它可能导致命名冲突和难以追踪的bug。

<syntaxhighlight lang="javascript">
// 反模式示例
var counter = 0; // 全局变量

function increment() {
    counter++;
}

// 更好的做法
(function() {
    var counter = 0; // 模块作用域变量
    
    function increment() {
        counter++;
    }
})();
</syntaxhighlight>

'''问题'''：全局变量可以被任何代码修改，增加了不可预测性。<br>
'''解决方案'''：使用IIFE（立即调用函数表达式）或模块模式封装变量。

=== 2. 回调地狱（Callback Hell） ===

深度嵌套的回调函数会使代码难以阅读和维护。

<syntaxhighlight lang="javascript">
// 反模式示例
getData(function(a) {
    getMoreData(a, function(b) {
        getEvenMoreData(b, function(c) {
            console.log('最终结果:', c);
        });
    });
});

// 更好的做法（使用Promise）
getData()
    .then(a => getMoreData(a))
    .then(b => getEvenMoreData(b))
    .then(c => console.log('最终结果:', c));
</syntaxhighlight>

'''问题'''：嵌套回调导致代码呈金字塔形状，难以理解和调试。<br>
'''解决方案'''：使用Promise、async/await或控制流库。

=== 3. 过度使用`document.write()` ===

`document.write()`会覆盖整个文档，导致性能问题和不可预测的行为。

<syntaxhighlight lang="javascript">
// 反模式示例
document.write('<h1>Hello World</h1>');

// 更好的做法
document.body.insertAdjacentHTML('beforeend', '<h1>Hello World</h1>');
</syntaxhighlight>

'''问题'''：`document.write()`会阻塞页面渲染，且在页面加载后使用会清空整个文档。<br>
'''解决方案'''：使用DOM操作方法如`createElement`、`appendChild`或`insertAdjacentHTML`。

=== 4. 滥用`with`语句 ===

`with`语句会改变作用域链，导致性能下降和难以预测的行为。

<syntaxhighlight lang="javascript">
// 反模式示例
with(document.getElementById('myDiv').style) {
    background = 'black';
    color = 'white';
    fontSize = '16px';
}

// 更好的做法
var style = document.getElementById('myDiv').style;
style.background = 'black';
style.color = 'white';
style.fontSize = '16px';
</syntaxhighlight>

'''问题'''：`with`会导致作用域解析变慢，且严格模式下被禁用。<br>
'''解决方案'''：显式引用对象属性。

=== 5. 不必要的DOM查询 ===

重复查询DOM元素会降低性能。

<syntaxhighlight lang="javascript">
// 反模式示例
for (var i = 0; i < 100; i++) {
    document.getElementById('myElement').innerHTML += i + '<br>';
}

// 更好的做法
var element = document.getElementById('myElement');
var content = '';
for (var i = 0; i < 100; i++) {
    content += i + '<br>';
}
element.innerHTML = content;
</syntaxhighlight>

'''问题'''：每次循环都查询DOM，性能低下。<br>
'''解决方案'''：缓存DOM引用，批量更新。