jquery - jQuery 与标准后端编程

Question

我很想知道人们的喜好...

我最近一头扎进了 jQuery，我很喜欢它。但是，我发现我正在用微小的 jQuery 函数替换很多（有些微不足道的）后端（技术：ASP.NET）函数。例如，我没有将导航按钮分配为后端控件并在其页面登陆时更改其类（即，在关于我们页面上突出显示“关于”按钮），我只是解析 URL 并添加了一个类到按钮：

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

像这样的解决方案看起来相当简单（也许太简单了），但我总是对过度依赖 JavaScript 持谨慎态度。有没有其他人做类似的事情，如果是这样，你如何维护这样的代码？你怎么知道在哪里可以在每次都运行良好的可靠服务器代码和几乎每次都运行的快速、精美、闪亮的 jQuery 之间取得平衡，除非用户可能关闭了 JavaScript？

编辑

我并不是真的在谈论这个特定的实例……我说的是像这样的小改进。当涉及到 jQuery 增强或只是在服务器上做时，你画的线是什么？谢谢：）

score 6 · Accepted Answer

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

我什至会说，对于每个单页界面或 RIA，都应该有一个多页替代方案。

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

score 5 · Accepted Answer

在我过去的几个项目中，我有幸知道 100% 的用户会启用 Javascript。在这种情况下，我实际上做了一些非常类似于您必须避免在导航服务器端突出显示当前页面的事情。

然而，如果没有这种奢侈，我认为像这样的快捷方式就使用 jQuery 而言是“推动它”——当然，你可以说“如果他们禁用了 Javascript，那么他们就不会看到突出显示的导航页面，它不是一个大问题”——虽然这可能是真的，但如果没有特别好的理由，有一种心态会避开一种更强大、更可靠的服务器端操作方式，这是一件大事。重要的是不要让自己在客户端用“更简单”的代码替换久经考验的服务器端解决方案。这很诱人，但对您的项目和用户来说并不总是最好的，其中一些将禁用 JS，并且可能会查看导航，想知道他们在哪里，然后发现自己“迷路了”。

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

score 5 · Accepted Answer

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

score 4 · Accepted Answer

jQuery 的问题在于它会在文档就绪时触发。早期没什么大不了的，但是如果您的页面很重，那么在页面的其余部分完成加载之前，这些突出显示的内容都不会出现。这意味着您可以看到“pop”，因为所有 jQuery 增强功能都会启动。

最好只在服务器端做这种事情（尤其是当 .NET 已经为您构建了站点地图时）

score 2 · Accepted Answer

你怎么知道在哪里可以在每次都运行良好的可靠服务器代码和几乎每次都运行的快速、精美、闪亮的 jQuery 之间取得平衡，除非用户可能关闭了 JavaScript？

这听起来可能很生硬，但偏爱不到 5% 的用户（并且正在下降）是不公平的。这也将成为您的用户界面噩梦的原因。

请记住区分服务器和客户端。服务器端代码就是这样：属于服务器的代码，不影响客户端如何看待最终产品；让我们说它对于客户端是不可变的。显示最终产品是可变的，有时鼓励快速更改以提供更深入的用户体验。

score 1 · Accepted Answer

如果在 jQuery 中而不是在服务器端做事情要容易得多，那么在我看来，您正在使用笨拙的服务器端技术。

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

score 1 · Accepted Answer

我倾向于在行为方面进行优雅的降级，只要系统正常工作并且可以根据其业务需求提供服务，我就不会在意客户端的外观。样式和颜色以及所有这些漂亮的东西只属于提供给浏览器的文本，而不属于后端代码，除非样式元素的目标是提供所需的功能（例如大胆链接到表明我们在那个页面上）。

也就是说，我意识到同时我喜欢使用 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 请求和正常请求，并做出相应的响应。在这种情况下，jQuery 做了一个非常简洁的增强，并没有在项目的服务交付方面妥协。

这些天来，我经常发现自己根据如何使用 jQuery 来做这个、那个和另一个来设计东西，这就是我必须退后一步的地方，记住重要的东西必须在实验之前得到，然后有争议的“增强”可以开始推出。<sigh>

score 0 · Accepted Answer

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

您可以在此处针对多种工具验证您的页面：

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

以帮助确保您的页面仍然可以访问。

score 0 · Accepted Answer

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

对于您在原始帖子中给出的示例，（我知道您说您的要求更多是出于一般意义而不是这种特殊意义，这就是为什么我用一般解决方案来回答）我更喜欢这样做“导航使用纯 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>

还有你的样式表：

    #导航一个{
      颜色：#00F；
    }
    body.home #nav-home a,
    body.whatever-section #nav-whatever a,
    body.about-section #nav-about a {
      颜色：#F00;
    }

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

祝你好运！
-麦克风

score 0 · Accepted Answer

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

正如您在此示例中所见，您的网站可以使用相同的源代码启用 JavaScript（单页界面）或禁用（基于页面）。

jquery - jQuery 与标准后端编程

编辑

10 回答 10

Related

Reference