构建 Web 应用程序的 Javascript 文件答案

【问题标题】：Structure Javascript file for a web application构建 Web 应用程序的 Javascript 文件
【发布时间】：2011-01-03 17:12:23
【问题描述】：

我正在开发我的第一个 Web 应用程序，随着它变得越来越大，我对组织代码最简洁的方式有一些疑问。一些更有经验的开发者愿意分享他们使用的方法吗？

这是我目前正在做的：

当页面加载时，它几乎是一个带有 id 或类标识符的空 div 的 html“模板”

<div id="calendar">
</div>

...

<div class="description" name="description[0]">
</div>

etc.

然后我在页面加载时使用 Javascript 函数填充它（稍后也会在用户操作时调用）。

所有代码都在一个单独的文件中，但我发现它最终看起来像一个选择器、事件和相应函数的列表。例如：

$('#current-view li a').click(function() { ... });

$('#save-form-button').click(function() { ... });

$('.employee-name').focus(showAutoComplete);

$('input, textarea').attr('spellcheck', false);

我的整个文件基本上是一长串这类事情的清单。这是其他开发人员构建 Web 应用程序的方式吗？我几乎只是在自学，所以我没有任何代码可以比较。

还有一件事我想知道——这样做是否更清洁：

$('#current-view li a').click(function() { *set the current tab* });

$(document).ready(function() { $('#current-view li#'+last_active_tab+' a').click(); });

或者定义一个单独的函数比如selectView然后：

$('#current-view li a').click(selectView);

$(document).ready(function() { selectView.apply($('#current-view li#'+last_active_tab+' a')[0]); });

谢谢！

【问题讨论】：

标签： javascript jquery web-applications coding-style

【解决方案1】：

对于像几个点击处理程序和一些简单逻辑这样的简单情况，我不会偏离你正在做的事情。一旦它变得更复杂，您将需要将代码分解为组件，以便它可以随着时间的推移进行维护。

应用程序中的组件应采用面向对象的方法。 UI 组件可以用对象来表示，例如“日历”，它可能具有添加和删除日历事件的功能。每个对象都应该在自己的文件中，并且可以实例化多次，或者在文档准备好后作为单例实例化。

这里有一些不错的文章，它们讨论了将代码分解为组件，包括如何实现封装和多态：

对于命名空间、对象布局和封装，您可以查看 Justin Diaz 的 module pattern，但 Jonathan Snook 反对这样的封装，因为它会阻止继承并且难以调试，因为您无法检查 element (http://snook.ca/archives/javascript/no-love-for-module-pattern)。

我找到的关于如何使用将被实例化多次的对象创建对象层次结构的最佳文章 (using the object's prototype) 由 Mike Koss (http://mckoss.com/jscript/object.htm) 撰写。 XML.com 还有一个更简单的introduction (http://www.xml.com/pub/a/2006/06/07/object-oriented-javascript.html)。

【讨论】：

【解决方案2】：

尝试使用 JavaScript MVC 对您的 JavaScript 设计采用 MVC 方法。除了更简化的结构之外，您还可以通过使用它获得a number of other advantages。

【讨论】：