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

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

  1. 更少，更紧凑，和更清晰的代码
  2. 通过规避和改变对JavaScript中不良部分的使用，只留下精华，让代码减少出错率，更容易维护
  3. 在很多常用模式的实现上采用了JavaScript中的最佳实践
  4. 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', [])
    .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为：

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请参考

  1. CoffeeScript
  2. CoffeeScript详解
  3. CoffeeScript: The beautiful way to write JavaScript
  4. 当jQuery遭遇CoffeeScript——妙不可言

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

作者：破  狼 
出处：http://www.cnblogs.com/whitewolf/ 
本文版权归作者，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。该文章也同时发布在我的独立博客中-个人独立博客、博客园--破狼和51CTO--破狼。http://www.cnblogs.com/whitewolf/archive/2012/12/20/2827141.html

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

  1. 开源：Angularjs示例--Sonar中项目使用语言分布图

    在博客中介绍google的Angularjs 客户端PM模式框架很久了,今天发布一个关于AngularJs使用是简单示例SonarLanguage(示例位于Github:https://github. ...

  2. Go语言实践[回顾]教程10--学习成绩统计的示例【中】

    Go语言实践[回顾]教程10--学习成绩统计的示例[中] 基于整体需求优化上节代码 需求增加按等级分类统计 本节小结 基于整体需求优化上节代码   在上一节中,是基于三个基本需求各自独立实现的逻辑,创 ...

  3. c# winform项目多语言实现(支持简/繁/英三种语言),Winform中多国语言窗体设计.doc...

    Winform中多国语言窗体设计.doc Winform中多国语言窗体的设计以及.NET中资源文件的使用 最近在做一些多国语言的软件,就学习了一下.NET中的多国语言相应知识,受益不少,下面我就简单介 ...

  4. CMU创建一个开源的AI代码生成模型，C语言表现优于Codex

    来源:机器之心 本文约2400字,建议阅读5分钟 CMU 对现有开源和未开源的 AI 代码生成模型进行了全面深入的系统性评估,并分析了它们在 C.C++.Python 等 12 中不同编程语言中的代码 ...

  5. Facebook开源工具包LASER，支持93种语言

    为了加速自然语言处理(NLP)在更多语言上进行零样本迁移,Facebook 扩展并增强了LASER(Language-Agnostic SEntence Representations)工具包,并将其 ...

  6. 开发流媒体服务器_Github选出10大开源免费的RTSP流媒体项目

    Github选出 TOP 10开源免费的RTSP流媒体项目,以下是具体排名及星星数. 1.Easydarwin 星星数:4,307 Easydarwin是国内团队开发的开源流媒体框架.它是基于Go语言 ...

  7. sonar java_修复Sonar中常见的Java安全代码冲突

    sonar java 本文旨在向您展示如何快速修复最常见的Java安全代码冲突. 它假定您熟悉代码规则和违规的概念以及Sonar如何对其进行报告. 但是,如果您以前从未听过这些术语,则可以阅读Sona ...

  8. 修复Sonar中常见的Java安全代码冲突

    本文旨在向您展示如何快速修复最常见的Java安全代码冲突. 它假定您熟悉代码规则和违规的概念以及Sonar如何对其进行报告. 但是,如果您以前从未听说过这些术语,则可以阅读Sonar Concepts ...

  9. linux摄像头流媒体开源项目,Github上最受欢迎的10大开源免费的RTSP流媒体项目

    Github选出d TOP 10开源免费的RTSP流媒体项目,如下是具体排名及星星数.缓存 一.Easydarwin服务器 星星数:4,307网络 Easydarwin是国内团队开发的开源流媒体框架. ...

最新文章

  1. 数据结构 -- 散列表
  2. MyBatis框架学习 DAY_02:使用XML配置文件/多参数问题 / FOREACH /IF / #{}和${} / 创建SSM框架流程
  3. javascript之数组操作
  4. 全球与中国节能冷却塔销售渠道分布及市场营销状况分析报告2022-2028年版
  5. Sublime Text 插件之常用20个插件
  6. 第二次冲刺阶段 站立会议09
  7. ado.net 格式 1201
  8. ubuntu安装spark-2.4.7-bin-without-hadoop
  9. PHP实现对MongoDB的基础操作
  10. 杨森翔的书法：立马【五绝】
  11. 异步方法的编写与使用
  12. 信息经济学与人生博弈
  13. 董文永武汉大学计算机学院,董文永 - 教师简历 CV- Computer School of Wuhan University...
  14. 社区版IDEA也能像正式版IDEA一样使用
  15. 如何让他喜欢你？让他多看一眼
  16. 禁用右键 回车 ESC 和 ALT+F4组合建
  17. QQ互联验证Universal Link 状态提示应用的universallink配置中不含互联信息
  18. python - 官方简易文档篇（1）常用、函数
  19. 基于STM32的智能小车方案设计
  20. 「绝影」出没上海车展，约上30+车企一块「商量」

热门文章

  1. 《构建高可用Linux服务器》第一版勘误表(附脚本下载)
  2. FreeBSD从零开始---Web服务器搭建（一）
  3. XPath实例教程十四、following-sibling轴
  4. 杂志大片：摩登都市 爱之城堡
  5. 启动LINUX系统后，进入图形化界面的命令
  6. linux 下使用crontab 定时打包日志并删除已被打包的日志
  7. 返回一个一维整数数组中最大子数组的和02
  8. 【工具】统计jar包和apk中的java方法数
  9. 常用批处理命令总结3之Find和FindStr
  10. 又一个防火墙的问题——content filtering