javascript - Javascript 的中央管理

Question

如何管理大型网站上的 Javascript 内容？我特别挣扎于各种 $(document).ready()'s 以及我需要处理所有这些 id ($('#id')) 字符串的事实。我想将必要的 $(document).ready() 与使用它们的每个“模块”结合起来，但这会导致明显的速度下降，因为我不再在每个页面的底部都有我的 javascript。

什么是有效管理相当大站点的 Javascript 并使其易于维护的好方法？

Answer 1

看看像 Dojo 和 ExtJS 这样的库是如何管理这个的。他们使用像 require() 这样的函数来获取他们动态依赖的脚本，并确保那些公共(public)库不会被加载两次。它们定义事件来处理加载依赖性，例如，您的大量 .ready() 语句可以在某些地方重构，而不是成为一个重要的库初始化，然后触发一个或多个事件以指示某些事情已准备就绪，这其他库用作初始化的提示。

一旦多个编码人员针对同一代码库进行编码，我喜欢做的一件事是将 HTML/DOM 用作相互契约，并使用选择器将代码绑定(bind)到其中，而不是允许内联事件。

例如，如果您编写的日历控件在必须显示日历的 img 标签上有一个 onclick，那么您将很难让其他 2 个库出现并关闭“日历控件”即将弹出”事件。另一方面，如果库查找具有 CSS 类名“calendarPick”的项目并向它们附加一个事件，那么您可以让其他库保持打开状态以使用您共享的相同 DOM 执行它们将执行的操作，而它们之间很少或根本没有协调编码人员(编写需要编码人员协调的代码往往会减慢编码速度并增加出现问题的可能性)。

如果同一个 Calendar 库提供了一些事件来关闭它，那么它可以帮助其他编码人员完成他们的工作，因为如果事件已经存在，他们可能会干净地编写它；如果不是，他们更有可能破解它并使代码库在此过程中不那么灵活。

如果您提供单例方法，例如 Calendar.getCalendars()，您也将有助于简化协作，因为它可以防止人们编写自己的这些方法版本，将实现锁定在一组特定的类中名称、DOM 顺序或更脆弱的情况，以便每个人的版本都能继续工作。