CSS 命名空间和覆盖 jquery 选择器答案

【问题标题】：CSS namespacing and overriding jquery selectorCSS 命名空间和覆盖 jquery 选择器
【发布时间】：2012-09-21 13:30:10
【问题描述】：

我希望覆盖基本的 jQuery 选择器，以便任何 jQuery 选择器中的所有 CSS 类 ($('.classname'))，包括 .find(.classname)、.parents(.classname) 等，都以“命名空间”为前缀。在上面的示例中，我的 jQuery 代码看起来像 $('.classname')，但它会被转换为 $('.SomeCssNamespace_classname')。

$('.classname') 选择器将匹配的 HTML 如下所示：
<div class="SomeCssNamespace_classname" />

最重要的是我必须添加智能，可能是以regex 的形式，这只会对类名执行此操作，而不是对 id 或标签选择器。例如$('#someId') 不会被翻译成 $('#SomeCssNamespace_someId')。

此外，jQuery.addClass() 和 jQuery.removeClass() 方法必须被覆盖以添加相同的命名空间。

【问题讨论】：

你的问题到底是什么？
@Lian：我认为 OP 想知道在指定类选择器时如何扩展 jQuery 默认选择器行为，以便 jQuery 接受 $('.className') 但能够将该选择器与带有 @ 的元素匹配987654335@ 代替/或以及（不确定）class="className"。基本上让 jQuery 自动预先添加 namespace_ 以匹配选择器。此外，OP 希望在使用类名作为输入的任何方法中复制该行为，例如 addClass 或 removeClass。我假设这就是 OP 正在寻找的。span>
除非我没有看到任何东西，否则我认为您最好的选择是下载您想要使用的 jQuery 文件的版本并直接在源中更新它并使用您自己的自定义副本。
CSS namespaces 和你这里的完全不同。
@FrançoisWahl 是的，您对这个问题有很好的把握。澄清
不需要支持。如果可能的话，我想远离编辑 jQ 源代码，但意识到这可能是必要的。感谢您的回复！

标签： jquery css jquery-selectors

【解决方案1】：

我的解决方案是编写自己的函数来执行此操作...例如：

prefixClassSelector = function(prefix,class_name) {
    return $('.' + prefix + '_' + class_name);
}

那么你可以这样称呼它，它仍然是可链接的

prefixClassSelector('someNamespace','myclass').hide();

【讨论】：

感谢我们的建议，但是我有很多代码试图通过覆盖或扩展 jQ 选择器函数来避免重写。

【解决方案2】：

试试这样的：

// define the namespace
jQuery.myjQueryNamespace = {

  name: 'custom_', // the prefix

  // returns the prefixed selector, classname needs to be prefixed with "."
  addNamespace: function(selector) {

    if (typeof String.prototype.indexOf == "function") {
      return selector.replace(/\./g, '.' + jQuery.myjQueryNamespace.name);
    } else {
      // TODO: write my own indexOf function
      return selector;
    }
  },

  // returns the prefixed selector, classname should *not* to be prefixed with "."
  prefixNamespace: function(selector) {
    return jQuery.myjQueryNamespace.name + 'selector';
  }
}

// keep the original init function
jQuery.fn._init = jQuery.fn.init;

jQuery.fn.init = function(selector, context, rootjQuery) {

  if (typeof selector == 'string'
  && typeof String.prototype.indexOf == "function" // assumes String.prototype.indexOf is defined
  && selector.indexOf('.') != -1) {

    var myNewSelector = jQuery.myjQueryNamespace.addNamespace(selector);
    return jQuery.fn._init.call(this, myNewSelector, context, rootjQuery);
  } else {

    return jQuery.fn._init.call(this, selector, context, rootjQuery)
  }
}

// *got this from the jQuery source code
jQuery.fn.init.prototype = jQuery.fn;

// modify addClass and removeClass
for (var fn_key in jQuery.fn) {

  // if the function has "Class" in it, replace the function
  if (fn_key == 'addClass' || fn_key == 'removeClass') {

    // we'll keep the original function prefixed with underscore
    jQuery.fn['_' + fn_key] = jQuery.fn[fn_key];

    // build the new function which calls the original function passing in the namespaced selector
    var new_function = new Function("selector", "return jQuery.fn['" + '_' + fn_key + "'].call(this, jQuery.myjQueryNamespace.prefixNamespace(selector));");

    // assign it to the original name
    jQuery.fn[fn_key] = new_function;
  }
}

警告：我只通过粘贴到控制台中进行了测试，并且仅在 chrome 中。它可能有意想不到的行为。

最好在加载 jquery 后立即运行它，允许其他插件被命名空间。

代码所做的是将jQuery.fn.init 函数替换为以类名为前缀的修改版本。 jQuery.fn.init 函数在您调用 $(selector) 时运行。我们以类似的方式修改addClass和removeClass。

【讨论】：