Как начать понимать спецификации JavaScript?

257
07 апреля 2018, 21:42

Проблема в том, что я изучаю Java Script по мануалам и статьям, самостоятельно. Использую пока его просто для того, чтобы сделать тривиальные задачи. Сейчас решил сделать конструктор на базе Wijmo, там есть два блока Drag&Drop, в первом (верхнем) блоке находятся начальные элементы, которые парсятся с json (это я уже сделал, было не сложно), но мне надо взять собранную пользователем информацию со второго блока (нижнего) и спарсить её в новый json.

Проблема в том, что я начал читать спецификации и без примером не понимаю, как правильно записать их в коде, чтобы скрипт давал мне, то что обещает спецификация. Я начал искать парсер и там тоже ничего не понял.

Помогите разъяснить или укажите на статьи где объяснялось бы как понимать спецификации такого рода.

Вот пример того , что я не могу понять как записывать в коде:

getNode(item: any): TreeNode

Ссылки на спецификации:

https://github.com/andrejewski/himalaya/blob/master/text/ast-spec-v1.md

http://demos.wijmo.com/5/Angular/WijmoHelp/WijmoHelp/topic/wijmo.nav.TreeView.Class.html

Answer 1

Описание классов приведено для компонентов Angular и, соответственно, они описывают не javascript, а typescript.

Однако, кроме декларации метода, нужно смотреть его описание, в котором описано что возвращает метод, и какие параметры принимает.

Для примера: getNode(item: any): TreeNode

Описание метода: Gets the TreeNode object representing a given data item. (Получает объект типа TreeNode, у которого значение свойства dataItem содержит значение item)

Параметры: item: any - The data item to look for. (данные которые ищутся) Возвращаемое значение: объект типа TreeNode.

Для примера: если в itemsSource, если объект var el = {header: 'header'}, то вызов tree.getNode(el) вернет TreeNode, в которой содержится искомый элемент.

Что касается получение обновленного json. Актуальный массив для второго дерева можно получить с помощью метода map примененного к свойству nodes и получения у каждого узла первого уровня свойства dataItem, в котором хранится конкретный объект.

Пример:

var t = { 
  header: 'Custom' 
} 
// create trees to drag/drop between 
var tvDragDrop1 = new wijmo.nav.TreeView('#tvDragDrop1', { 
  displayMemberPath: 'header', 
  childItemsPath: 'items', 
  allowDragging: true, 
  dragOver: dragOverBetweenTrees, 
  itemsSource: [t, { 
      header: 'Item 1.1' 
    }, 
    { 
      header: 'Item 1.2' 
    }, 
    { 
      header: 'Item 1.3' 
    }, 
  ] 
}); 
var tvDragDrop2 = new wijmo.nav.TreeView('#tvDragDrop2', { 
  displayMemberPath: 'header', 
  childItemsPath: 'items', 
  allowDragging: true, 
  dragOver: dragOverBetweenTrees, 
  itemsSource: [] 
}); 
 
// allow drag/drop between tvDragDrop1 and tvDragDrop2 
function dragOverBetweenTrees(s, e) { 
  var t1 = e.dragSource.treeView, 
    t2 = e.dropTarget.treeView; 
  if (t1 == tvDragDrop1 || t1 == tvDragDrop2) { 
    if (t2 == tvDragDrop1 || t2 == tvDragDrop2) { 
      e.cancel = false; 
    } 
  } 
} 
 
function getjson() { 
  var nodes = tvDragDrop2.nodes; 
  var data = nodes.map(function recursiveNodes(node) { 
    return node.dataItem; 
  }); 
  console.log(JSON.stringify(data, null, 2)); 
}
.short { 
  min-height: 30px; 
  border: 1px solid red !important; 
}
<!-- latest Wijmo version --> 
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.min.js"></script> 
<script src="https://cdn.grapecity.com/wijmo/5.20181.436/controls/wijmo.nav.min.js"></script> 
<link href="https://cdn.grapecity.com/wijmo/5.latest/styles/wijmo.min.css" rel="stylesheet" /> 
<div class="short" id="tvDragDrop1"></div> 
<div class="short" id="tvDragDrop2"></div> 
 
<input type="button" onclick="getjson()" value="click" />

READ ALSO
Из GSAP в WEBGL

Из GSAP в WEBGL

Есть приложение в ангуляре, которое использует GSAP анимациюОно меняет svg с помощью timeline, а точнее, Есть один svg и внутри него много и они анимируются...

221
Ошибка JSON при запуске бота

Ошибка JSON при запуске бота

При запуске бота вылазит это

200
Ошибка с reCAPTCHA

Ошибка с reCAPTCHA

Из-за этой ошибки могут не работать другие js файлы?

192
Не могу ничего установить через npm install

Не могу ничего установить через npm install

При установке чего либо через npm install вечно вылазит эта ошибкаКак исправить?

226