jjzjj

javascript - 可访问性和所有这些 JavaScript 框架

coder 2023-07-03 原文

一段时间以来，我一直在研究一些 JavaScript 框架，例如 Backbone.js 和 Batman.js，虽然我真的很喜欢它们，但我有一件琐碎的事情，我一直在回顾。这个问题是可访问性。

作为一名 Web 开发人员，我一直试图让我的网站和应用程序具有可访问性，尤其是使用渐进增强的想法。

很明显，这些新的 JS 框架开箱即用并不会优雅地降级，所以我想知道其他开发人员对这个问题有什么想法，你正在做些什么。毕竟，网站/应用程序的可访问性并不是真正的可选项，因为它是许多国家/地区法律的一部分。

也许我只是在这个主题上过于热心，而没有意识到在可访问性方面已经取得了多大进展。

最佳答案

我在我的最新站点中使用了一个 js 框架(在我的例子中是 spine.js)。我仍然确保非 js 浏览器(当然不会过于狂热:想想 SEO)可以浏览我的网站并消化内容。

例如，我将使用一个显示产品的搜索页面。产品可以分页、过滤、排序。当然，这是广义思想的一个例子。

先决条件:使用可以同时呈现服务器端和客户端的模板引擎。 (我用 mustache )。这确保您可以通过服务器端模板渲染没有 js 的模型，并通过客户端模板渲染带有 js 的模型。

  • 最初:使用服务器端 mustache-template 渲染产品。还包括一个“bootstrapJSON”对象，其中包含 JSON 格式的相同产品。
  • 最初:所有链接(产品详细信息页面、分页、排序、过滤)都是真实的服务器端 url(没有 hashbang url)
  • 最终结果是一个可以在不使用 JS 的情况下通过分页、排序、过滤 100% 导航的页面。
  • 所有分页、排序、过滤 url 都会导致对服务器的请求，从而导致呈现一组新的产品。这里没什么特别的。
  • 启用 JS - 在 domload 上:
  • 获取 bootstrapJSON 并从中制作产品模型(使用您的 js-framework 功能来执行此操作)。
  • 之后使用相同的 mustache 模板重新渲染产品，但现在在客户端进行。 (再次使用您的 js 框架)。
  • 视觉上没有什么应该改变(在所有服务器端和客户端渲染都是在相同的模型上完成的，使用相同的模板)，但至少现在客户端模型和 View 之间存在绑定(bind)。
  • 将 url 转换为 hashbang-url。 (例如:/products/#sort-price-asc )并使用您的 js-framework 功能来连接事件。
  • 现在每个(过滤、分页、排序)url 都应该导致客户端状态更改，这可能会导致您的 js 框架向服务器执行 ajax 请求以返回新产品(以 JSON 格式)。在客户端上再次重新渲染它应该会导致您更新 View 。
  • 6.服务器端处理ajax-request的代码逻辑部分与4. ajax-call和普通请求的代码100%相同，将产品以JSON或html的形式吐出(使用 mustache 服务器端)分别。

    • 编辑:2013 年 1 月更新
    由于这个问题/答案得到了一些合理的关注，我想我会分享去年的一些密切相关的啊哈时刻:
  • 吐出 JSON 并使用您选择的客户端 mvc(上面的第 6 步和第 7 步)在客户端渲染它在 CPU 方面的开销可能非常大。当然，这在移动设备上尤为明显。
  • 我已经做了一些测试来在 ajax 上返回 html 片段(使用服务器端 mustache-template 渲染)，而不是像上面的回答中所建议的那样在客户端做同样的事情。根据您的客户端设备，它可以快 10 倍(1000 毫秒 -> 100 毫秒)，当然您的里程可能会有所不同。 (实际上不需要更改代码，因为第 7 步已经可以做到)
  • 当然，当没有返回 JSON 时，客户端 MVC 就无法构建模型、管理事件等。那么为什么要保留客户端 MVC 呢？老实说，事后看来，即使是非常复杂的搜索页面，我对客户端 mvc 也没有多大用处。对我来说唯一真正的好处是它们有助于在客户端上清楚地分离逻辑，但是您应该已经在自己的 imho 上这样做了。因此，剥离客户端 MVC 是待办事项。
  • 哦，是的，我与 Hogan 交易了 Mustache (相同的语法，更多的功能，但最重要的是性能非常好!)之所以能够这样做，是因为我将后端从 java 切换到 Node.js(恕我直言)

    • 关于javascript - 可访问性和所有这些 JavaScript 框架，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/7370056/

    javascriptlisection的accessibilitybackbone.jsjavascript-frameworksproutcore

    有关javascript - 可访问性和所有这些 JavaScript 框架的更多相关文章

    1. ruby - 为什么我可以在 Ruby 中使用 Object#send 访问私有(private)/ protected 方法？ - 2

      类classAprivatedeffooputs:fooendpublicdefbarputs:barendprivatedefzimputs:zimendprotecteddefdibputs:dibendendA的实例a=A.new测试a.foorescueputs:faila.barrescueputs:faila.zimrescueputs:faila.dibrescueputs:faila.gazrescueputs:fail测试输出failbarfailfailfail.发送测试[:foo,:bar,:zim,:dib,:gaz].each{|m|a.send(m)resc

    2. ruby - 如何以所有可能的方式将字符串拆分为长度最多为 3 的连续子字符串？ - 2

      我试图获取一个长度在1到10之间的字符串，并输出将字符串分解为大小为1、2或3的连续子字符串的所有可能方式。例如:输入:123456将整数分割成单个字符，然后继续查找组合。该代码将返回以下所有数组。[1,2,3,4,5,6][12,3,4,5,6][1,23,4,5,6][1,2,34,5,6][1,2,3,45,6][1,2,3,4,56][12,34,5,6][12,3,45,6][12,3,4,56][1,23,45,6][1,2,34,56][1,23,4,56][12,34,56][123,4,5,6][1,234,5,6][1,2,345,6][1,2,3,456][123

    3. ruby-on-rails - 在混合/模块中覆盖模型的属性访问器 - 2

      我有一个包含模块的模型。我想在模块中覆盖模型的访问器方法。例如:classBlah这显然行不通。有什么想法可以实现吗？ 最佳答案 您的代码看起来是正确的。我们正在毫无困难地使用这个确切的模式。如果我没记错的话，Rails使用#method_missing作为属性setter，因此您的模块将优先，阻止ActiveRecord的setter。如果您正在使用ActiveSupport::Concern(参见thisblogpost)，那么您的实例方法需要进入一个特殊的模块:classBlah

    4. ruby - 续集在添加关联时访问many_to_many连接表 - 2

      我正在使用Sequel构建一个愿望list系统。我有一个wishlists和itemstable和一个items_wishlists连接表(该名称是续集选择的名称)。items_wishlists表还有一个用于facebookid的额外列(因此我可以存储opengraph操作)，这是一个NOTNULL列。我还有Wishlist和Item具有续集many_to_many关联的模型已建立。Wishlist类也有:selectmany_to_many关联的选项设置为select:[:items.*,:items_wishlists__facebook_action_id].有没有一种方法可以

    5. ruby-on-rails - 跳过状态机方法的所有验证 - 2

      当我的预订模型通过rake任务在状态机上转换时，我试图找出如何跳过对ActiveRecord对象的特定实例的验证。我想在reservation.close时跳过所有验证!叫做。希望调用reservation.close!(:validate=>false)之类的东西。仅供引用，我们正在使用https://github.com/pluginaweek/state_machine用于状态机。这是我的预订模型的示例。classReservation["requested","negotiating","approved"])}state_machine:initial=>'requested

    6. ruby - Nokogiri 剥离所有属性 - 2

      我有这个html标记:我想得到这个:我如何使用Nokogiri做到这一点？ 最佳答案 require'nokogiri'doc=Nokogiri::HTML('')您可以通过xpath删除所有属性:doc.xpath('//@*').remove或者，如果您需要做一些更复杂的事情，有时使用以下方法遍历所有元素会更容易:doc.traversedo|node|node.keys.eachdo|attribute|node.deleteattributeendend 关于ruby-Nokog

    7. ruby - 获取模块中定义的所有常量的值 - 2

      我想获取模块中定义的所有常量的值:moduleLettersA='apple'.freezeB='boy'.freezeendconstants给了我常量的名字:Letters.constants(false)#=>[:A,:B]如何获取它们的值的数组，即["apple","boy"]？ 最佳答案 为了做到这一点，请使用mapLetters.constants(false).map&Letters.method(:const_get)这将返回["a","b"]第二种方式:Letters.constants(false).map{|c

    8. TimeSformer：抛弃CNN的Transformer视频理解框架 - 2

      Transformers开始在视频识别领域的“猪突猛进”，各种改进和魔改层出不穷。由此作者将开启VideoTransformer系列的讲解，本篇主要介绍了FBAI团队的TimeSformer，这也是第一篇使用纯Transformer结构在视频识别上的文章。如果觉得有用，就请点赞、收藏、关注！paper:https://arxiv.org/abs/2102.05095code(offical):https://github.com/facebookresearch/TimeSformeraccept:ICML2021author:FacebookAI一、前言Transformers(VIT)在图

    9. ruby - 有没有办法从 ruby​​ case 语句中访问表达式？ - 2

      我想从then子句中访问c​​ase语句表达式，即food="cheese"casefoodwhen"dip"then"carrotsticks"when"cheese"then"#{expr}crackers"else"mayo"end在这种情况下，expr是食物的当前值(value)。在这种情况下，我知道，我可以简单地访问变量food，但是在某些情况下，该值可能无法再访问(array.shift等)。除了将expr移出到局部变量然后访问它之外，是否有直接访问caseexpr值的方法？罗亚附注我知道这个具体示例很简单，只是一个示例场景。 最佳答案

    10. ruby - 从外部访问类的实例变量 - 2

      我理解(我认为)Ruby中类变量和类的实例变量之间的区别。我想知道如何从该类外部访问该类的实例变量。从内部(即在类方法中而不是实例方法中)，它可以直接访问，但是从外部，有没有办法做MyClass.class.[@$#]variablename?我没有任何具体原因要这样做，只是学习Ruby并想知道是否可行。 最佳答案 classMyClass@my_class_instance_var="foo"class上述yield:>>foo我相信Arkku演示了如何从类外部访问类变量(@@)，而不是类实例变量(@)。我从这篇文章中提取了上述内

    随机推荐