Визуальный редактор кода Ecma (java) Script.





Описание:

Основная задача визуального редактора кода - наглядно представлять логику программы и ее алгоритмов.

Интерфес достаточно прост: каждый объект интерфейса это фунция, связи между функциями - это вызовы, осуществляемые либо напрямую либо с помощью оператора "if".

Каждый "вызов" может отправлять аргументы (в т.ч. "event"), а каждая функция их получить в качестве параметра.

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

Рассмотрим на примере:

Это интерфес выбора проекта:



выберите любой проект и нажмите "Edit".
(default - это программа "написанная в самой себе" - достаточно объемная, ее стоит выбрать если у вас быстрая система)
или можете предварительно создать новый проект.

Кнопка "Make" компилирует выбранный код и открывает его как сайт.

Сейчас мы выберем default и нажмем Edit:



Размеремся с интерфейсом:
Круг цвета "aqua" слева - это зум
Под зумом - серый прямоугольник - смена цвета фона черный/белый
Черный круг с красным бордером - это "dev null" вы можете перетащить на него любую функцию или вызов и они удалятся (undo нет).

Теперь посмотрим сами функции:



Самая первая "старт" она не имеет вызовов, поетому пропишется в index.html при компиляции.
Из нее произойдет обращение к остальным  - порядок имеет значение.
Компилятор сначала запишет в тело функции ее собственный код, а потом обращения "по часовой стрелке".

Рассмотрим подробнее обращение из одной функции к другой, где нам нужно передать параметры ( в данном случае - event ):




Сама функция выглядит как большой шар окруженный по периметру другими:

     - красным с верху - это область создания новых вызовов - вы можете нажать на нем мышкой и, не отпуская, провести новую линию до
другой функции.

Например, функция "onmousemove" имеет такой вызов (шарик на линии наверху) из "ни откуда", это значит что фунция не пропишется в index.html а будет вызваться по id или алиасу.)

    - зелеными - это вызовы  подфункций.

Например, от фунции  "moving" до "onmousemove" идет линия и заканчивается зеленым шариком.
То что этот шарик зеленый, говорит о том что соединение усталовленно.

Если кликнуть по нему два раза, то можно попасть в окно редактирования этого вызова:



Первая строка: "Сохранить" /  "Имя - комментарий"  / "Отклонить";
Вторая строка:
    слева - input для аргумента,
    в центре - подсказка - какой параметр ждет функция,
    справа - "link" говорит что это вызов функции;
Нижняя строка - условие "if" (необязательный параметр) этого вызова;

Теперь кликнем два раза по самой функции "moving":



Мы видем что она получает "event" и содержит код.

А вот так будет выглядить получившийся код после компиляции:

"Onmouse" (f...118) вызывает "moving" (f...339):

 

Функция moving:



Имена файлов превратились в комментарии, функции получили id, прописались параметры и аргументы.

При компиляции все функции прописываются в файле all_in_one.js и те функции которые не вызываются из других вызываются из
index.html

В данном примере это "start" (f...652):
<body>
<script type="text/javascript">
project_name_id= '<?php  if($_GET["project_name_id"]){echo $_GET["project_name_id"];} ?>';
f1215932652();
</script>
</body>

Хочется надеятся, что данный интерфейс, сможет сильно упростить создание нового и  понимание чужого кода со сложной логикой.


Что еще не сделанно:
Сейчас можно создавать js код и обращаться к php файлам, через "document.body.appendChild(script);" в теле функции,
"нарисовать" такое обращение к php пока нельзя.
Также было бы неплохо сделать визуальный способ создания циклов.
Пока же можно прописывать вызовы из циклов "по имени функции", после чего создавать эти функции и получив id прописывать их как алиасы в одной из первых функций ("def_vars" в данном случае), например:
 /** alias **/
function f1287859134(){
wind_mouseover = f1004757118;
onmousemove = f1195717118;
...
("f" перед id подставляется при компиляции, т.к. имя любой функции должно начинаться с буквы).
}


На этом вступительная часть закончена и можно перейдти к демо:

Автор будет рад увидеть здесь комментарии с оценкой этого интерфейса и пожелания по его усовершенствованию:

 







Comments:



test

Ударим переписью по безобразию в эхе!

sfs

ккк