草庐IT

javascript - jQuery，寻找一种更智能的初始化方式

coder 2025-01-18 原文

我正在寻找一种更好的方法来管理大型项目中的全局组件/插件/小部件初始化。它有许多 jQuery 支持的组件，我想快速高效地初始化这些组件，在搜索互联网之后，我只真正找到了一些短视的例子，这些例子只在较小的网站上是现实的/高性能的。

问题

我想找到一种聪明而优雅的方法来摆脱它:

$(function() { $('.widget-one').widgetOne(); });
$(function() { $('.widget-two').widgetTwo(); });
$(function() { $('.widget-three').widgetThree(); });
$(function() { $('.widget-four').widgetFour(); });

现在，在你责备我之前，让我声明，我知道在大多数情况下(但不是全部).widget-one 是一个糟糕的选择器，因为它在旧浏览器上会获取所有元素在 dom 中检查类(class)。

问题是，这些小部件不是一次性的，我可能无法提前知道它们的存在(在 Web 应用程序 View 中生成，基于逻辑或产品循环或其他东西可能有 2-3 次) .

于是就有了下面的解决方案:

$(function() { $('#WidgetOne').widgetOne(); });

和

<span id="WidgetOne_12345">...</span>
<script type="javascript">
   $(function() { $('#WidgetOne_12345').widgetOne(); });
</script>

想法

这不是一个新问题，从第一天开始就存在了。仍然让我感到困惑的是，即使在这种成熟度下，用 jQuery 解决这个问题也是如此困难。要么，要么我遗漏了一些明显的东西。

不幸的是，google-fu 在这个问题上的结果很糟糕，因为每个人都建议以下两种方法之一:

  • jQuery 的 .live() 或 .delegate() 包罗万象的事件处理程序。这在基本层面上是可怕的。 .delegate() 不会那么糟糕，但这需要插件/widget/control/whatever 完全是事件驱动的。这肯定会在很多情况下起作用，但在其他情况下却行不通。它还使跟踪和组织代码变得非常复杂。我什至不会进入 .live()，对于大型复杂站点，事件冒泡很慢，当您将足够多的组件放在一起时，要匹配的查询列表会变大，每次点击/聚焦/whatever 事件在整个页面上逐渐变慢。
  • 涉及 liveQuery 等插件的解决方法，这肯定是一个非常酷的插件，但它似乎主要是为了解决一个不同的问题(ajax/dom 创建带来的新项目的问题)，并且仍然会随着查询的增加而逐渐变慢需要进行检查。

结论

必须有更好的方法，我知道必须有一个。我已经用尽了关于这个主题的 google fu，但仍然找不到比 jQuery 1.3.2 更新的想法/概念/示例/讨论，也找不到宏伟的蓝图。在一个完美的世界中，这不会是一个问题，因为每个人都会使用具有现代标准的智能浏览器和一个像样的 javascript 引擎，并且 .class 查询不会花费亿万年，但不幸的是，这不是情况。

我正在寻找关于如何解决这个问题的想法，在经历了许多与此类似的 SO 问题以及许多关于各种 jquery 技术的文章之后，我觉得如果信息在那里，它就会被许多误报和“101 个最佳 jQuery 插件”结果出现在任何使用 jQuery 的搜索中。我知道有人遇到过这种困境。

想法、链接、示例，任何东西都是受欢迎的，只是必须有更好的方法。

最佳答案

只是头脑 Storm ，我可以想到一件事可以减少您的“选择和初始化”时间，但可能是开发过程中痛苦的权衡。此外，您不能真正将 params 与此方法一起使用，但如果您遇到的情况与您上面描述的情况完全相同，那么这可能是值得的。

如果您坚持每个初始化元素都具有相同的类(例如小部件)，则可以创建一个初始化小部件的选择器系统。

在您的 HTML 中构造类而不是像这样:

<div class="widget" widgetFunc="widgetOne"></div>
<div class="widget" widgetFunc="widgetTwo"></div>

等等

您的 jquery init 函数将如下所示:

var $widgetInitializerElements = $('.widget');

$.each($widgetInitializerElements,function(){ 
    var initialize = window[$(this).attr('widgetFunc')];

    if(typeof initialize === 'function'){
        $(this).initialize(); 
    }
});

因此这会将您的选择减少到一次，并使您的 jquery 非常干净。你只需要担心所有那些可能不可行的 HTML 元素，如果你需要添加参数来初始化调用，你会遇到麻烦:/

关于javascript - jQuery，寻找一种更智能的初始化方式，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/8347219/

javascriptjQuerycode的functionperformanceinitialization

有关javascript - jQuery，寻找一种更智能的初始化方式的更多相关文章

  1. 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

  2. ruby-on-rails - 未初始化的常量 Psych::Syck (NameError) - 2

    在我的gem中，我需要yaml并且在我的本地计算机上运行良好。但是在将我的gem推送到ruby​​gems.org之后，当我尝试使用我的gem时，我收到一条错误消息=>"uninitializedconstantPsych::Syck(NameError)"谁能帮我解决这个问题？附言RubyVersion=>ruby1.9.2,GemVersion=>1.6.2,Bundlerversion=>1.0.15 最佳答案 经过几个小时的研究，我发现=>“YAML使用未维护的Syck库，而Psych使用现代的LibYAML”因此，为了解决

  3. ruby - 解析 RDFa、微数据等的最佳方式是什么，使用统一的模式/词汇(例如 schema.org)存储和显示信息 - 2

    我主要使用Ruby来执行此操作，但到目前为止我的攻击计划如下:使用gemsrdf、rdf-rdfa和rdf-microdata或mida来解析给定任何URI的数据。我认为最好映射到像schema.org这样的统一模式，例如使用这个yaml文件，它试图描述数据词汇表和opengraph到schema.org之间的转换:#SchemaXtoschema.orgconversion#data-vocabularyDV:name:namestreet-address:streetAddressregion:addressRegionlocality:addressLocalityphoto:i

  4. ruby-on-rails - 未在 Ruby 中初始化的对象 - 2

    我在Rails工作并有以下类(class):classPlayer当我运行时bundleexecrailsconsole然后尝试:a=Player.new("me",5.0,"UCLA")我回来了:=>#我不知道为什么Player对象不会在这里初始化。关于可能导致此问题的操作/解释的任何建议？谢谢，马里奥格 最佳答案 havenoideawhythePlayerobjectwouldn'tbeinitializedhere它没有初始化很简单，因为你还没有初始化它!您已经覆盖了ActiveRecord::Base初始化方法，但您没有调

  5. ruby-on-rails - ActionController::RoutingError: 未初始化常量 Api::V1::ApiController - 2

    我有用于控制用户任务的Rails5API项目，我有以下错误，但并非总是针对相同的Controller和路由。ActionController::RoutingError:uninitializedconstantApi::V1::ApiController我向您描述了一些我的项目，以更详细地解释错误。应用结构路线scopemodule:'api'donamespace:v1do#=>Loginroutesscopemodule:'login'domatch'login',to:'sessions#login',as:'login',via::postend#=>Teamroutessc

  6. ruby-on-rails - 正确的 Rails 2.1 做事方式 - 2

    question的一些答案关于redirect_to让我想到了其他一些问题。基本上，我正在使用Rails2.1编写博客应用程序。我一直在尝试自己完成大部分工作(因为我对Rails有所了解)，但在需要时会引用Internet上的教程和引用资料。我设法让一个简单的博客正常运行，然后我尝试添加评论。靠我自己，我设法让它进入了可以从script/console添加评论的阶段，但我无法让表单正常工作。我遵循的其中一个教程建议在帖子Controller中创建一个“评论”操作，以添加评论。我的问题是:这是“标准”方式吗？我的另一个问题的答案之一似乎暗示应该有一个CommentsController参

  7. ruby - 寻找通过阅读代码确定编程语言的ruby gem？ - 2

    几个月前，我读了一篇关于ruby​​gem的博客文章，它可以通过阅读代码本身来确定编程语言。对于我的生活，我不记得博客或gem的名称。谷歌搜索“ruby编程语言猜测”及其变体也无济于事。有人碰巧知道相关gem的名称吗？ 最佳答案 是这个吗:http://github.com/chrislo/sourceclassifier/tree/master 关于ruby-寻找通过阅读代码确定编程语言的rubygem？，我们在StackOverflow上找到一个类似的问题：

  8. ruby - 这两个 Ruby 类初始化定义有什么区别？ - 2

    我正在阅读一本关于Ruby的书，作者在编写类初始化定义时使用的形式与他在本书前几节中使用的形式略有不同。它看起来像这样:classTicketattr_accessor:venue,:datedefinitialize(venue,date)self.venue=venueself.date=dateendend在本书的前几节中，它的定义如下:classTicketattr_accessor:venue,:datedefinitialize(venue,date)@venue=venue@date=dateendend在第一个示例中使用setter方法与在第二个示例中使用实例变量之间是

  9. jquery - 我的 jquery AJAX POST 请求无需发送 Authenticity Token (Rails) - 2

    rails中是否有任何规定允许站点的所有AJAXPOST请求在没有authenticity_token的情况下通过？我有一个调用Controller方法的JqueryPOSTajax调用，但我没有在其中放置任何真实性代码，但调用成功。我的ApplicationController确实有'request_forgery_protection'并且我已经改变了config.action_controller.consider_all_requests_local在我的environments/development.rb中为false我还搜索了我的代码以确保我没有重载ajaxSend来发送

  10. 【鸿蒙应用开发系列】- 获取系统设备信息以及版本API兼容调用方式 - 2

    在应用开发中，有时候我们需要获取系统的设备信息，用于数据上报和行为分析。那在鸿蒙系统中，我们应该怎么去获取设备的系统信息呢，比如说获取手机的系统版本号、手机的制造商、手机型号等数据。1、获取方式这里分为两种情况，一种是设备信息的获取，一种是系统信息的获取。1.1、获取设备信息获取设备信息，鸿蒙的SDK包为我们提供了DeviceInfo类，通过该类的一些静态方法，可以获取设备信息，DeviceInfo类的包路径为：ohos.system.DeviceInfo.具体的方法如下：ModifierandTypeMethodDescriptionstatic StringgetAbiList​()Obt

随机推荐