纯JS模块化渲染单词问题：renderDOM参数undefined等报错求助

云原生阿岚

2026-8-10

问题修复方案

问题根源

未引入render.js，导致window.render对象不存在
reverse函数被IIFE包裹，未暴露到全局作用域，无法直接调用
脚本加载顺序错误，依赖文件必须在调用代码之前加载
renderDOM函数未挂载到全局可访问的位置

修正后的代码

HTML文件

调整脚本加载顺序，补全render.js的引入，修正文件名笔误：

<!DOCTYPE HTML>
<html>
<head>
  <meta charset="utf-8">
</head>
<body>
    <div class="root"></div>

    <!-- 先加载所有依赖脚本 -->
    <script src="dom.js"></script>
    <script src="render.js"></script>
    <script src="reverse.js"></script>
    
    <!-- 最后执行调用代码 -->
    <script>
        window.render.renderDOM('.root', reverse('sseccus'));
    </script>
</body>
</html>

reverse.js

修改IIFE，将reverse函数暴露到全局：

(function () {
    window.reverse = function(str) {
        return str.split('').reverse().join('');
    }
})();

render.js

将renderDOM挂载到window.render对象，确保全局可访问：

const TAG = 'p';

window.render = window.render || {};
window.render.renderDOM = function(selector, content) {
    const root = document.querySelector(selector);

    if (!root) {
        return;
    }

    const element = createElement(TAG, content);
    root.appendChild(element);
};

dom.js

保持原代码即可，createElement作为全局函数可被render.js访问：

const TAG = 'div';

function createElement(tag = TAG, content) {
    const element = document.createElement(tag);
    element.textContent = content;
    return element;
}