关于SonarLanguage是什么东东，这里就不在描述了，如果你对它感兴趣的话，请移步到上篇随笔开源：Angularjs示例--Sonar中项目使用语言分布图。这里是最近学习CoffeeScript的练习版。
CoffeeScript是一门简洁的，构架于JavaScript之上的预处理器语言，可以静态编译成JavaScript，语法主要受ruby和python影响，目前已经为众多rails和node项目采用。CoffeeScript不是JavaScript的超集，也不是完全替代品。CoffeeScript有点在于：
- 更少，更紧凑，和更清晰的代码
- 通过规避和改变对JavaScript中不良部分的使用，只留下精华，让代码减少出错率，更容易维护
- 在很多常用模式的实现上采用了JavaScript中的最佳实践
- CoffeeScript生成的JavaScript代码都可以完全通过JSLint的检测
多的也不想说那么多了，这里主要是个简介，CoffeeScript的练笔示例。
代码如下：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
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'
, [])
.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为：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
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，请持续关注。
作者：破 狼
出处：http://www.cnblogs.com/whitewolf/
本文版权归作者，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。该文章也同时发布在我的独立博客中-个人独立博客、博客园--破狼和51CTO--破狼。http://www.cnblogs.com/whitewolf/archive/2012/12/20/2827141.html
