關(guān)于SonarLanguage是什么東東，這里就不在描述了，如果你對(duì)它感興趣的話，請(qǐng)移步到上篇隨筆開源：Angularjs示例--Sonar中項(xiàng)目使用語(yǔ)言分布圖。這里是最近學(xué)習(xí)CoffeeScript的練習(xí)版。

創(chuàng)新互聯(lián)建站專注于吳起網(wǎng)站建設(shè)服務(wù)及定制，我們擁有豐富的企業(yè)做網(wǎng)站經(jīng)驗(yàn)。 熱誠(chéng)為您提供吳起營(yíng)銷型網(wǎng)站建設(shè)，吳起網(wǎng)站制作、吳起網(wǎng)頁(yè)設(shè)計(jì)、吳起網(wǎng)站官網(wǎng)定制、重慶小程序開發(fā)公司服務(wù)，打造吳起網(wǎng)絡(luò)公司原創(chuàng)品牌,更為您提供吳起網(wǎng)站排名全網(wǎng)營(yíng)銷落地服務(wù)。

     CoffeeScript是一門簡(jiǎn)潔的，構(gòu)架于JavaScript之上的預(yù)處理器語(yǔ)言，可以靜態(tài)編譯成JavaScript，語(yǔ)法主要受ruby和python影響，目前已經(jīng)為眾多rails和node項(xiàng)目采用。CoffeeScript不是JavaScript的超集，也不是完全替代品。CoffeeScript有點(diǎn)在于：

1. 更少，更緊湊，和更清晰的代碼
2. 通過(guò)規(guī)避和改變對(duì)JavaScript中不良部分的使用，只留下精華，讓代碼減少出錯(cuò)率，更容易維護(hù)
3. 在很多常用模式的實(shí)現(xiàn)上采用了JavaScript中的最佳實(shí)踐
4. CoffeeScript生成的JavaScript代碼都可以完全通過(guò)JSLint的檢測(cè)

   多的也不想說(shuō)那么多了，這里主要是個(gè)簡(jiǎn)介，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);

就這么多了，關(guān)于CoffeeScript請(qǐng)參考

1. CoffeeScript
2. CoffeeScript詳解
3. CoffeeScript: The beautiful way to write JavaScript
4. 當(dāng)jQuery遭遇CoffeeScript——妙不可言

本人也會(huì)在隨后的隨筆中繼續(xù)更新CoffeeScript，請(qǐng)持續(xù)關(guān)注。

當(dāng)前題目：開源：Angularjs示例--Sonar中項(xiàng)目使用語(yǔ)言分布圖(CoffeeScript版)
文章鏈接：http://www.chinadenli.net/article24/pgcpce.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供定制開發(fā)、域名注冊(cè)、建站公司、手機(jī)網(wǎng)站建設(shè)、響應(yīng)式網(wǎng)站、網(wǎng)站策劃

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)