关于SonarLanguage是什么东东,这里就不在描述了,如果你对它感兴趣的话,请移步到上篇随笔开源:Angularjs示例--Sonar中项目使用语言分布图。这里是最近学习CoffeeScript的练习版。
CoffeeScript是一门简洁的,构架于JavaScript之上的预处理器语言,可以静态编译成JavaScript,语法主要受ruby和python影响,目前已经为众多rails和node项目采用。CoffeeScript不是JavaScript的超集,也不是完全替代品。CoffeeScript有点在于:
多的也不想说那么多了,这里主要是个简介,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请参考
- CoffeeScript
- CoffeeScript详解
- CoffeeScript: The beautiful way to write JavaScript
- 当jQuery遭遇CoffeeScript——妙不可言
本人也会在随后的随笔中继续更新CoffeeScript,请持续关注。
亿速云「云服务器」,即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘,价格低至29元/月。点击查看>>
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。