关于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
最终编译的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.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，请持续关注。