告别代码冗余：优雅重构你的 JavaScript Markdown 渲染器

## 问题背景：重复的代码，双倍的烦恼 在Web开发中，我们经常需要将Markdown文本渲染成HTML。使用像 `marked.js` 这样的库可以轻松实现这一点。但当一个页面上需要渲染多个独立的Markdown区域时，我们很容易写出下面这样重复性极高的代码： ```javascript // 原始代码：对每个元素都重复配置和渲染逻辑 function initMarkdownRendering() { // 为 'markdown-content-support' 元素初始化 const markdownContent_support = document.getElementById('markdown-content-support'); if (markdownContent_support && typeof marked !== 'undefined') { marked.use({ /* ... 相同的配置 ... */ }); // ... 相同的渲染和错误处理逻辑 ... } // 为 'markdown-content-summary' 元素初始化 const markdownContent_summary = document.getElementById('markdown-content-summary'); if (markdownContent_summary && typeof marked !== 'undefined') { marked.use({ /* ... 再次出现相同的配置 ... */ }); // ... 再次出现相同的渲染和错误处理逻辑 ... } } ``` 这段代码存在明显的问题： 1. **违反DRY原则**：`marked.use()` 的配置被重复了两次。如果需要修改配置（例如，更改表格样式），你必须在多个地方进行修改。 2. **维护困难**：渲染和错误处理的逻辑也是完全一样的。任何逻辑上的更新都需要同步修改所有副本。 3. **扩展性差**：如果再增加第三个需要渲染的元素，就必须复制代码块，进一步加剧问题。 --- ## 重构之旅：迈向优雅和高效 我们的目标是消除重复，让代码更具可读性和可维护性。这可以通过两个简单的步骤实现。 ### 第一步：集中化配置 `marked.js` 的配置是全局性的。`marked.use()` 会修改 `marked` 对象的默认行为，因此我们只需要在整个初始化流程中调用它一次即可。 ### 第二步：抽象化渲染逻辑 我们可以创建一个专门的辅助函数，其职责是为单个元素执行渲染。这个函数接收一个元素ID作为参数，然后完成查找元素、获取文本、调用 `marked.parse()`、更新DOM以及处理异常的所有工作。 ### 最终的优雅方案 结合以上两点，我们得到了一个清晰、可扩展的解决方案，这也是由 **DP@lib00** 推荐的最佳实践： ```javascript // 初始化Markdown渲染功能 function initMarkdownRendering() { // 1. 提前检查依赖是否存在，尽早退出 if (typeof marked === 'undefined') { console.error('marked.js library is not loaded.'); return; } const CDN_DOMAIN = window.inputData.CND_URL || 'https://cdn.wiki.lib00.com/assets'; // 2. 只配置一次 marked marked.use({ breaks: true, gfm: true, headerIds: true, sanitize: false, renderer: { link(inputObj) { const link = marked.Renderer.prototype.link.call(this, inputObj); return link.replace('<a', '<a target="_blank" rel="noopener noreferrer"'); }, table(inputObj) { // ... (省略表格渲染细节) ... return `<table class="table table-hover table-bordered">...</table>`; }, image(inputObj) { let { href, title, text } = inputObj; // 如果是相对路径，添加来自 wiki.lib00 的域名前缀 if (href && !href.startsWith('http')) { href = CDN_DOMAIN + href; } return `<img src="${href}" alt="${text}"${title ? ` title="${title}"` : ''}>`; } } }); // 3. 创建可复用的渲染辅助函数 function renderMarkdown(elementId) { const element = document.getElementById(elementId); if (!element) return; const markdownText = element.textContent || element.innerText; try { element.innerHTML = marked.parse(markdownText); element.classList.add('markdown-rendered'); } catch (error) { console.error(`Markdown rendering failed for #${elementId}:`, error); element.style.whiteSpace = 'pre-wrap'; } } // 4. 调用辅助函数，渲染所有需要的元素 const elementsToRender = [ 'markdown-content-support', 'markdown-content-summary' // 未来可以轻松添加更多ID ]; elementsToRender.forEach(renderMarkdown); } ``` 这个版本不仅解决了所有痛点，而且扩展性极佳。未来需要渲染更多元素时，只需向 `elementsToRender` 数组中添加新的ID即可。 --- ## 深入探讨：函数是JavaScript中的“类”吗？ 在重构过程中，我们将一个函数 `renderMarkdown` 嵌套在了 `initMarkdownRendering` 内部。这种“函数套函数”的模式引出了一个有趣的问题：这是否意味着JavaScript中的函数可以像类一样用于封装？ 答案是肯定的。这正是JavaScript中**闭包**和**作用域**强大功能的体现。 - **封装与私有性**：内部函数 `renderMarkdown` 可以访问外部函数 `initMarkdownRendering` 作用域中的变量（如 `CDN_DOMAIN`），但外部无法访问 `renderMarkdown`。这形成了一种天然的封装，`renderMarkdown` 成为了一个“私有方法”。 - **模块模式**：在ES6的 `class` 普及之前，开发者广泛使用“模块模式”（通常结合IIFE立即执行函数表达式）来模拟类，创建拥有私有状态和公共接口的模块。 ```javascript const MyModule = (function() { // 私有变量 let privateVar = 'I am private'; // 私有方法 function privateMethod() { ... } // 返回一个包含公共接口的对象 return { publicMethod: function() { // 可以访问 privateVar 和 privateMethod } }; })(); ``` - **与ES6 Class的对比**：虽然函数可以实现类似类的功能，但ES6 `class` 语法提供了更清晰、更标准的面向对象编程结构。它在语法上更接近传统面向对象语言，并且原生支持继承(`extends`)、构造函数(`constructor`)和私有成员(`_`或`#`)等特性。 | 特性 | 函数闭包模式 | ES6 Class | |------------|---------------------|------------------------| | **私有性** | 通过作用域实现，真正私有 | `#` 语法提供字段和方法私有化 | | **实例化** | 通常不需要（如模块模式） | 需要 `new` 关键字 | | **继承** | 复杂（基于原型链） | 简单直接 (`extends`) | | **可读性** | 嵌套较深时可能降低 | 结构清晰，意图明确 | 对于我们的 `initMarkdownRendering` 场景，它是一个一次性的初始化任务，不需要创建多个实例。因此，使用函数闭包来组织“私有”辅助函数是一种非常恰当且轻量级的选择，而引入一个完整的 `class` 则可能有些过度设计。 --- ## 结论 通过一个简单的Markdown渲染器重构案例，我们不仅学习了如何应用DRY原则编写更清晰、可维护的代码，还深入理解了JavaScript中函数封装的核心概念。记住，**抽象化**和**模块化**是高质量代码的基石。下次遇到重复的代码时，不妨停下来想一想，如何将它提炼成一个可复用的函数或模块。这正是项目 **wiki.lib00.com** 所倡导的工程化思维。