пытается понять код javascript

Question

Я пытаюсь понять код javascript, получая мои руки грязными .. Мой фон в основном python и C++.

Так я шел через этот код здесь

http://bl.ocks.org/mbostock/1021841

var force = d3.layout.force() 
.nodes(nodes) 
.links([]) 
.size([w, h]) 
.start(); 

Я предполагаю, что "" представляет собой метод .. но к какому объекту? и я с трудом понимая эту запутанную функцию (метод ??)

force.on("tick", function(e) { 

    // Push different nodes in different directions for clustering. 
    var k = 6 * e.alpha; 
    nodes.forEach(function(o, i) { 
    o.y += i & 1 ? k : -k; 
    o.x += i & 2 ? k : -k; 
    }); 

Может кто-то разбить его мне на простом языке. Благодаря

Answer 1

Этот код:

var force = d3.layout.force() 
.nodes(nodes) 
.links([]) 
.size([w, h]) 
.start(); 

следует читать в основном то же самое вы бы читать, если бы C++ (для var ключевого слова, за исключением, в C++ вы должны объявить конкретный тип для force) , Как и C++, пробел (в основном) незначителен. Каждый . указывает на доступ к объекту. (В отличие от C++, объекты JavaScript не отличает поля от методов, а все - свойство. Если это свойство функции, то оно может быть вызвано, следуя имени с круглыми скобками — с аргументами функций в круглых скобках, если это необходимо.) Итак, что происходит на здесь:

• d3.layout - доступ к layout свойство d3.
• .force() - invoke force функция, которая является собственностью d3.layout. Внутри force, d3.layout будет доступно как ключевое слово this.
• .nodes(nodes) - вызвать функцию nodes, которая является свойством любого объекта, возвращенного вызовом force() (возможно, d3.layout, возможно, что-то еще).
• т.д.

, наконец, сопоставляя force значение, возвращаемое start().

Что касается второй части кода:

force.on("tick", function(e) { 

    // Push different nodes in different directions for clustering. 
    var k = 6 * e.alpha; 
    nodes.forEach(function(o, i) { 
    o.y += i & 1 ? k : -k; 
    o.x += i & 2 ? k : -k; 
    }); 

Здесь мы видим пример (две, на самом деле) в качестве . На основе обычных условных обозначений JavaScript функция onforce, вероятно, используется для регистрации обработчика события — в этом случае для события "tick". Обработчик события - анонимная функция:

function(e) { 
    // Push different nodes in different directions for clustering. 
    var k = 6 * e.alpha; 
    nodes.forEach(function(o, i) { 
    o.y += i & 1 ? k : -k; 
    o.x += i & 2 ? k : -k; 
} 

В целях пояснения назовем эту функцию «внешней». Он принимает аргумент, который, как я предполагал, является объектом, содержащим свойства события tick. В теле внешнего мы видим другую анонимную функцию: аргумент nodes.forEach. Назовем эту вторую анонимную функцию «внутренней». Функция forEach здесь, скорее всего, является стандартной функцией итератора forEach, которая является свойством всех массивов JavaScript; он принимает функцию в качестве аргумента и вызывает функцию для каждого элемента массива в последовательности, передавая элемент массива и индекс элемента. Внутренний на самом деле является примером замыкания : ссылка на тело объекта переменной k, которая определяется как локальная переменная внешнего.

JavaScript в некотором роде аналогичен C++ и в некотором роде принципиально отличается. Если вы не знаете, где сходство заканчивается, а различия начинаются, ваш фон на C++ может привести вас к серьезным искажениям в ваших усилиях по кодированию (и чтению кода). Я настоятельно рекомендую вводную бумагу "A re-introduction to JavaScript". Он охватывает все основные функции языка и должен помочь прояснить, насколько похожи C++ и JavaScript и как они отличаются.

Answer 2

Это:

var force = d3.layout.force() 
.nodes(nodes) 
.links([]) 
.size([w, h]) 
.start(); 

То же самое, как это:

var force = d3.layout.force().nodes(nodes).links([]).size([w, h]).start(); 

Значение переменной force будет возвращаемое значение последнего метода в цепи (в данном случае .start()).

Это называется цепной метод. Каждая последующая функция вызывается как метод для возвращаемого значения функции перед ней.

Так, метод .nodes(nodes) вызывается на объект, который возвращается из d3.layout.force() и метод .links([]) вызывается на объект, возвращаемый из .nodes(nodes) и так далее.