Доброго времени суток. Уважаемые коллеги выношу на общий суд следующею технологию. Цель моего обращения, это получить конструктивную критику более опытного сообщества. В связи с этим прошу не задавать вопросы , наподобие “ Зачем это надо?... ” . Возьмём за константу факт “Это надо.”
Появилась необходимость хранить JS код и Cache` в одном месте, что позволит вести документацию разработке в одном формате (единый глобальный поиск в коде).Так же очень сильно раздражала реализация синхронных запросов при вызове класс-методов из JS кода. Еще хотелось бы хранить исходный код в одном месте, без применения внешних CSP файлов (js).
Имея на руках Cache` 2013 , идею и пул задач, решаемых моими коллегами я реализовал библиотеку HTML.CacheLib.
И так на что способна эта библиотека:
1) Хранение исходного кода JS в клиент-методе и передача его клиенту.
Создаем класс:
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
Class Demo.CacheLibTest003 Extends %CSP.Page
{
ClassMethod OnPage() As %Status
{
&html<
<script src='HTML.CacheLib.cls' type='text/javascript' ></script>
<script type='text/javascript' >
alert(MyRead());
</script>
>
Quit $$$OK
}
/// получаем время
ClientMethod MyRead() As %String [ Language = javascript, WebMethod ]
{
return 'Время: /*( w $ZDT($h) )*/';
}
}
Пояснения: В созданном классе присутствует вызов библиотеки <script src='HTML.CacheLib.cls' type='text/javascript' ></script>.
При вызове это страницы происходит вычитывание структуры класса из глобала ^oddDEF . Вычитываются методы у которых в свойствах указаны параметры WebMethod и Language = javascript и передает содержимое этих методов клиенту. Если в тексте присутствуют скобки в виде символов /*( Однострочный Код Cache` )*/ , тогда содержимое скобок выполняется как однострочный код, и результат помещается вместо этих скобок. Описание клиент-метода тоже передается клиенту перед телом функции.
Код полученный из класса помещается в конец “HTML.Cache.cls” .
Если “HTML.Cache” обозначить как суперкласс нового класса User.TestJS , тогда можно будет подключать новый класс следующим образом <script src='User.TestJS.cls' type='text/javascript' ></script>. Он также будет интерпретирован в JS код. Этот метод позволить создавать JS библиотеки в Cache` классах.
2) Асинхронный вызов класс-метода Cache` из JS кода.
Создаем класс:
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
Class Demo.CacheLibTest004 Extends %CSP.Page
{
ClassMethod OnPage() As %Status
{
&html<
<script src='HTML.CacheLib.cls' type='text/javascript' ></script>
<script type='text/javascript' >
// функция для обработки результат
var CallBackFun=function(txt){ alert(txt); }
//Асинхронный запрос
runMethod('Demo.CacheLibTest004.CacheBlaBlaBla',CallBackFun,' Асинхронный запрос класс-метода ');
//Синхронный запрос
var txt=runMethod('Demo.CacheLibTest004.CacheBlaBlaBla',' Синхронный запрос ');
alert(txt);
</script>
>
Quit $$$OK
}
/// Класс метод, который будем вызывать из JS
ClassMethod CacheBlaBlaBla(msg)
{
w $zdt($h)_":"_msg
}
}
Пояснения: Механизм вызова JS функции runMethod скопирован из "/csp/broker/cspxmlhttp.js" и"/csp/broker/cspbroker.js" , с небольшой модификацией для работы с асинхронными запросами. Думаю инженеры компании Intersystems могут взять на заметку данный метод, и в дальнейшем в новых релизах всё-таки внедрить асинхронные запросы. В JS не составит труда анализировать второй аргумент, и если он является функцией, тогда считать это асинхронным запросом и результат запроса передавать в аргументнуюу функцию. Мой метод является не очень защищенный, так как название вызываемого класс-метода, передается в нешифрованном виде.
3) Добавлена возможность динамического подключения CSS и JS библиотек
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
<script language="JavaScript">
// Подключаем библиотеку JS из класса
includeClass('HTML.js.WebGL.BabylonJS.babylon.cls','javascript');
// Подключаем JS библиотеку из файла
includeFile('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js','javascript');
// Подключаем JS библиотеку из файла
includeFile('https://jQuery.min.js');
// Подключаем CSS библиотеку из файла
includeFile('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css','css');
</script>
Пояснение: Обращаться к вновь подключенным библиотекам можно будет сразу же после полной загрузке страницы.
4) Создание JS прототипов в Cache классе.(создание JS классов).
Создаем прототип:
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
Class User.Prototyp Extends HTML.CacheLib
{
/// Альтернативное название прототипа.
/// Если этого параметра нет, тогда имя прототипа
/// берется из имени класса “Prototyp”
Parameter ClassName = "ClassName";
/// Публичные переменные прототипа
Property Pole1 As %String [ InitialExpression = "Value1", Internal ];
Property Pole2 As %String [ InitialExpression = "Value2", Internal ];
Property Pole3 As %String [ Internal ];
/// Конструктор прототипа
ClientMethod prototyp(arg1 = "") As %String [ Internal, Language = javascript ]
{
this.Pole1=arg1;
}
ClassMethod Test(Arg) As %String [ Internal, Language = cache ]
{
w $zdt(+$h)_": "_Arg
q ""
}
ClientMethod Test3(arg1 = "") As %String [ Internal, Language = javascript ]
{
alert(arg1);
}
}
Применение прототипа в CSP страницы :
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
<html>
<head>
<title> Cache Server Page </title>
</head>
<body>
<script src='HTML.CacheLib.cls' type='text/javascript' ></script>
<script src='User.Prototyp.cls' type='text/javascript' ></script>
<script language="JavaScript">
var edit=new ClassName('ArgClassName');// Создаем экземпляр прототипа
alert(edit.Pole1); // обращение к переменной
alert( runMethod('User.Prototyp.Test','dddddddddd') );
alert(edit.Test('+++++++MSG2+++++'));// синхронный вызов функции
retunFun=function(txt){ alert(txt); }
edit.Test(retunFun,'-----MSG3----'); // асинхронный вызов
edit.Test3('Args123')
</script>
</body>
</html>
5) Создание собственного HTML элемента в Cache классе (работа с прототипами).
Создаем прототип HTML элемента:
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
Class User.Prototyp2 Extends HTML.CacheLib
{
/// Название класса для создания элемента из JS
Parameter ClassName = "TestHtmlTag";
/// имя тэга <my-input>0</my-input>
Parameter tagName = "my-input";
Property timer As %Integer [ InitialExpression = 0, Internal ];
/// содержимое Тэга
Property innerHTML As %String [ InitialExpression = "Value1", Internal ];
/// JS Конструктор HTML элемента
ClientMethod prototyp2(arg1 = "") As %String [ Internal, Language = javascript ]
{
this.Pole1=arg1;
}
/// запуск таймера
ClientMethod attachedCallback() As %String [ Internal, Language = javascript ]
{
setInterval(this.tick.bind(this), 1000);
}
/// Функция срабатывает после создания элемента (инициализация)
ClientMethod createdCallback() As %String [ Internal, Language = javascript ]
{
this.timer = 0;
}
/// функция инкремента
ClientMethod tick() As %String [ Internal, Language = javascript ]
{
this.timer++;
this.innerHTML = this.timer;
}
}
Создание HTML элемента в CSP файле
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
<html>
<head>
<title> Cache Server Page </title>
</head>
<body>
<script src='HTML.CacheLib.cls' type='text/javascript' ></script>
<script src='User.Prototyp2.cls' type='text/javascript' ></script>
<my-input>222222</my-input>
</body>
</html>
Пример взят с сайта:
https://learn.javascript.ru/webcomponent-core
В библиотеке присутствуют и другие JS функции, которые на мой взгляд будут полезны. Но основное уже описал.
В итоге повторно озвучиваю пожелания к сообществу. Для дальнейшего развития необходимо конструктивная критика что на ваш взгляд сделано не правильно.
