javascript 模块模式适用于 jsbin，但不适用于我的服务器/浏览器答案

【问题标题】：javascript module pattern works on jsbin but not in my server/browserjavascript 模块模式适用于 jsbin，但不适用于我的服务器/浏览器
【发布时间】：2014-09-17 21:00:01
【问题描述】：

我是一名后端开发人员，我只在需要时才编写 javascript，而不是最好的方式。但我想挽回自己，并尽可能多地组织并遵循最佳实践。

所以我开始了一个模块模式来封装一些功能并从我的标记中绑定 UI 事件，因为这几乎是尝试和错误，所以我按照前端开发人员的朋友的建议使用了 jsbin。

问题是，我的概念适用于 jsbin，但后来我将它移到服务器中的 js 文件中，似乎我在模块模式中缓存的 jQuery 对象的范围松散了。

http://jsbin.com/ciwomeve/7/edit

该功能非常基本，我填充了两个选择元素的选项（这可行），然后我为这些选择绑定 on change 事件，当触发时，我应该调用一些函数，这些函数最终应该向我的后端发出 ajax 请求和获取数据。

你们能否就代码给我建议，并告诉我我做错了什么？

【问题讨论】：

您的服务器发送的页面上是否链接了 jQuery？您能否提供指向您网站的链接？
在 VPN 后面，很遗憾没有，但是我有 jq populateHostLists fn 使用 jQuery 并且确实可以工作
一些想法：如果您只是在浏览器中查看 HTML 页面（即文件未提供，URL 读取为 'file://'），那么 jQuery 的协议相对路径将不会不工作。我知道你说你在为他们服务，但我想我会提一下以防万一。或者您的脚本标签的顺序可能有误。
或者，如果您的脚本在头脑中，他们可能会尝试访问尚未加载的内容。您可以尝试将脚本移动到

标签： javascript jquery dom scope module-pattern

【解决方案1】：

这里没有什么可做的，但我很确定您的问题是您的脚本标签在<head> 中，并且它在您的内容加载之前运行。如果是这种情况，它将尝试访问 DOM 中尚不存在的元素（例如，当此行运行时，$hostSelect1: $('#host-select-1') id host-select-1 的选择元素将不存在，但 jQuery 会看起来无论如何都要默默地失败）。

您可以将脚本移动到页面底部，就在</body> 之前，在这种情况下，您可以确定在脚本运行时将加载您的所有内容。此方法还具有其他一些性能优势。或者你可以在$().ready 中封装你对DbDiff.init() 的调用，就像这样$().ready(function(){DbDiff.init()});，这将产生大致相同的效果（除了settings 已经被评估......你需要做一些重组为了确保 $('#host-select-1') 等仅在您的 DOM 内容加载后才被评估并分配给 $hostSelect1。

【讨论】：