OSCHINA-MIRROR/silis-ViewxJS

logo

Введение

ViewxJS — простой фронтендовый MVC-фреймворк.

Основные характеристики:

Чистый фронтендовый MVC-шаблон.
Очень маленький размер: всего 8 КБ.
Ближайшие планы: использование механизма компиляции vx.
Совместимость: IE5.
Лёгкое в освоении: интерфейс схож с современными трендами.

Сравнение:

Vue компилирует все шаблоны представлений, а Viewx компилирует шаблоны представлений точно. Различие заключается в принципах компиляции.
Vue использует виртуальный DOM, а Viewx использует нативный DOM вместо виртуального DOM, что делает принцип простым и выполнимым.
Vue использует нативное двухстороннее связывание, а Viewx использует виртуальное двухстороннее связывание, совместимое с IE5-IE8.
Vue имеет мощную экосистему. Viewx представляет собой просто мини-инструмент. С точки зрения экосистемы, Vue лучше.
Vue имеет uni-app, который может работать с Android, Apple, смартфонами и другими устройствами, а Viewx совместим с IE5-IE8.##### Что конкретно можно сделать?

Объем Viewx составляет всего 8 КБ, что близко к минимальному размеру среди текущих фронтендовых MVC-шаблонов.

Что конкретно можно сделать благодаря такому маленькому размеру? Конечно, это позволяет достичь более быстрой скорости загрузки на мобильных устройствах.

Viewx позволяет достичь ещё более экстремального пользовательского опыта, и автор намерен использовать его для создания приложения с ещё более экстремальным пользовательским опытом, которое можно открыть мгновенно.

Выбирайте между Vue и Viewx в зависимости от ваших потребностей. Viewx имеет небольшой размер и даже может использоваться вместе с другими технологиями. Например, вы можете выбрать Viewx для небольших рекламных страниц или страниц мероприятий. Это как использовать нож для нарезки фруктов вместо ножа для мяса, и такой подход обеспечивает лучшую совместимость.

Начальные дизайнерские намерения:

Изначальная цель автора при создании Viewx состояла в том, чтобы создать ещё более экстремальный опыт использования в будущем, а также поделиться этим с людьми, имеющими такие же идеи. Возможно, таких людей немного. Автор никогда не думал, что это может конкурировать с Vue, только для более экстремальных приложений, нужно начинать с самого низкого уровня экстремальности.Хочу также поблагодарить этого студента из Шаньдона — Сяому. Возможно, моё первоначальное намерение дизайна следует объяснить всем, чтобы полностью достичь значения совместной работы.

Установка

npm i silis-viewjs

Размер файла

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

Совместимость с версией браузера

Компьютерное устройство	Браузер	Минимальная версия
	Internet Explorer	5.5
	Chrome	1
	Edge	12
	Firefox	3
	Opera	15
	Safari	4
-	-	-
	WebView Android	1
	Chrome Android	18
	Firefox Android	4
	Opera Android	14
	iOS Safari	3.2
	Samsung Internet	1.0

Поддерживает браузеры IE5.5–IE8, вам нужно включить ссылку на /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/1999/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>

Пример

Приветствие

Демонстрация самого простого примера приветствия```html

<vx>{{имя}}</vx> приветствует вас

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

событие загрузки страницы

Событие загрузки демонстрационной страницы, событие onload является начальным методом жизненного цикла страницы.

<!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>

</body>
</html>

Пример файла: /demo/page-onload.html

setData

Демонстрация того, как представление обновляется через модель данных управления setData.

<!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 страницы

<!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

Цикл

<!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: {
                список: [{ имя: "привет" }, { имя: "кити" }, { имя: "том" }, { имя: "кошка" }]
            },
            onLoad: function () {

            }
        })
    </script>
</head>
<body>

    <div class="vx" vx-for="{{список}}" for-элемент="элемент" for-индекс="индекс">

        <div>
            имя:<vx>{{элемент.имя}}</vx>, индекс:<vx>{{индекс}}</vx>
            <span class="vx" vx-if="{{индекс % 2 == 0}}">, нечётные строки</span>
            <span class="vx" vx-if="{{индекс % 2 == 1}}">, чётные строки</span>
        </div>
``````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: {
                показывать: 1,
                имя1: "Том",
                имя2: "Мэри",
                имя3: "Люси"
            },
            onLoad: function () {
                var что_то = this;

                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

Условия

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

#### Условия

            setInterval(function () {
                что_то.setData({
                    показывать: (что_то.data.показывать + 1) % 3
                });
            }, 500);
        }
    })
</script>

Привет, {{имя1}}!

Привет, {{имя2}}!

Привет, {{имя3}}!

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

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

catch указывает на привязанное событие, которое предотвращает пулинг

```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>
        Page({
            data: {
                output: "нажмите меня"
            },
            myClick: function (e) {
                this.setData({ output: "Привет," + e.currentTarget.dataset.name })
            }
        })
    </script>
</head>
<body>
``````markdown
    <div class="vx" catch-click="myClick" data-name="Tom"><vx>{{output}}</vx></div>
    
</body>
</html>

Пример файла: /demo/catch-event.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>
        Page({
            data: {
                output: "нажмите меня"
            },
            myClick: function (e) {
                this.setData({ output: "Привет," + e.currentTarget.dataset.name })
            }
        })
    </script>
</head>
<body>
```    <div class="vx" bind-click="myClick" data-name="Tom"><vx>{{output}}</vx></div>
    
</body>
</html>
```
Пример файла: `/demo/bind-event.html`


#### Двустороннее связывание

- Одностороннее связывание значения, используйте `"vx-"`, одиночный дефис означает одностороннее связывание
- Двустороннее связывание значения, используйте `"vx--"`, двойной дефис означает двустороннее связывание

```
<!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>
```


#### Настраиваемые компоненты

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

</body>
</html>
```  

Пример файла: /demo/компонент.html