2

我被困在了某事上，我知道这可能很愚蠢！我试图弄清楚这段代码末尾的括号“）（）”是做什么的？ jsFiddle因为如果我删除它们它不会显示任何东西。我需要在这部分代码中添加更多功能，但由于括号我得到了错误。

(function () {

    var n = 143,
        duration = 750,
        now = new Date(Date.now() - duration),
        count = 0,
        data = d3.range(n).map(function () {
            return 0;
        });

    var margin = {
        top: 6,
        right: 0,
        bottom: 20,
        left: 40
    },
    width = 560 - margin.right,
        height = 120 - margin.top - margin.bottom;

    var x = d3.time.scale()
        .domain([now - (n - 2) * duration, now - duration])
        .range([0, width]);

    var y = d3.scale.linear()
        .range([height, 0]);

    var line = d3.svg.line()
        .interpolate("basis")
        .x(function (d, i) {
        return x(now - (n - 1 - i) * duration);
    })
        .y(function (d, i) {
        return y(d);
    });

    var svg = d3.select("body").append("p").append("svg")
        .attr("width", width + margin.left + margin.right)
        .attr("height", height + margin.top + margin.bottom)
        .style("margin-left", -margin.left + "px")
        .append("g")
        .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

    svg.append("defs").append("clipPath")
        .attr("id", "clip")
        .append("rect")
        .attr("width", width)
        .attr("height", height);

    var axis = svg.append("g")
        .attr("class", "x axis")
        .attr("transform", "translate(0," + height + ")")
        .call(x.axis = d3.svg.axis().scale(x).orient("bottom"));

    var path = svg.append("g")
        .attr("clip-path", "url(#clip)")
        .append("path")
        .data([data])
        .attr("class", "line");

    tick();

    d3.select(window)
        .on("scroll", function () {
        ++count;
    });

    function tick() {

        // update the domains
        now = new Date();
        x.domain([now - (n - 2) * duration, now - duration]);
        y.domain([0, d3.max(data)]);

        // push the accumulated count onto the back, and reset the count
        data.push(Math.random()*10);
        count = 0;

        // redraw the line
        svg.select(".line")
            .attr("d", line)
            .attr("transform", null);

        // slide the x-axis left
        axis.transition()
            .duration(duration)
            .ease("linear")
            .call(x.axis);

        // slide the line left
        path.transition()
            .duration(duration)
            .ease("linear")
            .attr("transform", "translate(" + x(now - (n - 1) * duration) + ")")
            .each("end", tick);

        // pop the old data point off the front
        data.shift();

    }
})()

谢谢！！

4

3 回答 3

1

您定义了一个匿名函数。通常是一个命名函数，如：

function myfunc(){
   //code
}

可以称为：

myfunc();

正是这个()括号正在做。它在完成时调用了匿名函数。如果您不想要这些，请命名您的函数并从您需要的位置调用它，如上面给出的示例。

更新了没有括号的小提琴

于 2013-06-29T12:03:00.600 回答
1

立即调用函数表达式 ( IIFE)

在这里阅读：http: //benalman.com/news/2010/11/immediately-invoked-function-expression/

您当然可以向其中添加任何函数，但由于范围限制，您只能在相同或更深的范围内调用这些函数。

例如 test() 函数：http: //jsfiddle.net/ZaJZu/

于 2013-06-29T11:56:51.503 回答
0

整个事物周围的外括号将函数转换为函数表达式（与函数声明相反）。还有其他方法可以做到这一点，但括号是常见的约定。函数表达式末尾的 () 是触发立即函数调用的原因。

这不是一个自我调用的匿名函数，因为那将是一个递归函数。该模式称为立即调用函数表达式 (IIFE)。它通常用于模块模式，但也相对经常用于将小型内联函数的结果分配给变量。常规的旧后调用函数表达式（末尾没有 ()）也通常作为回调传递或分配给变量，或在对象文字中内联使用以定义方法。

于 2013-06-29T12:05:33.743 回答