Question

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

这就是我目前正在做的事情：

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

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

谢谢！

Answer 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）。

Answer 2

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

构建Web应用程序的Javascript文件

2 个答案: