OSCHINA-MIRROR/silis-ViewxJS

Введение

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 + сжатие zip для производственных и операционных сред с высокими сетевыми требованиями
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](	WebView

Принцип компиляции

Найдите теги, которые необходимо скомпилировать через 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:"Hi,<vx>{{name}}</vx>" });
            }
        })
    </script>
</head>
<body>
    Динамическая компиляция вложенных шаблонов:
    <div class="vx" vx-inner-html="{{myTemplate}}"></div>
</body>
</html>

## Пример
#### Say hello
Демонстрация простейшего примера say hello.

<vx>{{name}}</vx> say hello

``` Образец файла: /demo/say-hello.html

Page onload

Событие загрузки демонстрационной страницы, событие 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: {

В этом тексте нет специальных символов или непечатаемых символов. **Текст запроса**:

current time: <vx>{{time}}</vx>

``` **Перевод**:

<!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: {
          time: 0,
        },
        onLoad: function() {
          var that = this;
          setInterval(function() {
            that.setData({
              time: new Date(),
            });
          }, 1000);
        },
      });
    </script>
  </head>
  <body>
    current time: {{time}}
  </body>
</html>
``` **Пример файла: /demo/bind-event.html**

Пример файла: /demo/bind-event.html

Привязка данных (биндинг)

Односторонняя привязка значения, используется «vx-», одинарная черта означает одностороннюю привязку.
Двусторонняя привязка значения, используется «vx--», одинарная черта означает двустороннюю привязку.


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

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

```

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

#### Пользовательские компоненты

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