利用 Grunt （几乎）无痛地做前端开发 (一)

      
...
      
<div id="qunit-fixture">
      
    <a href="#functional-link">#nogo</a>
      
    <a href="http://alibaba.com">grunt</a>
      
    <a href="http://china.alibaba.com">grunt</a>
      
    <a href="http://style.china.alibaba.com">grunt</a>
      
    <a href="http://q.pnq.cc">qhwa</a>
      
</div>
      
....

      
// file: test/grunt-demo_test.js
      
module('jQuery#ali-link', {
      
  setup: function() {
      
    this.elems = $('#qunit-fixture').children();
      
  }
      
});
      
test('is chainable', 1, function() {
      
  strictEqual(this.elems.alilink(), this.elems, 'should be chaninable');
      
});
      
test('can select', function() {
      
  equal( $('a:alilink', $('#qunit-fixture')).length, 3, 
      
    'should select links with alibaba domain' 
      
  );
      
});
      
test('add icon to alibaba links', function() {
      
  this.elems.alilink();
      
  this.elems.each(function(){
      
    var self = $(this);
      
    if( /^http:\/\/((.+)\.)?alibaba\.com/.test(this.href) ) {
      
      ok(self.hasClass('ali-link'));
      
    } else {
      
      ok(!self.hasClass('ali-link'));
      
    }
      
  });
      
});
      
...

      
// file: src/grunt-demo-1.js
      
(function($) {
      
  var ALI_LINK_REG = /^http:\/\/(.+\.)?alibaba\.com/;
      
  // Collection method.
      
  $.fn.alilink = function() {
      
    return this.each(function() {
      
      var self = $(this);
      
      if( isAliLink(this) ){
      
        self.addClass('ali-link');
      
      } else {
      
        self.removeClass('ali-link');
      
      }
      
    });
      
  };
      
  // Custom selector.
      
  $.expr[':'].alilink = function(elem) {
      
    return isAliLink(elem);
      
  };
      
  function isAliLink(el) {
      
    return /A/i.test(el.tagName) && ALI_LINK_REG.test(el.href);
      
  }
      
}(jQuery));