成长为JavaScript，作为前端与'DHTML'不可分割的一部分

Question

这里有更多一般性问题。

目前我工作的很多项目都利用服务器端视图来呈现用户界面，并且在这里和那里用一些JavaScript来修饰它。对于较小的项目来说，这一切都很好，但最近似乎.js文件的大小变得越来越大，堆栈.live和.bind jQuery调用的堆栈似乎不再削减它了。

将JavaScript混合到视图中的好方法是什么，也许是Web应用程序的控制器？对于Java驱动的网站，我发现DWR非常有用，但很多时候用户发起的事件需要控制器逻辑，当它是页面上包含的许多单独函数的一部分时，它开始变得压倒性和混乱

我认为它是一个完全由AJAX驱动的模板引擎，但这似乎有点极端，并且很可能是任何人都可以使用的屁股。另一方面，克隆现有后端类的功能似乎是多余的。

Web应用程序使用的那种好的“中间地带”方法是什么，那些不完全不支持AJAX，也不完全是JavaScript驱动的？

修改 也许我会提供一个问题的日常例子。假设我想为用户提供确认或拒绝某些内容的模式对话：

"Your picture is uploaded but looks terrible. You need a new 'do." (OK | What?)

现在，在一种情况下，由于上传带有页面刷新的图像，该对话框可能会弹出，在这种情况下，服务器端视图将呈现它。在另一种情况下，它可能会在通过AJAX上传图像后出现，在这种情况下，它可能会被页面上的JavaScript触发。在这两种情况下，我们都需要访问对话创建代码，到目前为止，我还不能想出一种方法，例如，Dialog类在两种情况下都会起作用。

Answer 1

我当然不是这个领域的专家，但过去曾与使用RESTful服务的项目合作，这似乎很适合'AJAXY'网站开发世界。我不能说它对于网络应用程序来说是理想的，但对于内容丰富的表现网站非常有用。看起来它很适合您通过自定义模板很好地满足您对多表现格式的需求。因此，该服务可以使用HTML页面模板调用pictureUpload服务，或者它可以调用服务并请求AJAX组件模板。

Answer 2

您可以在服务器上抛出所有逻辑，并假设一个显示服务器发送内容的哑客户端。

有两种情况：

1. 非Ajax请求
2. Ajax请求

它们之间的唯一区别在于，在第一个中，您渲染的内容多于模态对话框。没有理由为什么你不能在服务器上有一个Dialog类来吐出对话框的HTML表示，并且用于两种类型的请求。然后在AJAX调用中，您只需将服务器的响应添加到DOM中。

就像你说的那样，在客户端和服务器端共享UI创建逻辑可能会有问题，因此最好选择一个并坚持使用它。在上面的例子中，所有逻辑都被推送到服务器。阅读有关AHAH的更多信息。

Answer 3

听起来Google Web Toolkit可能就是你要找的东西。

  

它允许您编写客户端   Java中的应用程序并部署它们   作为JavaScript。

据推测，你可以用Java编写一次代码并在两个地方使用它，尽管我自己从未使用过GWT。

在我自己开发的框架中，我基本上强迫开发人员编写代码两次。一旦使用母语，一次使用JavaScript。我让它们填入一个返回JS的函数，然后可以在需要的地方自动调用它。但是所有的代码都包含在一个类中，所以至少你没有遍布整个地方的逻辑，你可以快速比较它们是否在功能上等同。对于像正则表达式这样的东西，它通常只能编写一次然后传递给JS（我用它在客户端验证一次，然后再在服务器端验证）。

Answer 4

我最近一直在使用JavascriptMVC（2.0）来处理内部公司应用。它有它的瑕疵，但整体架构很好，允许你创建“控制器”JS类。每个控制器“拥有”DOM树的一个子集（或者如果您愿意，是页面的可视部分）并响应该区域内的事件并使用EJS templates（“视图”部分）来改变其下的区域。它很好地抽象了大量$(...).bind()和$(...).live()调用到OOP模型中的内容。

就我而言，由于项目周围的限制，我们的界面几乎100％由JS驱动，但没有理由你不能混合匹配。

现在，在一个场景中，由于上传带有页面刷新的图像，该对话框可能会弹出，在这种情况下，服务器端视图将呈现它。在另一种情况下，它可能会在通过AJAX上传图像后出现，在这种情况下它可能会被页面上的JavaScript触发

以下是我如何以一种即使禁用Javascript也能正常工作的方式：

1. 服务器端输出HTML上载表单。纯HTML表单将提交给另一个PHP页面。
2. 当页面完成加载时，会运行一段Javascript，查找该表单。
3. javascript创建一个HairdoUploadController实例，将<form>...</form>传递给构造函数。
4. 控制器“接管”表单，使用JQuery选择器来改变样式并捕获表单提交事件。
5. 控制器添加一个新div并将其与（最初隐藏的）Jquery-UI对话框相关联。
6. 当提交表单时，控制器会进行AJAX调用，而不是普通表单。
7. AJAX调用的结果被推送到Dialog的div中，并显示对话框。

Answer 5

我发现自己最近使用我的服务器端代码（在我的情况下是ASP.Net MVC）作为一种方法来提供重复使用我的布局组件（主文件）和小封装的UI（部分视图），并在javascript中做了大量的工作。在这个特殊的情况下，我的UI工作还很早，但是使用jQuery和jQuery UI，我在很小的范围内有很多功能。

我认为采用混合解决方案的挑战之一是弄清楚在哪里放置各种逻辑。之后剩下的就可能是如何重新使用尽可能多的javascript和css代码。我仍然没有弄清楚如何管理我最终的各种javascript工件（尽管谷歌CDN通过提供jQuery，jQuery UI和jQuery UI CSS资源来减轻很多）。