关于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,请持续关注。
相关推荐
ng-spring-boot, Spring Boot Spring Data JPA AngularJS示例 采用 Spring Boot 和AngularJS的快速Prototype快速 Prototype这个例子演示了英镑 Spring Boot Spring Data JPA 和前端可以一起用来编写web应用程序的...
Restangular 是一种 AngularJS 服务,它使用最少的客户端代码简化常见的 GET、POST、DELETE 和 UPDATE 请求。 它非常适合任何使用来自 RESTful API 的数据的 WebApp。 注意 此版本的 Restangular 仅支持 Angular 1。...
面试题示例(更新至 v1.7.x) 如果您喜欢该项目,请单击。 拉取请求受到高度赞赏。 目录 基本 号码 问题 01. 02. 03. 04. 05. 06. 07. 08. 09. 10. 11. 12. 13. 14. 15. 16. 17. 18. 19. 20. 21. 22. 23. 24. 25. 26...
angular-file, AngularJS的本机文件上传处理 ur.file: AngularJS的原生HTML5-based文件输入绑定示例<html ng-app="myApp"><head> <script src="https://ajax
是的matlab代码AngularJS-SpringMVC-示例 从原始文档中: AngularJS和Spring-MVC交互的示例项目。 显示了以下功能: 基本配置Spring MVC / AngularJS 简单的CRUD功能 (错误)消息的一般处理 客户端I18N 安全 没有...
Hello World——AngularJS示例 双向数据绑定 Angular JS中的MVC模式 鸟瞰 深入作用域 视图 模块与依赖注入 模块 协作对象 注册服务 模块的生命周期 模块依赖 1.3 AngularJS和其他框架 ...
CodeIgniter-AngularJS-App, 在CodeIgniter和AngularJS上,示例应用程序基于 的CodeIgniter应用程序基于 CodeIgniter 3.x 和 AngularJS 1. x.的样例应用程序这是非常简单的例子- CRUD 。:如何启动?在 appliaction/...
sample-app-angularjs, 用于AngularJS的UI Router 示例应用程序 1.0---示例应用程序http://ui-router.github.io/sample-app-angularjs/#/mymessages/inbox/5648b50cc586cac4aed6836f 这个示例应用程序
AngularJS-FlowChart, 可视化和编辑流程图的示例/模板WebUI控件 angularjs流程图用于可视化和编辑流程图的WebUI控件。虽然这不是完全通用的,但是如果你需要使用SVG流程图并且愿意使用 AngularJS,那么它将是一个很...
在线示例: http://www.videogular.com。Videogular 主要关注移动端设备和 HTML5 视频特定的功能:可绑定属性:Videogular 的指令是可绑定的 通过插件可扩展:根据 API 可以开发定制插件基于主题:可以自定义主题...
make-your-own-gmail, 使用 Google JavaScript SDK AngularJS的Gmail副本示例 制作你自己的Gmail.com可以定制的,独立的Gmail帐户接口。 这是一个可以编辑的脚手架,用于构建你自己的界面以与你的Gmail电子邮件帐户...
我在创建这个应用程序时参考了许多其他示例应用程序,因此本着开源精神(也因为 GitHub 是存储此类内容的好地方),我与互联网分享。 学习 AngularJS 链接 学习 其他示例应用 对 Phonegap / Cordoba 的思考 我...
django-api-rest-and-angular, 将 Django Rest框架与AngularJS结合起来的一个示例库 带有 Django Rest框架和angularjs资源的 Django API这个示例项目是博客文章的伴侣,关于如何开始使用 Django Rest框架和 ...
这主要是针对beego示例应用程序的,您可以研究如何通过该项目使用beego,进行试用,提出问题以告诉我们您期望的示例,甚至可以提出请求。 为beego v1.6更新 安装 安装 在github中,Fork # you should have set ...
HelloWorld——AngularJS示例10 双向数据绑定12 AngularJS中的MVC模式12 鸟瞰13 深入作用域15 视图21 模块与依赖注入26 模块26 协作对象27 注册服务29 模块的生命周期33 模块依赖35 13AngularJS和其他...
但我同意,更复杂的决策可以发挥潜力(我提供了一些可在“开源”上使用的项目,但这些项目被忽略了) 不知道AngularJs吗? -显而易见的原因,这伤害了开发人员AngularJs 主题JS-这是一个严重的错误,因为如果您不...
再加上免费开源,使用zTree的人越来越多。 效果图如下 首先你需要知道AngularJS的双向数据绑定是什么才可以更好的理解下面的代码,想了很久才想出用下面的代码来实现左侧菜单树形结构 要实现上面的功能你需要操作...
此POC(概念验证)将向我们展示如何使用SailsJS,AngularJS和OrientDB等开源技术构建Web应用程序。 在此,我们使用全栈JavaScript。 是一个开源MVC框架 。 是Google的前端MVC JS开源框架。 还是Orient ...
angularQFileUpload 是一个 AngularJS 扩展,实现了通过七牛云储存上传大文件的服务,支持恢复、进度等功能。示例代码:$scope.selectFiles = []; var start = function (index) { $scope.selectFiles...
phonegap-angular-ratchet, 使用AngularJS框架棘轮用户界面和Fastclick的Phonegap应用程序示例 phonegap-angular-ratchet使用 Angular JS 。棘轮UI和FastClick的PhoneGap应用示例PhoneGap应用需要特别关注和注意以...