开源：Angularjs示例--Sonar中项目使用语言分布图(CoffeeScript版)

2012-12-20 21:50 破狼阅读(3544) 评论(1) 编辑收藏举报

关于SonarLanguage是什么东东，这里就不在描述了，如果你对它感兴趣的话，请移步到上篇随笔开源：Angularjs示例--Sonar中项目使用语言分布图。这里是最近学习CoffeeScript的练习版。

CoffeeScript是一门简洁的，构架于JavaScript之上的预处理器语言，可以静态编译成JavaScript，语法主要受ruby和python影响，目前已经为众多rails和node项目采用。CoffeeScript不是JavaScript的超集，也不是完全替代品。CoffeeScript有点在于：

更少，更紧凑，和更清晰的代码
通过规避和改变对JavaScript中不良部分的使用，只留下精华，让代码减少出错率，更容易维护
在很多常用模式的实现上采用了JavaScript中的最佳实践
CoffeeScript生成的JavaScript代码都可以完全通过JSLint的检测

多的也不想说那么多了，这里主要是个简介，CoffeeScript的练笔示例。

代码如下：

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

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

最终编译的JavaScript为：

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

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.depth3D = 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请参考

CoffeeScript

CoffeeScript详解

CoffeeScript: The beautiful way to write JavaScript

当jQuery遭遇CoffeeScript——妙不可言

本人也会在随后的随笔中继续更新CoffeeScript，请持续关注。