D3.js의 스타일 - 체인 호출

1650 단어





    Functional Javascript
    
    





    function SimpleWidget(spec) {
        var instance = {}; // <-- A

        var headline, description; // <-- B

        instance.render = function () {
            var div = d3.select('body').append("div");

            div.append("h3").text(headline); // <-- C

            div.attr("class", "box")
               .attr("style", "color:" + spec.color) // <-- D
               .append("p")
                   .text(description); // <-- E

            return instance; // <-- F
        };

        instance.headline = function (h) {
            if (!arguments.length) return headline; // <-- G
            headline = h;
            return instance; // <-- H
        };

        instance.description = function (d) {
            if (!arguments.length) return description;
            description = d;
            return instance;
        };

        return instance; // <-- I
    }

    var widget = SimpleWidget({color: "#6495ed"})
            .headline("Simple Widget")
            .description("This is a simple widget demonstrating functional javascript.");
    widget.render();





G 태그와 H 태그 헤드라인은 매개 변수가 다른 상황에서 각각 setter와 Getter로 매개 변수를 전달하지 않고 G에서 하위 대상인 헤드라인(부 대상의 속성)을 되돌릴 수 있다. 헤드라인은 Getter가 매개 변수를 전달하고 H에서 부모 대상인 instance(속성을 설정한 것)를 되돌릴 수 있다. 헤드라인은 setter가 되돌아오는 instance에서 바로 다른 함수를 실행할 수 있다. 이것은 체인 호출이다.

좋은 웹페이지 즐겨찾기