javascript - 为 Web 应用程序构建 Javascript 文件

Question

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

这是我目前正在做的:

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

<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);

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

我想知道的另一件事 -- 做这样的事情是否更干净:

$('#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]); });

谢谢!

Answer 1

对于一些简单的情况，例如几个点击处理程序和一些简单的逻辑，我不会偏离您正在做的事情太远。一旦它变得更加复杂，您将希望将代码分解为多个组件，以便随着时间的推移可维护它。

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

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

对于命名空间、对象布局和封装，您可以查看 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)。