理解CodeMirror多实例初始化中的常见陷阱
在网页开发中，当我们需要将多个
例如，以下代码片段展示了这种常见的误用：
window.onload = function() {
document.querySelectorAll(".codemirror-textarea").forEach(el => {
// 错误：在循环内部再次查询并获取第一个元素
const [output] = document.querySelectorAll(".codemirror-textarea");
const editor = CodeMirror.fromTextArea(output, {lineNumbers: true, readOnly: true});
});
}在这段代码中，document.querySelectorAll(".codemirror-textarea") 会返回一个包含所有匹配元素的 NodeList。forEach 方法会遍历这个 NodeList，并将当前元素作为 el 传递给回调函数。然而，在回调函数内部，const [output] = document.querySelectorAll(".codemirror-textarea"); 这一行又一次执行了查询，并且由于数组解构赋值 [output]，它总是会获取到 NodeList 中的第一个元素。因此，无论循环到哪个 el，CodeMirror.fromTextArea 总是作用于第一个 .codemirror-textarea 元素，导致其他元素未被正确初始化。
正确初始化多个CodeMirror实例
解决上述问题的关键在于，在 forEach 循环内部，我们应该使用当前迭代的元素 el 来创建 CodeMirror 实例，而不是再次查询 DOM。forEach 回调函数中的 el 参数已经指向了当前正在处理的 DOM 元素，直接使用它即可。
以下是正确实现多个CodeMirror实例初始化的方法：
window.onload = function() {
// 获取所有带有 'codemirror-textarea' 类的文本区域
document.querySelectorAll(".codemirror-textarea").forEach(el => {
// 正确：使用当前循环中的元素 'el' 来初始化 CodeMirror
const editor = CodeMirror.fromTextArea(el, {
lineNumbers: true, // 显示行号
readOnly: true // 设置为只读模式
// 可以添加更多CodeMirror配置选项
});
});
}在这段修正后的代码中：
- document.querySelectorAll(".codemirror-textarea") 依然用于获取所有目标文本区域。
- forEach(el => { ... }) 遍历这些元素，将每个元素依次赋值给 el。
- 在循环体内部，CodeMirror.fromTextArea(el, { ... }); 直接使用当前的 el 元素来初始化 CodeMirror。这样就确保了每个匹配的文本区域都能拥有自己独立的 CodeMirror 实例。
关键点与注意事项
- 使用正确的循环变量：在 forEach、for...of 或其他迭代方法中，务必使用循环迭代器提供的当前元素变量来操作，而不是在循环内部重复查询 DOM 或错误地引用固定元素。
- 脚本执行时机：确保 CodeMirror 初始化脚本在所有目标
- CodeMirror配置：CodeMirror.fromTextArea() 的第二个参数是一个配置对象，可以根据需求定制编辑器的行为和外观，例如 mode（语言模式）、theme（主题）、lineWrapping（自动换行）等。
- 性能考量：如果页面中存在大量需要转换为 CodeMirror 的文本区域，初始化过程可能会对页面加载性能产生一定影响。在这种情况下，可以考虑延迟加载、按需初始化或虚拟化技术。
总结
正确初始化多个CodeMirror实例的关键在于确保在遍历目标元素时，每个实例都绑定到其对应的DOM元素上。通过利用 forEach 循环提供的当前元素变量，我们可以避免重复引用第一个元素的问题，从而确保所有目标文本区域都能被成功转换为功能完备的CodeMirror编辑器。遵循本文提供的正确方法和注意事项，将有助于您在项目中高效且无误地集成CodeMirror。
