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 に答える