我是一名后端开发人员，我只在需要时编写 JavaScript，而且不是最好的方式。但我想救赎自己，并尽可能地组织和遵循最佳实践。
因此，我开始使用模块模式来封装一些功能并从我的标记中绑定(bind) UI 事件，因为这几乎是一次尝试和错误，所以我按照一位前端开发人员 friend 的建议使用了 jsbin。
问题是，我的概念适用于 jsbin，但后来我将其移动到服务器中的 js 文件中，似乎我失去了在模块模式中缓存的 jQuery 对象的范围。
http://jsbin.com/ciwomeve/7/edit
功能非常基本，我填充两个选择元素的选项(这有效)，然后我为这些选择绑定(bind)更改事件，当触发时，我应该调用一些函数，这些函数最终应该向我的后端执行 ajax 请求，获取数据。
你们能就代码向我提出建议，并告诉我我做错了什么吗？
最佳答案
这里没什么可说的，但我相当确定你的问题是你的脚本标签位于 <head> 中。 ，并且它在加载您的内容之前运行。如果是这种情况，它将尝试访问 DOM 中尚不存在的元素(例如，当此行运行时， $hostSelect1: $('#host-select-1') id 为 host-select-1 的选择元素尚不存在，但 jQuery 会查找无论如何，都会默默地失败)。
您可以将脚本移动到页面底部，就在 </body> 之前，在这种情况下，您可以确定脚本运行时将加载所有内容。此方法还具有其他一些性能优势。或者您也可以将通话转至 DbDiff.init()在$().ready ，像这样$().ready(function(){DbDiff.init()}); ，这将具有大致相同的效果(除了 settings 已经被评估...您需要进行一些重组，以确保 $('#host-select-1') 等仅在之后被评估并分配给 $hostSelect1您的 DOM 内容已加载)。
关于javascript 模块模式适用于 jsbin，但不适用于我的服务器/浏览器，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24965332/