溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

開源:Angularjs示例--Sonar中項(xiàng)目使用語言分布圖(CoffeeScript版)

發(fā)布時(shí)間:2020-05-30 06:45:33 來源:網(wǎng)絡(luò) 閱讀:994 作者:破狼 欄目:web開發(fā)

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

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

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

   多的也不想說那么多了,這里主要是個(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)注。

向AI問一下細(xì)節(jié)

免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI