关于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,请持续关注。
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。