jquery插件 - 工作，但在调试时，结果甚至在到达该行之前就显示出来了

jquery plugin -working but while debugging,result is being shown even before reaching that line

本文关键字：出来了 显示 工作 插件 调试 jquery 结果      更新时间：2023-09-26

my jquery plugin coffee script ：

(($) ->
  $.fn.externalify = (options) ->
    console.log "start"
    console.log @    
    settings = $.extend {
      'rel' : 'external' 
    } , options 
    links = $ @selector+" a"
    console.log "---first links--"
    console.log links
    console.log '---first links--'
    if links.length is 0
      if ((@[0].toString().indexOf("http://") is 0) or (@[0].toString().indexOf("https://") is 0))
        unless @[0].host is  window.location.host
        $(@).attr settings
    console.log "---links---"
    console.log links
    console.log '----links---'      
    for i in links
      if (i.toString().indexOf("http://") is 0)or(i.toString().indexOf("https://") is 0)
        console.log "--"
        console.log i
        console.log "--"
        unless i is window.location.host
           console.log "Before : "
           console.log $(i)
           $(i).attr settings
           console.log "After : "
           console.log $(i)
) jQuery

JavaScript中的代码： 

 (function() {
(function($) {
  return $.fn.externalify = function(options) {
  var i, links, settings, _i, _len, _results;
  console.log("start");
  console.log(this);
  settings = $.extend({
    'rel': 'external'
  }, options);
  links = $(this.selector + " a");
  console.log("---first links--");
  console.log(links);
  console.log('---first links--');
  if (links.length === 0) {
    if ((this[0].toString().indexOf("http://") === 0) || (this[0].toString().indexOf("https://") === 0)) {
      if (this[0].host !== window.location.host) $(this).attr(settings);
    }
  }
  console.log("---links---");
  console.log(links);
  console.log('----links---');
  _results = [];
  for (_i = 0, _len = links.length; _i < _len; _i++) {
    i = links[_i];
    if ((i.toString().indexOf("http://") === 0) || (i.toString().indexOf("https://") === 0)) {
      console.log("--");
      console.log(i);
      console.log("--");
      if (i !== window.location.host) {
        console.log("Before : ");
        console.log($(i));
        $(i).attr(settings);
        console.log("After : ");
        _results.push(console.log($(i)));
      } else {
        _results.push(void 0);
      }
    } else {
      _results.push(void 0);
    }
  }
  return _results;
};
})(jQuery);
}).call(this);

如果有类似这样的链接 

<span><a href="http://google.com">google</a></span> in body tag .

如果我运行 $("span"(.externalify(( ，则属性 "rel" ： "external" 将被添加链接，从而使链接成为： 

<span><a rel="external" href = "http://google.com">google</a></span>

它工作正常，但是如果您看到我的代码，我已经放置了很多控制台.log命令。 他们都在打印带有"rel"的新内容："外部"，无论是在操作之前还是之后，它都显示了属性，这怎么可能发生.

这是一大堆代码，本质上是这样的：

$('a').filter(->
    /^http/.test(this.href) and this.href.indexOf(location.host) < 0
).attr(rel: 'external')

您可以考虑为外部链接实现自定义伪选择器，而不是插件：

$.expr[':']['external'] = (elem) ->
    /^('w+:)?'/'//.test(elem.href) and elem.href.indexOf(location.host) < 0
// usage:
$('.container a:external').attr('rel', 'external')

请注意，我用更复杂的正则表达式替换了简单的"http"测试;省略协议的 url(如 //google.com(是允许的，并且越来越普遍。仅仅在开始时存在//就足以检测到绝对 url。这还会捕获除 http 之外的任何其他协议。

当你可以简化时，为什么要混淆？看看我在这里创建的代码：http://jsfiddle.net/aajFj/它工作得很好...希望对您有所帮助。

相关文章：