0

我的 jquery 插件咖啡脚本：

(($) ->

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

它工作正常，但如果你看到我的代码，我已经放了很多 console.log 命令。他们都在打印带有“rel”：“external”的新的，在操作之前和之后，它都在显示属性，怎么会发生这种情况。

4

2 回答 2

3

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

$('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 之外的任何其他协议。

于 2012-05-20T10:30:39.427 回答
0

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

于 2012-05-20T07:10:05.427 回答