開源：Angularjs示例--Sonar中項目使用語言分布圖(CoffeeScript版)

       關于SonarLanguage是什么東東，這里就不在描述了，如果你對它感興趣的話，請移步到上篇隨筆開源：Angularjs示例--Sonar中項目使用語言分布圖。這里是最近學習CoffeeScript的練習版。

     CoffeeScript是一門簡潔的，構架于JavaScript之上的預處理器語言，可以靜態編譯成JavaScript，語法主要受ruby和python影響，目前已經為眾多rails和node項目采用。CoffeeScript不是JavaScript的超集，也不是完全替代品。CoffeeScript有點在于：

1. 更少，更緊湊，和更清晰的代碼
2. 通過規避和改變對JavaScript中不良部分的使用，只留下精華，讓代碼減少出錯率，更容易維護
3. 在很多常用模式的實現上采用了JavaScript中的最佳實踐
4. CoffeeScript生成的JavaScript代碼都可以完全通過JSLint的檢測

   多的也不想說那么多了，這里主要是個簡介，CoffeeScript的練筆示例。

代碼如下：

app = angular.module('app', [])
    .value("$host", "http://nemo.sonarsource.org")
    .factory("$requestUrl", ($host) ->   "#{$host}/api/resources")
    .factory("$dynamicColor", ($host) ->
        [r,g,b] = [10,10,0]
        {
          getColor: ->
               [r,g,b] = [(r+100), (g+400), (b + 200)]
               "##{(r + 256 * g + 65536 * b).toString 16 }"
          ,
          reset:  ->
               [r,g,b] = [10,10,0]
        };
    ).directive('chartData', ->
            drawChart = (elementId, data) ->
               chart = new AmCharts.AmPieChart()
               chart.dataProvider = data
               chart.titleField = "name"
               chart.valueField = "percentage"
               chart.colorField = "color"
               chart.labelsEnabled = false
               chart.pullOutRadius = 0
               chart.depth4D = 20
               chart.angle = 45
               legend = new AmCharts.AmLegend()
               legend.makerType = "square"
               legend.align = "center"
               chart.addLegend legend

 
               chart.write elementId
               chart;

 
            (scope, element, attr) ->
              
                  scope.already.push( ->
                     data = scope.$eval(attr.chartData);
                     drawChart(element[0].id, data);
                  ) if element[0].id
    )

 
report = ($scope, $window, $http, $requestUrl, $dynamicColor) ->
    $scope.already = []
    $window.angularJsonpCallBack = (data) ->
         @data = data
         getObjectByKey = (msr , key) ->
            m for m in msr when m.key == key
        
         $scope.gridSource = $scope.projects = data

 
         ready = (queues) -> angular.forEach(queues, (q) -> q() )
         ready $scope.already

 
    $scope.getLanguageChartData = ->
         data = _.groupBy $scope.projects , (project) -> project.lang
         $dynamicColor.reset()
         chartData = _.map(data, (array, key) ->
                      "name":key
                      "percentage":array.length,
                      "color":$dynamicColor.getColor())

 
         _.sortBy(chartData, (num) -> num.percentage )
 
    $scope.search = ->
        source = []
        if not this.searchName
            source = @projects
        else
            source = _.filter @projects, (p) ->
                       p.name.toLowerCase().indexOf $scope.searchName.toLowerCase() != -1
      
        source = _.sortBy(source, (p) -> p[$scope.sortCondition.key].toLowerCase()) if @sortCondition and @sortCondition.key
         
        source.reverse() if  @sortCondition.sort and not @sortCondition.sort[$scope.sortCondition.key]
       
        @gridSource = source

 
    $scope.sort = (name) ->
        @sortCondition ?= {}
        @sortCondition.sort ?= {}
        @sortCondition.key = name
        @sortCondition.sort[name] = not @sortCondition.sort[name]
        @search();

 
    $scope.init = ->
        $http.jsonp  "#{$requestUrl}?callback=angularJsonpCallBack"
 
app.controller "report", report

最終編譯的JavaScript為：

var app, report;

app = angular.module('app', []).value("$host", "http://nemo.sonarsource.org").factory("$requestUrl", function($host) {
  return "" + $host + "/api/resources";
}).factory("$dynamicColor", function($host) {
  var b, g, r, _ref;
  _ref = [10, 10, 0], r = _ref[0], g = _ref[1], b = _ref[2];
  return {
    getColor: function() {
      var _ref1;
      _ref1 = [r + 100, g + 400, b + 200], r = _ref1[0], g = _ref1[1], b = _ref1[2];
      return "#" + ((r + 256 * g + 65536 * b).toString(16));
    },
    reset: function() {
      var _ref1;
      return _ref1 = [10, 10, 0], r = _ref1[0], g = _ref1[1], b = _ref1[2], _ref1;
    }
  };
}).directive('chartData', function() {
  var drawChart;
  drawChart = function(elementId, data) {
    var chart, legend;
    chart = new AmCharts.AmPieChart();
    chart.dataProvider = data;
    chart.titleField = "name";
    chart.valueField = "percentage";
    chart.colorField = "color";
    chart.labelsEnabled = false;
    chart.pullOutRadius = 0;
    chart.depth4D = 20;
    chart.angle = 45;
    legend = new AmCharts.AmLegend();
    legend.makerType = "square";
    legend.align = "center";
    chart.addLegend(legend);
    chart.write(elementId);
    return chart;
  };
  return function(scope, element, attr) {
    if (element[0].id) {
      return scope.already.push(function() {
        var data;
        data = scope.$eval(attr.chartData);
        return drawChart(element[0].id, data);
      });
    }
  };
});

report = function($scope, $window, $http, $requestUrl, $dynamicColor) {
  $scope.already = [];
  $window.angularJsonpCallBack = function(data) {
    var getObjectByKey, ready;
    this.data = data;
    getObjectByKey = function(msr, key) {
      var m, _i, _len, _results;
      _results = [];
      for (_i = 0, _len = msr.length; _i < _len; _i++) {
        m = msr[_i];
        if (m.key === key) {
          _results.push(m);
        }
      }
      return _results;
    };
    $scope.gridSource = $scope.projects = data;
    ready = function(queues) {
      return angular.forEach(queues, function(q) {
        return q();
      });
    };
    return ready($scope.already);
  };
  $scope.getLanguageChartData = function() {
    var chartData, data;
    data = _.groupBy($scope.projects, function(project) {
      return project.lang;
    });
    $dynamicColor.reset();
    chartData = _.map(data, function(array, key) {
      return {
        "name": key,
        "percentage": array.length,
        "color": $dynamicColor.getColor()
      };
    });
    return _.sortBy(chartData, function(num) {
      return num.percentage;
    });
  };
  $scope.search = function() {
    var source;
    source = [];
    if (!this.searchName) {
      source = this.projects;
    } else {
      source = _.filter(this.projects, function(p) {
        return p.name.toLowerCase().indexOf($scope.searchName.toLowerCase() !== -1);
      });
    }
    if (this.sortCondition && this.sortCondition.key) {
      source = _.sortBy(source, function(p) {
        return p[$scope.sortCondition.key].toLowerCase();
      });
    }
    if (this.sortCondition.sort && !this.sortCondition.sort[$scope.sortCondition.key]) {
      source.reverse();
    }
    return this.gridSource = source;
  };
  $scope.sort = function(name) {
    var _base, _ref, _ref1;
    if ((_ref = this.sortCondition) == null) {
      this.sortCondition = {};
    }
    if ((_ref1 = (_base = this.sortCondition).sort) == null) {
      _base.sort = {};
    }
    this.sortCondition.key = name;
    this.sortCondition.sort[name] = !this.sortCondition.sort[name];
    return this.search();
  };
  return $scope.init = function() {
    return $http.jsonp("" + $requestUrl + "?callback=angularJsonpCallBack");
  };
};

app.controller("report", report);

就這么多了，關于CoffeeScript請參考

1. CoffeeScript
2. CoffeeScript詳解
3. CoffeeScript: The beautiful way to write JavaScript
4. 當jQuery遭遇CoffeeScript——妙不可言

本人也會在隨后的隨筆中繼續更新CoffeeScript，請持續關注。