函数未定义：JavaScript 函数必须在同一个文件中定义吗？

发布于 2024-12-28 00:20:06 字数 928 浏览 2 评论 0原文

我有一个文件 notifications.js，其中包含一个绑定到元素的事件和一个函数 updateNotification()。当 JSON 对象作为参数传递时，此函数使用 jQuery 更新页面上的某些元素。

问题：

我尝试在页面内调用此函数（通过

/pleaseshare/views/install/:50 Uncaught ReferenceError:updateNotification is not defined

但是，当我在控制台中平移时，我可以清楚地看到列出的文件 notifications.js在脚本下，函数在那里定义。如果我在当前范围内定义该函数（例如调用上方的行），它就可以正常工作。

我尝试过的

该函数包含一些需要 jQuery 的 javascript，因此我尝试了将其包含在 $(document).ready( function() {}); 中或不将其包含在 $(document).ready( function() {}); 中。，似乎都没有任何影响。

我很困惑。

为了更好地衡量，这里有一个链接来显示我的 javascript 和 html 的结构： http://snippi.com/s/ znk6xe9

任何帮助弄清楚为什么会发生这种情况，或者解释为什么 javascript 函数不能跨文件调用（尽管我希望情况并非如此），将不胜感激;)!!

原文

I've got a file notifications.js containing one event bound to an element, and a function updateNotification(). This function uses jQuery to update certain elements on the page when a JSON object is passed as a parameter.

The problem:

I'm attempting to call this function within the page (via <script> tags), however rather than calling it, it breaks the page. I did some digging around within the Chrome Developer Console (not sure of the name), and an error is flagged:

/pleaseshare/views/install/:50 Uncaught ReferenceError:updateNotification is not defined

However, when I pan within the console, I can clearly see the file notifications.js listed under scripts, and the function is defined there. If I define the function within the current scope (e.g. the line above the call), it works fine.

What I've tried

The function contains some javascript that requires jQuery, so I've attempted both with and without encasing it in $(document).ready( function() {});, with neither seeming to have any affect.

I'm pretty stumped.

For good measure, here's a link to show the structure of my javascript and html: http://snippi.com/s/znk6xe9

Any help in figuring out why this is happening, or explanations of why javascript functions cannot be called cross-file (although I'd hope this isn't the case), would be greatly appreciated ;)!!

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

烂柯人 2025-01-04 00:20:06

除非在同一文件中定义该函数，或者在尝试调用该函数之前加载该函数，否则无法调用该函数。

除非函数处于与尝试调用它的函数相同或更大的范围内，否则无法调用该函数。

您的代码看起来结构应该可以工作，但显然是一个简化的测试用例，已经减少到无法工作的程度。

回复收藏 0 原文

温柔戏命师 2025-01-04 00:20:06

成功了。这个问题肯定是多方面的，但我想通了。

首先，RequireJS 的使用对 updateNotification() 产生了影响，因为它无法跨文件调用，因此被视为未定义。我之所以这么认为是因为 RequireJS 加载文件的方式，我稍后会查看文档（如果发现任何相关内容，我会发布编辑内容）。

其次，当包含在 jQuery 的 DOM 就绪加载器 $(document).ready(function(){}) 中时，updateNotification() 将再次被视为未定义。但是 updateNotification() 包含需要 jQuery 的执行，因此我必须将函数的内容封装在 $(document).ready(function(){}) 中。

这是 RequireJS/jQuery 特有的问题，因此在大多数用例中不会发生这种情况。

附注：编辑标签以反映这一点。

回复收藏 0 原文

那一片橙海， 2025-01-04 00:20:06

您需要将脚本导入到您的页面中：

需要将其添加到调用 updateNotification() 的

回复收藏 0 原文

陪我终i 2025-01-04 00:20:06

函数不需要在同一文件中声明。事实上，避免将每个声明都转储到全局命名空间中通常是 JavaScript 中需要考虑的问题。

在您提供的链接中的示例代码中，updateNotification 被声明为全局，因此不应存在范围问题。

但是，在同一示例中，您没有显示包含的 notification.js。您需要使用元素导入它，并且该元素必须位于包含对 updateNotification< 的调用的脚本元素之前/代码>。您还必须在 notification.js 之前添加 jQuery，因为它使用 jQuery。所以你需要类似的东西：

<body>
    // One or two elements
    <script type="text/javascript"
            src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

    <script type="text/javascript" src="notifications.js"></script>

    <script type="text/javascript">
        $(document).ready( function() {
            var json = {status : 'ok', message: 'Hello'};
            updateNotification(json);
        });
    </script>
    // All other elements
</body>

Functions do not need to be declared in the same file. In fact, avoiding having every declaration dumped into the global namespace is usually a concern in JavaScript.

In the sample code in the link you provided, updateNotification is declared as a global, so there should not be a scoping problem.

However, in the same sample, you don't show notifications.js being included. You need to import it using a <script></script> element and that element must come before the script element that includes the call to updateNotification. You also must include jQuery before notifications.js, since it uses jQuery. So you need something like:

<body>
    // One or two elements
    <script type="text/javascript"
            src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

    <script type="text/javascript" src="notifications.js"></script>

    <script type="text/javascript">
        $(document).ready( function() {
            var json = {status : 'ok', message: 'Hello'};
            updateNotification(json);
        });
    </script>
    // All other elements
</body>

回复收藏 0 原文

~没有更多了~