Question

我想使我的代码更清楚，这是我尝试学习名称空间或嵌套函数的原因。我已经在多个地方阅读过有关它们的信息，据我了解，'Revealing Module'是最好的选择。因此，我尝试从帖子namespace中复制第二个示例。

首先，尝试使用两种方法返回对象时出现错误：Unexpected token ':'。当我尝试返回一个方法而不是2时，尝试调用Cannot read property of undefined对象的applyEvents时遇到了expandableElements错误。

let expandableElements = 
(
    function() 
    {
        // All expandable elements
        let expands = document.querySelectorAll(".expand-icon");

        // Apply events to all .expand-icon elements
        function applyExpandEvents()
        {
            for(let i = 0; i < expands.length; i++)
            {
                expands[i].addEventListener("click", expandList);
            }

            // Expand method
            function expandList() 
            {
                this.classList.toggle("active");
                let content = this.previousElementSibling;

                if (content.style.maxHeight)
                {
                    content.style.padding = "0";

                    content.style.maxHeight = null;
                } 
                else 
                {
                    content.style.padding = "1rem";
                    content.style.paddingBottom = "0.5rem";

                    content.style.maxHeight = content.scrollHeight + 20 + "px";
                } 
            }
        }


        // Close all expanded lists
        function closeAllExpands()
        {
            for(let i = 0; i < expands.length; i++)
            {
                let expand = expands[i];

                if(expand.classList.contains("active"))
                {
                    expand.classList.toggle("active");

                    expand.previousSibling.style.padding = "0";
                    expand.previousSibling.style.maxHeight = null;
                }
            }
        }

        return 
        {
            applyEvents : applyExpandEvents,
            closeAll    : closeAllExpands // Unexpected token ':'
        };
    }
)();

expandableElements.applyEvents(); // If remove closeAll from return, then'Cannot read property applyEvents of undefined'

Answer 1

return和JSON必须在同一行。一旦执行了返回行，控件就会移交给调用者（使用undefined），而JSON行将永远不会执行。

这样做：

...
        return {
            applyEvents : applyExpandEvents,
            closeAll    : closeAllExpands // Unexpected token ':'
        };

来自MDN docs about return的

详细说明：

return语句受自动分号插入（ASI）的影响。 return关键字和表达式之间不允许使用行终止符。

return
a + b;

被ASI转换为：

return; 
a + b;

嵌套函数错误，意外令牌'：'，无法读取未定义的属性

1 个答案: