imater 29 авг 2013 в 08:58

Делаем «mindmap» на Javascript с локальным хранением в базе данных браузера

25 мин

57K

Веб-разработка * JavaScript * Программирование *

Из песочницы

+98

Комментарии 45

vadim_ig 29 авг 2013 в 09:23

«Карта ума» — как-то жестковато, встречал перевод «диаграмма связей»

TIEugene 29 авг 2013 в 10:08

Устоявшийся перевод для «mind map» — «карта памяти».

ahmpro 29 авг 2013 в 11:07

А «карта мыслей»?

Flammar 30 авг 2013 в 09:46

Калька с польского? по длине термина предпочтительнее, чем «ментальная карта».

INCWADRA 29 авг 2013 в 11:20

Карта разума?
Диагра́мма свя́зей, известная также как интелле́кт-ка́рта, ка́рта мыслей (англ. Mind map) или ассоциати́вная ка́рта,

MaksimMukharev 29 авг 2013 в 19:31

Есть еще «ментальная карта». Этот вариант мне больше других нравится.

Flammar 30 авг 2013 в 09:45

Длинновато… хотя и калька с испанского и португальского.

atygaev 29 авг 2013 в 09:38

Скажите, пожалуйста, а почему Вы пишите

$("#mindmap").on(...);

...

$("#mindmap").on(...);

вместо того, чтобы один раз «запомнить» и использовать:

var $mindmap = $("#mindmap");

$mindmap.on(...);

...

$mindmap.on(...);

imater 29 авг 2013 в 09:39

Вы правы.
Я так делаю только для того, чтобы новичкам было понятно и не путать их сложным кодом. А так да, чем меньше обращений к DOM, тем быстрее приложение и меньше тратится ресурсов. Спасибо за замечание. Кэширование вообще ускоряет работу во всех областях программирования.

atygaev 29 авг 2013 в 09:44

Ясно. Спасибо за Ваш труд.

asavin 29 авг 2013 в 09:58

Мне кажется, новичкам лучше не показывать плохой код. Вообще никому лучше не показывать плохой код.
Лучше закешировать в переменную, как указали выше, а для новичков оставить внятный комментарий, что это и зачем.

DrZugrik 29 авг 2013 в 10:08

Спасибо, очень интересно! как раз делаю нечто подобное.

Borz 29 авг 2013 в 10:39

вот бы ещё она умела в формат .mm понимать, чтобы с FreeMind «интеграция» была…

antaries 29 авг 2013 в 11:51

и xmind

zag2art 29 авг 2013 в 12:22

И чтоб не больше 520 строк и код, понятный для новичков… :)

naum 29 авг 2013 в 12:21

Сделайте, кто мешает. Этот топик — потрясающий тутор, написанный грамотным языком, просто, понятно и с крутыми примерами / практиками. остальное — ваших рук дело.

Borz 29 авг 2013 в 12:25

Пгостите, но в каком слове моего комментария ви увидели критику к автору?

asavin 29 авг 2013 в 12:41

Простите, что вмешиваюсь.
Мне кажется, комментарии вроде «вот бы еще эта штука умела делать то или это» неадекватны формату топика. Этот топик — попытка научить что-то делать, а не предоставить продукт.

То есть этот топик так позиционируется. А на самом деле это реклама 4tree. Ну и да, согласиться, что это «потрясающий тутор, написанный грамотным языком, просто, понятно и с крутыми примерами / практиками» я не могу, конечно.

naum 29 авг 2013 в 23:52

Когда говорил «потрясающий» имел в виду контекст, найдите на Хабре хотя бы 3 подобных топика по js и с хорошей практикой :)

blackraven 29 авг 2013 в 12:56

Пара комментариев по собственно проекту на гитхабе:
1. А почему вы не думаете о людях из других стран, которые тоже возможно будут заинтересованы? Я только что хотел показать это коллеге — но он ничего не понял, потому что все по-русски! Интернационализация — великая вещь…
2. БЫло бы неплохо указать лицензию на проекте в гитхабе. Я бы например склонил бы, да только нельзя — по умолчанию, лицензия — копирайт.

spmbt 29 авг 2013 в 12:58

Теперь заголовок «Делаем «карту памяти» на Javascript...» создаёт впечатление, что мы делаем флешку на JS. И сходу непонятно, зачем там 3-4 посторонних плагина для рисования графов. Вообще, это стало ясно из комментариев и обнаружения слов «mind map». Наверное, лучше использовать устоявшийся английский термин: «Делаем «mind map» на Javascript...»

Glebcha 29 авг 2013 в 16:16

К сожалению в Safari 6.1 не работает.

скриншот с ошибкой

copist 29 авг 2013 в 16:24

Про git прокрутил.

На jsPlumb завис на 20 минут. Клёвая библиотека!

macik_spb 29 авг 2013 в 17:20

Спасибо за пример. Нашел для себя новое.

А какие ограничения по браузерам?

nini 29 авг 2013 в 19:30

Интересно, меня друг попросил помочь с похожим мини-проектом. Идея — создавать рабочий стол, основанный на canvas куда можно перетягивать детали из списка. Почти все те же плагины (jquery, grag&drop, context menu, raphaeljs). Так вот, у него похожий код, один главный API-«класс», который может и делает все. Разросся он правда уже на 3500 строк — за счет более сложной математики и логики (пересечение объектов, snapping, умный расклад элементов etc...). Я даже не знаю с какой стороны к нему подойти. Думаю попробовать отделить логику/математику расклада в отдельную библиотеку/класс.

А у кого какие будут предложения по рефакторингу примера из статьи?

bob_lyashenko 29 авг 2013 в 20:06

1. ctrl+A
2. ctrl+del
3. И писать заново…

  (function() {
      var application = {
	   config: {
		
	   },
		
	   init: function() {
			
	   },
	   ...
      };

      application.init();
  })();

copist 30 авг 2013 в 05:37

2. del без сtrl

bob_lyashenko 30 авг 2013 в 08:55

может быть)

bob_lyashenko 29 авг 2013 в 19:50

Такс… давно не писал комменты на хабре. Но тут просто не удержался. Я конечно все понимаю, но как так можно… это просто нельзя так оставлять. Уверен, вы писали это с чистыми намерениями, но тут есть список, почему вышло не совсем гуд:

Это худшая реализация синглтона, что я видел. Даже в той ссылке на вику, что вы там поставили есть пример на js, который уже хоть куда не шел. Синглтон пишется через статическое свойство класса, всего то.
«arguments.callee.» — «ES5 Замечание: В strict-режиме любое использование arguments.callee вызовет TypeError, поскольку свойство принято устаревшим.» — пруф с jsGarden.
«var this_api = this; //кэшируем самого себя, чтобы использовать внутри функций» — сохраняем контекст, ибо зависит от объекта, который вызывает функцию. О this в js можно много говорить
«my_all_data_template, jsSaveAllToDB» определитесь, или камелКейс или андер_скор. Для js де-факто камелКейс.
Все эти больше данные с стрингами нужно выносить подальше от логики..
Есть такое свойство prototype в функции, говорят помогает при создании методов класса… Нельзя копировать каждому объекту класса свой метод.
Блок переменных находится вверху функции, а не сл. слово var по всему телу.
Создавайте приложение, а не кучу глобальных функций, что засоряют глобальный объект. Или хотябы уже заверните все это в (function(){})(),
Вывод: Архитектуры никакой..
Загрузку скриптов надо оптимизировать, грузить параллельно, или в одном файле, но не 7-ю запросами. Не говоря уже о том, что файл, который является точкой входа явно не может грузится в центре, он самый последний, ибо юзает все другие подключаемые либы. И раз уже так то и скрипты должны подключатся не в хеде, а в конце бади, ибо блочат загрузку страницы.
<body onload="jsDoFirst();" onresize="onResize()"> - в 18-ый век вернулись что ли?.. Ненавязчивый js — «Не, не слышал».

Лан… пусть будет 10. Думаю сообщество хабра ща сольет мне карму, и больше никого не смогу исправить, и все будут спокойно реагировать на г*нокод.
PS: ничего личного, замечания полезны, никогда не поздно научится.

nini 29 авг 2013 в 20:24

Все замечания 100% верны, но хочется как-раз про архитектуру услышать.

bob_lyashenko 29 авг 2013 в 20:40

Есть иерархия, есть много данных, есть по сути несколько вьюшек, возможна даже одна — как минимум MVC уже напрашивается. Бекбон по-моем идеально ложится, стандартная тудушка (http://backbonejs.ru/#examples-todos) явно покрывает все это, не так сложно к этому применить. Не нравится бекбон — addyosmani.github.io/todomvc/ выбирайте что вам по душе.

Не хотите MVC, вынесите хотя бы работу с данными отдельно, напишите класс «Приложение» которое работает с объектами класса «Узел карты» и все будет красиво и просто.

Все эти 100500 плагинов нафиг не надо. Там максимум если драген_дроп лень самому писать, уже можно заюзать.

Kasheftin 30 авг 2013 в 06:23

Мда, код еще тот. Вдогонку:

Определитесь с тем, насколько универсальным ваш код должен быть. Синглтон по надобности — одна из последних вещей. Если предполагается встраивание вашего кода в какой-то внешний неизвестный код, то первое, что надо — оборачивание всего этого добра в локальный контекст. Смотрите require.js. Второе — destroy-метод. Наподключали обработчиков, а убирать за собой кто будет?

Половина кода — jquery-навешивание обработчиков на глобальный dom. Если код претендует на универсальность, это нужно убрать.

Бэкбон здесь на мой взгляд излишен — это одностраничное приложение без роутинга и особого контроллера. Берите knockout.js.

Для удаленного редактирования файлов посмотрите в сторону sshfs.

mikolalex 30 авг 2013 в 06:30

Объясните пожалуйста эти строчки:

if(records.length && false) {

И еще


$.each(records, function(i, el){


my_all_data["n"+el.id] = {};


my_all_data["n"+el.id] = el;

imater 30 авг 2013 в 06:48

Прошу прощения и посыпаю голову пеплом.
Осталось от отладки.

vgrinin 30 авг 2013 в 07:05

Индусы довольно потирают руки.

Yanovsky 30 авг 2013 в 08:01

Видно, что писать код вы можете.
Рекомендую прочитать книгу Стояна Стефанова — JavaScript. Шаблоны — 2011.

В книге рассказывается не только про часто используемые шаблоны, но и про работу самого интерпретатора.
После прочтения становиться понятно почему имеет хороший тон объявлять все переменные в одном месте (Шаблон
единственной инструкции var), хорошо объясняется объектная модель языка, как работает наследование через prototype, да и вообще ещё много чего интересного.

Читал книгу переведенную на русский язык (А.Кисилев) от издательства Символ. Перевод очень понравился.

imater 30 авг 2013 в 08:11

Спасибо. Буду выгонять из себя «Индуса».

bob_lyashenko 30 авг 2013 в 09:27

До этого я только код смотрел, решил вот даже статью почитать…

«Начнём с основ. Я люблю оборачивать всё множество функций в „синглтон“… Преимущество такого подхода в возможности сохранять большие массивы данных внутри такого «синглтона» и не бояться, что пользователь или какой либо плагин изменит данные.»
— Аааа… что? Причем здесь синглтон?..
«облегчать себе асинхронное программирование при помощи jQuery»…
— как?.. JQuery — это набор функций для работы с DOM, AJAX… А плагин к jQ — $.Deferred() там уже что то делает
Для рисования линий между разными элементами html страницы можно было бы использовать Canvas, но он имеет множество недостатков. Вам пришлось бы создать Canvas значительного размера, например 4000 x 4000 px, что привело бы к нестабильной работе браузера. Линии были бы растровыми и на современных экранах Retina, смотрелись бы хуже, чем векторные. А самое страшное, что все эти 16 миллионов пикселей, требовали бы перерисовки при каждом вводе буквы в карту памяти…
— ну… ну зачем?.. Какие 4000? Какая перерисовка на ввод букв? Откуда вы это взяли? Канвас, если уже так говорить, немного, но быстрее свг. Конечно каждый из них более уместен для разных задач. Но, не надо говорить неправду о канвасе

firestarter 31 авг 2013 в 10:53

Уточню: Deferred object — это часть jQuery API, а не плагин. api.jquery.com/category/deferred-object/.
Для данной задачи все же лучше похдодит SVG.

Flammar 30 авг 2013 в 09:51

Статью ещё не всю прочитал, но сразу благодарю — давно что-то такое хотел сам написать…

Flammar 31 авг 2013 в 14:14

Возможны ли какие-нибудь связи между элементами, кроме «вертикальных» как в иерархическом списке?

alimbekovR 2 сен 2013 в 14:19

Такую бы шутку для создания бизнес процессов, цены бы не было

bob_lyashenko 2 сен 2013 в 19:15

как говорил один бизнесмен: «Для описания бизнес процессов нужна одна программа — excel». а если вы этого не умеете делать, то никакой «мего софт» за вас это не сделает.

VSOP_juDGe 2 сен 2013 в 19:31

А Gliffy чем не устраивает?

ssh0 3 сен 2013 в 12:48

Писал нечто подобное для себя, тоже использовал jsPlumb (trees000.herokuapp.com (связи создаются перетягиванием с меню)), думаю в будущем переписать но используя d3.js

Зарегистрируйтесь на Хабре, чтобы оставить комментарий