Angularjs樣本：Sonar中項目使用語言分布圖(CoffeeScript版)

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

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

更少，更緊湊，和更清晰的代碼

通過規避和改變對JavaScript中不良部分的使用，只留下精華，讓代碼減少出錯率，更容易維護

在很多常用模式的實現上採用了JavaScript中的最佳實務

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.depth3D = 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