행복한티모
60
2018-07-20 21:46:02 작성 2018-07-20 21:51:28 수정됨
5
1042

자바스크립트 문법 질문


안녕하세요, 초보개발자입니다.

자바스크립트 여쭤볼것이 있는데요,

GitHub에 있는 cBoard란 BI대쉬보드 오픈소스를 받아서 공부하고 있습니다.


제가 지금까지 알고있었던 자바스크립트의 함수표현식은, 예를들면, 아래와 같은 형식이었습니다만,

var parseOption = function (data) {
    return echartOption;
}



아래 소스코드는 chartLineService.js란 파일의 첫줄인데요, 해석이 잘 안되서요. 도움을 요청합니다.

cBoard.service('chartLineService', function ($state, $window)


위 소스코드 부분만 해석을 부탁드려도 될까요?


제가 이해한 것은

cBoard.service에 'chartLineService'를 주입한다.

chartLineService는 $state와 $window를 매개변수로 받는다.

정도입니다만, 사실 너무 헷갈립니다.


cBoard.service는 객체일까요? 함수일까요?

state와 window앞에 $표시는 무슨역할이죠? 제이쿼리는 아닌것같습니다만,

(본 소스코드 view(html)부분은 angular js가 사용되고 있습니다)


만약을 위해 전체 소스를 아래에 붙이겠습니다.


참고. chartLineService.js 전체 소스

cBoard.service('chartLineService', function ($state, $window) {

    this.render = function (containerDom, option, scope, persist, drill, relations, chartConfig) {
        var render = new CBoardEChartRender(containerDom, option);
        render.addClick(chartConfig, relations, $state, $window);
        return render.chart(null, persist);
    };

    this.parseOption = function (data) {

        var chartConfig = data.chartConfig;
        var casted_keys = data.keys;
        var casted_values = data.series;
        var aggregate_data = data.data;
        var newValuesConfig = data.seriesConfig;
        var series_data = new Array();
        var string_keys = _.map(casted_keys, function (key) {
            return key.join('-');
        });
        var tunningOpt = chartConfig.option;

        var sum_data = [];
        for (var j = 0; aggregate_data[0] && j < aggregate_data[0].length; j++) {
            var sum = 0;
            for (var i = 0; i < aggregate_data.length; i++) {
                sum += aggregate_data[i][j] ? Number(aggregate_data[i][j]) : 0;
                // change undefined to 0
                aggregate_data[i][j] = aggregate_data[i][j] ? Number(aggregate_data[i][j]) : 0;
            }
            sum_data[j] = sum;
        }

        var line_type;
        for (var i = 0; i < aggregate_data.length; i++) {
            var joined_values = casted_values[i].join('-');
            var s = angular.copy(newValuesConfig[joined_values]);
            s.name = joined_values;
            s.data = aggregate_data[i];
            s.barMaxWidth = 40;
            line_type = s.type;
            if (s.type == 'stackbar') {
                s.type = 'bar';
                s.stack = s.valueAxisIndex.toString();
            } else if (s.type == 'polarbar') {
                s.type = 'bar';
                s.stack = s.valueAxisIndex.toString();
                s.coordinateSystem = 'polar';
            } else if (s.type == 'percentbar') {
                if (chartConfig.valueAxis == 'horizontal') {
                    s.data = _.map(aggregate_data[i], function (e, i) {
                        return (e / sum_data[i] * 100).toFixed(2);
                    })
                } else {
                    s.data = _.map(aggregate_data[i], function (e, i) {
                        return [i, (e / sum_data[i] * 100).toFixed(2), e];
                    });
                }
                s.type = 'bar';
                s.stack = s.valueAxisIndex.toString();
            } else if (s.type == "arealine") {
                s.type = "line";
                s.areaStyle = {normal: {}};
            } else if (s.type == "stackline") {
                s.type = "line";
                s.stack = s.valueAxisIndex.toString();
                s.areaStyle = {normal: {}};
            } else if (s.type == 'percentline') {
                if (chartConfig.valueAxis == 'horizontal') {
                    s.data = _.map(aggregate_data[i], function (e, i) {
                        return (e / sum_data[i] * 100).toFixed(2);
                    })
                } else {
                    s.data = _.map(aggregate_data[i], function (e, i) {
                        return [i, (e / sum_data[i] * 100).toFixed(2), e];
                    });
                }
                s.type = "line";
                s.stack = s.valueAxisIndex.toString();
                s.areaStyle = {normal: {}};
            }
            if (chartConfig.valueAxis == 'horizontal') {
                s.xAxisIndex = s.valueAxisIndex;
            } else {
                s.yAxisIndex = s.valueAxisIndex;
            }
            series_data.push(s);
        }

        var valueAxis = angular.copy(chartConfig.values);
        _.each(valueAxis, function (axis, index) {
            axis.axisLabel = {
                formatter: function (value) {
                    return numbro(value).format("0a.[0000]");
                }
            };
            if (axis.series_type == "percentbar" || axis.series_type == "percentline") {
                axis.min = 0;
                axis.max = 100;
            } else {
                axis.min = axis.min ? axis.min : null;
                axis.max = axis.max ? axis.max : null;
            }
            if (index > 0) {
                axis.splitLine = false;
            }
            axis.scale = true;
        });

        if (tunningOpt) {
            var labelInterval, labelRotate;
            tunningOpt.ctgLabelInterval ? labelInterval = tunningOpt.ctgLabelInterval : 'auto';
            tunningOpt.ctgLabelRotate ? labelRotate = tunningOpt.ctgLabelRotate : 0;
        }


        var categoryAxis = {
            type: 'category',
            data: string_keys,
            axisLabel: {
                interval: labelInterval,
                rotate: labelRotate
            },
            boundaryGap: false
        };

        _.each(valueAxis, function (axis) {
            var _stype = axis.series_type;
            if (_stype.indexOf('bar') !== -1) {
                categoryAxis.boundaryGap = true;
            }
        });

        var echartOption = {
            grid: angular.copy(echartsBasicOption.grid),
            legend: {
                data: _.map(casted_values, function (v) {
                    return v.join('-');
                })
            },
            tooltip: {
                formatter: function (params) {
                    var name = params[0].name;
                    var s = name + "</br>";
                    for (var i = 0; i < params.length; i++) {
                        s += '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:' + params[i].color + '"></span>';
                        if (params[i].value instanceof Array) {
                            s += params[i].seriesName + " : " + params[i].value[1] + "% (" + params[i].value[2] + ")<br>";
                        } else {
                            s += params[i].seriesName + " : " + params[i].value + "<br>";
                        }
                    }
                    return s;
                },
                axisPointer: {
                    type: 'cross',
                    label: {
                        backgroundColor: '#6a7985'
                    }
                }
            },
            series: series_data
        };

        if (line_type == 'polarbar') {
            echartOption.angleAxis = chartConfig.valueAxis == 'horizontal' ? valueAxis : categoryAxis;
            echartOption.radiusAxis = chartConfig.valueAxis == 'horizontal' ? categoryAxis : valueAxis;
            echartOption.polar = {};
        } else {
            echartOption.xAxis = chartConfig.valueAxis == 'horizontal' ? valueAxis : categoryAxis;
            echartOption.yAxis = chartConfig.valueAxis == 'horizontal' ? categoryAxis : valueAxis;
        }

        if (chartConfig.valueAxis === 'horizontal') {
            echartOption.grid.left = 'left';
            echartOption.grid.containLabel = true;
            echartOption.grid.bottom = '5%';
        }
        if (chartConfig.valueAxis === 'vertical' && chartConfig.values.length > 1) {
            echartOption.grid.right = 40;
        }

        // Apply tunning options
        updateEchartOptions(tunningOpt, echartOption);

        return echartOption;
    };
});
0
  • 답변 5

  • 푸하푸하
    98
    2018-07-20 21:49:05

    dependency injection ?

  • 행복한티모
    60
    2018-07-20 21:50:23

    자바스크립트의 의존성 주입이란 말씀이신가요?


  • jjmean2
    286
    2018-07-20 23:01:39

    저 프로젝트를 몰라서 내용은 모르겠지만 문법만 이야기하면, 

    function ($state, $window) {

    ...

    }

    라는 엄청 긴 함수를 

    cBoard.service('chartLineService', ...)

    라는 메소드의 두번째 인자로 집어넣은 것입니다.

    $ 문자는 자바스크립트에서 변수명을 지을 때 다른 알파벳처럼 아무 데나 끼워 넣어도 되는 문자라 그냥 변수명을 $state, $window로 지은 것이구요. 함수가 워낙 길다보니까, 인자로 들어온 변수랑 함수내 로컬변수랑 밑에서 구분해서 보기 쉽도록 $를 붙인 게 아닐까 합니다. 

    저 익명함수를 인자로 받는 cBoard.service(...) 메소드 본문 안에서 저 함수를 호출할 때가 있겠지요. 그때 $state와 $window에 해당하는 객체를 저 함수를 호출할 때 전달할 텐데, 그 스테이트와, 윈도우를 우리가 모르고 cBoard.service 코드가 작성된 프로젝트에서 제공해야 하므로 저런 식으로 코드가 나오는 것 같습니다. 

  • 북삼촌사람
    1k
    2018-07-21 10:07:53
    관련된 cBoard git에 들어가서 확인해보니, angular.js 사용하고 있습니다.서비스에서 콜백처리해주는 부분으로 해석하시면 될것 같습니다. 

    $는 보통은 제이쿼리 변수라고 생각할 수 있도록 해주는 부분이지만, angular.js 라이브러리 사용하면 angualr.js 내장 서비스라고 보시면 됩니다. 
  • 행복한티모
    60
    2018-07-22 10:17:04

    답변주신 분들 감사합니다. 

    위에분 댓글을 토대로 좀 찾아봤는데, cBoard.service('charLineService', ...)으로 시작하는것은 angular js에서 모듈 정의하는 방식인 것 같습니다. 

    module.service('serviceName', function );

    module.controller(controllerName', function);

    이런식으로요.. 맞나요?

    즉 chartLineService.js 는 자바 스프링에서 chartLineServiceImpl.java 로 이해해도 될까요?

    angular js를 공부해야할것같습니다...



  • 로그인을 하시면 답변 을 등록할 수 있습니다.