Слияние кода завершено, страница обновится автоматически
Javascript Markup, также известный как jsm, представляет собой язык разметки, использующий нативные синтаксисы JavaScript. Он может быть встроен в JavaScript без необходимости использования сторонних библиотек или инструментов. jsm обладает такими характеристиками, как легковесность, постепенная загрузка, управление компонентами, динамические шаблоны и привязка данных.
(Автор данного проекта прекратил его поддержку, и он используется исключительно для академических исследований.)
hello world
jsm`hello world`.render();
<input type="button" id="btnHtml" value="Нажми меня" />
<script>
var btnHtml = document.getElementById("btnHtml");
btnHtml.addEventListener("click", function(){
alert("Is me!");
});
</script>
jsm
.input({type:"button",id:"btnjsm",value:"Нажми меня"})()
(function(){
var btnjsm = document.getElementById("btnjsm");
btnjsm.addEventListener("click", function(){
alert("Is me!");
});
})
.render();
jsm
.input({type:"button",value:"Нажми меня"})()
(function(btnjsm){
btnjsm.addEventListener("click", function(){
alert("Is me!");
});
})
.render();
var output = jsm.div`Динамический шаблон:`();
for(var i = 0; i < 10; i++){
if(i % 2 == 0){
output.div({style:"background:yellow"})`Строка ${i+1}`();
} else {
output.div({})`Строка ${i+1}`();
}
}
output.render();
```#### Исходный файл демонстрации: /demo/Dynamic.html
### Привязка данных
```js
var _ = jsm.model({Value: "Это начальное значение"});
// Определение счетчика
var count = 0;
jsm
.input({type: "text", value: _`Value`})()
.div`hello ${_`Value`} world`()
.div({style: "background:yellow"})(_`Value`)()
.input({type: "button", onclick: "_.Value = 'Счетчик: ' + (count++)", value: "Увеличить счетчик"})()
.render();
// Определение компонента YellowPanel
jsmWidget.YellowPanel = function(input, output){
output
.div({style: "text-align:center; background:yellow;"})
(input.children)
();
};
jsm
.YellowPanel`hello world`()
.render();
// в /lib/jsm/Widget/YellowPanel.js
jsmWidget.YellowPanel = function(input, output){
output
.div({style: "text-align:center; background:yellow;"})
(input.children)
();
};
ЖелтаяПанель = function(вход, выход) {
выход
.div({style: "text-align:center; background:yellow;"})
(вход.children)
();
};
// в /lib/demo/Widget-LoadFile.html
//Необходимо запускать в веб-сервере
//Автоматическая загрузка файла JavaScript "./lib/jsm/Widget/ЖелтаяПанель.js"
jsm
.ЖелтаяПанельпривет мир()
.render();
исходный файл: /demo/Widget-LoadFile.html
### Расширение компонентов
Не реализовано, для запроса демонстрации оставьте комментарий
# Описание файлов в папке lib
- /lib/jsm.js исходный код без корутин
- /lib/jsm.min.js минифицированный исходный код без корутин
- /lib/jsm.coro.js исходный код с корутинами
- /lib/jsm.coro.min.js минифицированный исходный код с корутинами
Вы можете оставить комментарий после Вход в систему
Неприемлемый контент может быть отображен здесь и не будет показан на странице. Вы можете проверить и изменить его с помощью соответствующей функции редактирования.
Если вы подтверждаете, что содержание не содержит непристойной лексики/перенаправления на рекламу/насилия/вульгарной порнографии/нарушений/пиратства/ложного/незначительного или незаконного контента, связанного с национальными законами и предписаниями, вы можете нажать «Отправить» для подачи апелляции, и мы обработаем ее как можно скорее.
Опубликовать ( 0 )