README.md · OSCHINA-MIRROR/silis-ViewxJS

Логотип

Описание

ViewxJS — это JavaScript-фреймворк для создания пользовательских интерфейсов, который можно использовать в условиях интеграции переднего и заднего концов с двумя MVC-шаблонами. Он наследует лучшие качества шаблона движка WeChat Mini Programs, такие как простота использования и полнота функциональности, при этом всегда принимает во внимание требования разработчиков к размеру, скорости выполнения и совместимости.

Обстоятельства возникновения1. МыChat Mini Programs является одним из ключевых факторов, способствующих появлению ViewxJS. Его синтаксис шаблонов практически идеален по сравнению с Vue, демонстрируя простоту использования и полноту функциональности. Однако, шаблонный движок WeChat Mini Programs не может быть использован отдельно от WeChat в других местах.

В контексте китайского программного обеспечения все еще существует множество компаний, использующих традиционные backend-шаблоны, такие как ASP.NET, JSP, PHP. Поэтому требуется новая архитектура, которая бы объединяла передний и задний концы с двумя MVC-шаблонами. Синтаксис Vue не был спроектирован таким образом, чтобы эффективно взаимодействовать со старыми технологиями, что затрудняет плавный переход и поиск новых решений для этой проблемы.##### Характеристики:
Чистый frontend MVC-шаблон
Очень маленький: всего 8 КБ
Быстрый: использует механизм компиляции VX
Совместимость: IE5
Легко обучаемый: интерфейсы и тренды близки
Интеграция компонентов: можно использовать с .NET пользовательскими контролами, JSP пользовательскими тегами и другими динамическими веб-компонентами.
Интеграция моделей: можно использовать с .NET WinForms, Structs, ASP MVC, Spring MVC и другими динамическими веб-моделями.

Сравнение:

Параметр сравнения	viewx	vue
Динамическая компиляция	Поддерживается	Поддерживается
Эффективность динамической компиляции	Более быстрая	Быстрая
Эффективность выполнения	Быстрая	Более быстрая
Размер файла	8 КБ	30-100 КБ
Поддержка пользовательских компонентов	Поддерживается	Поддерживается
Совместимость с IE5-8	Поддерживается	Неподдерживаемая
Интеграция .NET-контроллеров и viewx-компонентов	Поддерживается	Неподдерживаемая
Интеграция .NET MVC и viewx MVC	Поддерживается	Неподдерживаемая
MVC	Поддерживается	Поддерживается
MVVM (двустороннее связывание)	Поддерживается	Поддерживается

Чем можно воспользоваться?

Библиотека Viewx имеет размер всего 8 КБ, что позволяет обеспечивать более быстрое время загрузки приложения на мобильных устройствах.
Может быть интегрирована с традиционными технологиями динамических веб-компонентов (.NET WinForms, JSP Custom Tags) как, например: <asp:TextBox CssClass="vx" vx--value="Content"></asp:TextBox>.
Поддерживает интеграцию с традиционными моделями динамического веб-приложения (.NET WinForms, Structs, ASP MVC, Spring MVC).###### Нераскрытые детали
Разработка фронтендовых компонентов на основе ViewxJS (уже реализовано более 50 компонентов, тестирование проводится, но подробности пока не раскрываются, кодовое название — ViewxUI.JS)
Создание бэкендовых компонентов ASP.NET на основе ViewxJS (уже создано более 50 компонентов, тестирование проводится, но подробности пока не раскрываются, кодовое название — ViewxUI.NET)
Разработка четырёх MVC шаблонов архитектуры (ViewxMVC.JS, ViewxWebformMVC.NET, ViewxResponseMVC.NET, ViewxPushMVC.NET) (уже реализовано, тестирование проводится, но подробности пока не раскрываются)

Установка

npm i silis-viewjs

В настоящее время рекомендация использовать npm отсутствует, так как автор редко обновляет пакет npm. Рекомендуется скачивание непосредственно с Gitee.

Размеры файлов

Файл	Размер файла	Описание
viewx.min.js.zip	3 кБ	Сжатый js код + zip сжатие, используется для среды с высокими требованиями к производительности
viewx.min.js	6.8 кБ	Сжатый js код, используется для производства и эксплуатации
viewx.js	17 кБ	Исходный js код, используется для разработки и тестирования
jsc.min.js	2.9 кБ	Для совместимости со старыми версиями браузеров, например: IE5.5-IE8.0

Совместимость с браузерами| ПК | Браузер | Минимальная версия |

| --- | --- | --- | | | Internet Explorer | 5.5 | | Chrome | Chrome | 1 | | Edge | Edge | 12 | | Firefox | Firefox | 3 | | Opera | Opera | 15 | | Safari | Safari | 4 |

|| Мобильная версия | Браузер | Минимальная версия | |---|---|---| | | WebView Android | 1 | | | Chrome Android | 18 | | | Firefox Android | 4 | | | Opera Android | 14 | | | iOS Safari | 3.2 | | | Samsung Internet | 1.0 |

Поддержка браузеров Internet Explorer 5.5–8 требует включения файла /lib/jsc.min.js. (Если требуется поддержка только новых версий браузеров, то можно не использовать jsc.)#### Принцип компиляции

Поиск всех необходимых для компиляции тегов с помощью document.getElementsByClass("vx").
Поиск атрибутов для компиляции по названию, начинающемуся с префикса "vx-".
Поиск всех необходимых для компиляции текстовых контентов с помощью document.getElementsByTagName("vx").

Принцип работы viewx позволяет быстро выполнять динамическую компиляцию, что делает возможной отмену предварительной компиляции.

Динамическая компиляция вложенного шаблона

В некоторых специальных случаях использование динамической компиляции может быть удобнее, чем предварительная компиляция.
Например, если хранить пользовательские шаблоны в таблицах базы данных и получать их содержимое через AJAX, затем динамически компилировать и отображать эти шаблоны с использованием вложенного шаблона (vx-inner-html).

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1.999/xhtml">
<head>
    <script src="../lib/jsc.min.js" type="text/javascript"></script>
    <script src="../viewx.min.js"></script>
    <script>
        Page({
            data: {
                myTemplate: null,
                name: "Tom"
            },
            onLoad: function() {
                this.setData({ myTemplate: "Привет, <vx>{{name}}</vx>" });
            }
        })
    </script>
</head>
<body>
    Динамическая компиляция вложенного шаблона:
    <div class="vx" vx-inner-html="{{myTemplate}}"></div>
</body>
</html>

Примеры

Приветствие

Простейший пример приветствия```markdown

<vx>{{name}}</vx> говорит привет

``` Файл примера: /demo/say-hello.html

Загрузка страницы

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

```html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <script src="../lib/jsc.min.js" type="text/javascript"></script>
   < script src="../viewx.min.js"></script>
    <script>
        Page({
            onLoad: function () {
                document.getElementsByTagName("body")[0].innerText = "Страница уже загружена";
            }
        })
    </script>
</head>
<body>
```Пример файла: /demo/page-onload.html


#### Установка данных
Демонстрация управления данными с помощью setData для обновления представления.

```markdown
```html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <script src="../lib/jsc.min.js" type="text/javascript"></script>
    <script src="../viewx.min.js"></script>
    <script>
        Page({
            data: {
                время: 0
            },
            onLoad: function () {
                var что_то = this;
                setInterval(function () {
                    что_то.setData({ время: new Date() });
                }, 1000);
            }
        })
    </script>
</head>
<body>

    текущее время : <vx>{{время}}</vx>

</body>
</html>

Пример файла: /demo/set-data.html

Демонстрация использования свойства `observers` страницы для отслеживания изменений данных.

```markdown
```html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1.999/xhtml">
<head>
    <script src="../lib/jsc.min.js" type="text/javascript"></script>
    <script src="../viewx.min.js"></script>
    <script>
        Page({
            data: {
                время: 0
            },
            onLoad: function () {
                var что_то = this;
                setInterval(function () {
                    что_то.setData({ время: new Date() });
                }, 1000);
            },
            observers: {
                время: function (значение) {
                    document.getElementsByTagName("body")[0].innerText = "наблюдаемое время : " + значение;
                }
            }
        })
    </script>
</head>
<body>

</body>
</html>

Пример файла: /demo/observers.html

Цикл

```html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1.999/xhtml">
<head>
    <script src="../lib/jsc.min.js" type="text/javascript"></script>
    <script src="../viewx.min.js"></script>
    <script>
        Page({
            data: {
                список: [{ имя: "привет" }, { имя: "кити" }, { имя: "том" }, { имя: "кот" }]
            },
            onLoad: function () {

            }
        })
    </script>
</head>
<body>
``````markdown
<div class="vx" vx-for="{{list}}" for-item="item" for-index="index">

    <div>
        имя:<vx>{{item.name}}</vx>, индекс:<vx>{{index}}</vx>
        <span class="vx" vx-if="{{index % 2 == 0}}">, нечётная строка</span>
        <span class="vx" vx-if="{{index % 2 == 1}}">, чётная строка</span>
    </div>

</div>

Пример файла: /demo/for.html

Условия

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <script src="../lib/jsc.min.js" type="text/javascript"></script>
    <script src="../viewx.js"></script>
    <script>
        Page({
            data: {
                показывать: 1,
                имя1: "Tom",
                имя2: "Mary",
                имя3: "Lucy"
            },
            onLoad: function () {
                var что_то = это;
            }
        });
    </script>
</head>
<body>
</body>
</html>
``````html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <script src="../lib/jsc.min.js" type="text/javascript"></script>
    <script src="../viewx.min.js"></script>
    <script>
        setInterval(function () {
            что_то.setData({
                показывать: (что_то.data.показывать + 1) % 3
            });
        }, 500);
    </script>
</head>
<body>
    <div><vx>{{показывать}}</vx></div>
    <div class="vx" vx-if="{{показывать == 0}}">Привет, <vx>{{имя1}}</vx>!</div>
    <div class="vx" vx-elif="{{показывать == 1}}">Привет, <vx>{{имя2}}</vx>!</div>
    <div class="vx" vx-else>Привет, <vx>{{имя3}}</vx>!</div>
</body>
</html>
```
Пример файла: /demo/if.html

#### Привязка событий

>`catch` указывает на привязку события, которое блокирует всплытие.

```markdown
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <script src="../lib/jsc.min.js" type="text/javascript"></script>
    <script src="../viewx.min.js"></script>
    <script>
        Page({
            data: {
                вывод: "Нажмите меня"
            },
            мойКлик: function (e) {
                это.setData({ вывод: "Привет," + e.currentTarget.dataset.имя })
            }
        })
    </script>
</head>
<body>

    <div class="vx" catch-click="мойКлик" data-имя="Tom"><vx>{{вывод}}</vx></div>
    
</body>
</html>
```
Пример файла: /demo/catch-event.html

>`bind` указывает на привязку события с всплытием.

```markdown
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <script src="../lib/jsc.min.js" type="text/javascript"></script>
    <script src="../viewx.min.js"></script>
    <script>
        Page({
            data: {
                вывод: "Нажмите меня"
            },
            мойКлик: function (e) {
                это.setData({ вывод: "Привет," + e.currentTarget.dataset.имя })
            }
        })
    </script>
</head>
<body>
<div class="vx" bind-click="мойКлик" data-имя="Tom"><vx>{{вывод}}</vx></div>
</body>
</html>
```
Пример файла: /demo/bind-event.html

#### Одностороннее привязывание
```- Для одностороннего привязывания используйте "vx-", где одно подчеркивание указывает на одностороннюю связь.
- Для двустороннего привязывания используйте "vx--", где два подчеркивания указывают на двустороннюю связь.```html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <script src="../lib/jsc.min.js" type="text/javascript"></script>
    <script src="../viewx.js"></script>
    <script>
        Page({
            data: {
                value:"привет"
            },
            clickBtn: function () {
                this.setData({
                    value: new Date().toString()
                })
            }
        })
    </script>
</head>
<body>

    <div>Значение ввода:<input type="text" class="vx" vx--value="{{value}}" style="width:500px"/></div>

    <div>Модельное значение:<vx>{{value}}</vx></div>

    <div>Установка значения:<button class="vx" catch-click="clickBtn">Нажмите для установки значения</button></div>

</body>
</html>
```

Пример файла: /demo/two-way.html

#### Создание пользовательских компонентов

```html
<!DOCTYPE html>
<head>
    <script src="../lib/jsc.min.js" type="text/javascript"></script>
    <script src="../viewx.min.js"></script>
    <script>
        Page({
            usingComponents: {
                "vx-hello": {
                    properties: {
                        name: {
                            type: String,
                            value: "значение по умолчанию"
                        }
                    },
                    template: "Привет, <vx>{{name}}</vx>!"
                }
            },
            data: {}
        })
    </script>
</head>
<body>

    <vx-hello name="Tom"></vx-hello>

</body>
</html>
```

Пример файла: /demo/component.html

OSCHINA-MIRROR/silis-ViewxJS

Описание

Сравнение:

Чем можно воспользоваться?

Установка

Размеры файлов

Совместимость с браузерами| ПК | Браузер | Минимальная версия |

Динамическая компиляция вложенного шаблона

Примеры

Приветствие

Загрузка страницы

Цикл

Условия

Опубликовать ( 0 )

Введение

Обновления (26)

Участники

Недавние действия

OSCHINA-MIRROR/silis-ViewxJS .gitee-modal { min-width: 500px !important; } .gitee-modal .close { right: 0.6rem !important; }

Описание

Сравнение:

Чем можно воспользоваться?

Установка

Размеры файлов

Совместимость с браузерами| ПК | Браузер | Минимальная версия |

Динамическая компиляция вложенного шаблона

Примеры

Приветствие

Загрузка страницы

Цикл

Условия

Опубликовать ( 0 )

Введение

Обновления (26)

Участники

Недавние действия

OSCHINA-MIRROR/silis-ViewxJS