Question

我很想知道别人的偏好......

我最近率先进入jQuery，我很喜欢它。但是，我发现我用微小的jQuery函数替换了很多（有点琐碎的）后端（tech：ASP.NET）函数。例如，不是将导航按钮指定为后端控件，而是在其页面着陆时更改其类（即，在关于我们页面时突出显示“关于”按钮），我只是解析了URL并添加了一个按钮的类：

var pathname = window.location.pathname;
if (pathname == "/about/") {
    $("#nav-about").addClass("selected");
}

这些解决方案似乎相当简单（可能太简单），但我总是谨慎地过分依赖JavaScript。有没有其他人对此做类似的事情，如果是这样，你如何维护这样的代码？你怎么知道在每次运行良好的可靠服务器代码与快速，华丽，闪亮的jQuery之间取得平衡，每次都可以运行，除非用户可能关闭了JavaScript？

修改

我并没有真正谈到这个特殊情况......我正在谈论像这样的小改进。在jQuery增强功能上或者在服务器上执行此操作时，您绘制的是什么？谢谢:)）

Answer 1

Javascript是HTML和CSS之上的额外层。当您构建可访问的网站时，所有内容都应该只在HTML中提供。 CSS和Javascript都应该仅用于增强用户体验。

我甚至会说，对于每一个页面界面或RIA，应该有一个多页替代。

所以，回答你的问题，这绝对是你想要在服务器而不是客户端上编码的东西。

Answer 2

我过去的几个项目让我很高兴知道100％的用户都会启用Javascript。在这种情况下，我实际上做了一些非常类似于你必须在导航服务器端突出显示当前页面的东西。

然而，如果没有这种奢侈，我认为这样的快捷方式就是“推动它”使用jQuery - 当然，你可以说“如果他们禁用了Javascript，那么他们就不会看到导航页面突出显示“这并不是什么大不了的事” - 虽然这可能是真的，但是这种心态在没有特别好的理由的情况下避免使用服务器端的更强大，更可靠的方式是一件大事。重要的是要避免在客户端中使用“更简单”的代码替换经过实战考验的服务器端解决方案。这很诱人，但对你的项目和你的用户来说并不总是最好的东西，其中一些将禁用JS，可能会看到导航想知道他们在哪里，并发现自己“丢失”。

总而言之，我建议您切换回服务器端代码。没有必要扔掉它。

Answer 3

我觉得主要的问题是搜索引擎，因为它们不解析js。任何内容类型的东西，我总是确保没有，但我觉得很少设计师接触。

Answer 4

jQuery的问题在于它准备就绪了。在早期并不是什么大不了的事，但如果你有一个沉重的页面，这个突出显示的东西都不会出现，直到页面的其余部分完成加载。这意味着您可以看到“pop”，因为所有jQuery增强功能都会触发。

最好只是做这种服务器端（特别是当.NET已经为你构建Sitemap时）

Answer 5

你怎么知道在哪里打击良好的'可靠的服务器之间的平衡每次都快速运行的代码，花哨，闪亮的jQuery非常有效每次都很多，除非是用户可能关闭了JavaScript？

这可能听起来很生硬，但偏向不到5％的用户（and declining）是不公平的。它也只是造成用户界面噩梦的原因。

请记住绘制服务器和客户端之间的区别。服务器端代码就是：服务器上的代码，不会影响客户端看到最终产品的 ;让我们说它对客户来说是不可改变的。显示最终产品是可变的，有时鼓励快速变化以提供更深入的用户体验。

Answer 6

如果在jQuery而不是服务器端执行操作要容易得多，那对我来说就像是在使用笨重的服务器端技术。

对我来说，服务器端编程至少应该像客户端一样简单。

Answer 7

我倾向于在行为方面优雅地降级，只要系统工作并且能够满足其业务需求，我就不会对客户端的内容感到困扰。样式和颜色以及所有这些漂亮的东西只属于提供给浏览器的文本，而不属于后端代码，除非样式元素的目标是提供必需的功能（例如，通过链接显示我们在该页面上）。

那就是说，我意识到同时我喜欢使用jQuery以及它允许我在很短的时间内执行各种酷客户端滑稽动作的许可。因此，我倾向于构建的是一个可靠的系统（就像在所有这些脚本废话之前的好时光:)并且它做了它应该做的事情。已经实现了这一点，并且为了额外拍摄（和真正的代表），我将使用jQuery以非妥协的方式使整个用户体验充满乐趣。举一个简单的例子：

<a class="pageNo" href="/?p={$pageNo}">{$pageNo}</a>

是一个页面链接，单击它会将一些结果加载到div中，实现类似于：

jQuery('.pageNumber').click(function(e) {

            //stop the link from firing
            e.preventDefault();

            //steal the page number from the tag
            var pageNo = jQuery(this).text();

            //assign it to a hidden field
            jQuery('#pageNo').val(pageNo);

            //use $.load to fill up a div with the results
            loadPage(pageNo);


        });

该链接指向服务器上看起来像www.random.com/things/?p=2的资源。 jQuery的$.load函数获取此页面并将其插入到div中，ajaxily。如果Javascript失败，或者不可用，那就没什么大不了的了，因为链接正常触发并访问了页面，就像过去那样。此外，服务器被设置为区分XHTTP请求和正常的XHTTP请求，并相应地做出响应。在这种情况下，jQuery是为了一个非常简洁的增强而做的，它在项目的服务交付方面完全不妥协。

这些天我常常发现自己设计的东西就是我如何使用jQuery来实现这一点，而另一方面，这就是我必须退后一步并记住重要的东西已经在实验性和有争议的“增强”开始推出之前得到正确。<sigh>

Answer 8

我自己喜欢jQuery，但是我可能会担心可访问性和功能性问题。我经常在禁用Javascript的情况下测试页面以确保它能够与该受众一起使用（公共终端经常使用Javascript禁用恕我直言），并在Lynx中了解屏幕阅读器将如何看到我的页面。

您可以在此处根据许多工具验证您的网页：

http://www.w3.org/WAI/ER/tools/complete

有助于确保您的网页仍然可以访问。

Answer 9

由于我不能在此处留下评论，我将其作为答案输入，即使它更像是评论。（虽然可能不适合评论！）

对于你在原帖中给出的例子，（我知道你说你要求的更多的是一般意义而不是这种特殊意义，这就是我回答一般解决方案的原因）我更喜欢做这个“导航突出显示”使用纯CSS。

例如，您可以按如下方式使用“约”页面：

<body class="about-section">
  <h1>This is a page in our About section!</h1>
  ...
  <ul id="nav">
    <li id="nav-home"><a href="/">Home</a></li>
    <li id="nav-whatever"><a href="/whatever/">Whatever</a></li>
    <li id="nav-about"><a href="/about/">About</a></li>
  </ul>
</body>

你的样式表：

    #nav a {
      color:#00F;
    }
    body.home #nav-home a,
    body.whatever-section #nav-whatever a,
    body.about-section #nav-about a {
      color:#F00;
    }

添加和维护页面由一个CSS声明处理。它不需要任何javascript NOR服务器端编程;你只需将身体类（或其他标识符）与你想要不同样式的项目结合起来。

祝你好运！
-Mike

Answer 10

Jason还有另一种方法：代码类似JavaScript，但在服务器中，请查看ItsNat。目前只适用于Java，而不是.Net :(

正如您所看到的in this example，您的网站可以使用启用JavaScript（单页面界面）或禁用（基于页面）使用相同的源代码。

jQuery与标准后端编程

修改

10 个答案: