Question

我正在创建一个rails应用程序并正在使用readyselector 插件包含页面特定的JavaScript。

这是readyselector代码。

(function ($) {
  var ready = $.fn.ready;
  $.fn.ready = function (fn) {
    if (this.context === undefined) {
      // The $().ready(fn) case.
      ready(fn);
    } else if (this.selector) {
      ready($.proxy(function(){
        $(this.selector, this.context).each(fn);
      }, this));
    } else {
      ready($.proxy(function(){
        $(this).each(fn);
      }, this));
    }
  }
})(jQuery);

以下是application.js

中包含的顺序

//= require jquery
//= require jquery_ujs
//= require plugins/readyselector
//= require jquery-ui
//= require bootstrap
---------- other files
--------

我的一个javascript文件就是这样开始的

jQuery(document).ready(function($) {

var wrapper = $('<div/>').css({ height: 0, width: 0, 'overflow': 'hidden' });
....
....
});

我收到错误消息称$().css不是函数。但是，如果我使用jQuery代替$，代码将正常运行。

当我删除插件时，也没有错误。

我做错了什么？

Answer 1

删除准备好文档的$参数：

此参数的值为0，不再是函数（jQuery的名称较短）！

您可以自己调试并查看。

 (function ($) {
        var ready = $.fn.ready;
        $.fn.ready = function (fn) {
            if (this.context === undefined) {
                // The $().ready(fn) case.
                ready(fn);
            } else if (this.selector) {
                ready($.proxy(function(){
                    $(this.selector, this.context).each(fn);
                }, this));
            } else {
                ready($.proxy(function(){
                    $(this).each(fn);
                }, this));
            }
        }
    })(jQuery);


    jQuery(document).ready(function() {

        var wrapper = $('<div/>').css({ height: 0, width: 0, 'overflow': 'hidden' });
    });

Answer 2

插件无法将$参数传递给ready，默认允许方式

可以通过将代码包装在IIFE中与插件完成相同来解决这个问题

(function($){
    $(document).ready(function() {
        var wrapper = $('<div/>').css({ height: 0, width: 0, 'overflow': 'hidden' });    
    });
})(jQuery);

或者使用更简单的方法代替插件：

(function ($) {      
  $.fn.exists = function (fn) {
    if(this.length){
        fn();
    }
  }
})(jQuery);

$('.someClass').exists(function(){    
  var wrapper = $('<div/>').css({ height: 0, width: 0, 'overflow': 'hidden' });
});

就我个人而言，我不希望扩展$.fn.ready用于未来的代码库中可能令人困惑的无证用途。大多数jQuery熟悉的开发人员都会看到$('.someClass').ready(func..，并说它什么都不做，可能会倾向于删除它

的 DEMO

在包含readyselector插件

2 个答案: