# ViewxJS

**Repository Path**: silis/ViewxJS

## Basic Information

- **Project Name**: ViewxJS
- **Description**: ViewxJS是一款构建用户界面的JS框架，可适用于前后端双MVC模板引擎的整合创新的有利条件，继承微信小程序模板引擎的精简易学、功能俱全的优良特质，并始终惯彻地为开发者考虑体积大小、运行速度、兼容性等技术性需求，以达到最佳的技术适用性与创新性条件。
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 22
- **Forks**: 1
- **Created**: 2021-01-01
- **Last Updated**: 2022-11-25

## Categories & Tags

**Categories**: webframework

**Tags**: MVC, MVVM, 前端, 模板引擎, View

## README

<div align="center">
    <p align="center">
        <img src="https://images.gitee.com/uploads/images/2021/0403/192839_91789c43_1167316.png" alt="logo"/>
    </p>
</div>

<div align="center">

[![star](https://gitee.com/silis/ViewxJS/badge/star.svg?theme=dark)](https://gitee.com/silis/ViewxJS/star)
[![fork](https://gitee.com/silis/ViewxJS/badge/fork.svg?theme=dark)](https://gitee.com/silis/ViewxJS/fork)
[![license](https://img.shields.io/badge/license-MIT-green)](https://gitee.com/silis/ViewxJS/license/mit)
[![free](https://img.shields.io/badge/授权-商用永久免费-green)](https://gitee.com/silis/ViewxJS/free)

</div>

#### Introduction
ViewxJS, a simple front-end mvc framework

###### Features:
1. Pure front-end mvc template
2. Very small: only 8k
3. Soon: using vx compilation mechanism
4. Compatibility: IE5
5. Easy to learn: the interface is similar to the trend

###### Compare:
1. Vue compiles all view templates, and viewx compiles view templates accurately. There are differences in compilation principles.
2. Vue uses virtual dom, viewx uses native dom instead of virtual dom, the principle is simple and feasible
3. Vue uses native two-way binding, viewx uses virtual two-way binding, compatible with IE5-IE8
4. Vue has a strong ecosystem. Viewx is just a simple mini tool. From an ecological point of view, vue is better.
5. Vue has uni-app which can be compatible with Android, Apple, applet, viewx is compatible with IE5-IE8

###### What can I do specifically?

The viewx volume is only 8K, which is close to the smallest volume compared to the current front-end mvc template.

What can the small size specifically do? Of course, the user experience with faster download speed can be achieved on the mobile terminal.

Viewx can achieve a more extreme user experience, and the author needs to use it to make an application with a more extreme user experience, an application that can be opened instantly.

Choose vue or viewx according to actual needs. Viewx has a small size and can even be mixed. For example, you can choose viewx for a small advertising page or activity page. It is like cutting fruits without a pork knife, and the compatibility of cutting fruits is better.

###### Original design intention:

The author's original intention in designing viewx is to create a more extreme application experience in the future, and also to share it with people who have the same idea. Maybe there are not many such people.

The author has never thought that this thing can compete with vue, only for more extreme applications, you need to start from the bottom of the extreme.

I also want to thank this student from Shandong Xiaomu. Maybe my original intention of the design needs to be explained to everyone, so as to fully achieve the meaning of sharing.

#### Install

```
npm i silis-viewjs
```


#### File size
|File name|File size|File description|
|--|--|--|
|viewx.min.js.zip|3k|js code compression + zip compression for production and operation environments with higher network requirements|
|viewx.min.js|8k|js code compression, used in production operations|
|viewx.js|17k|js source code, used for development and testing|
|jsc.min.js|2.8k|For compatibility with lower version browsers, such as: IE5.5-IE8.0|


#### Compatible browser version

| Computer terminal | Browser | Minimal version |
|-|-|-|
| ![Internet Explorer](https://developer.mozilla.org/static/media/internet-explorer.cf17782c.svg "Internet Explorer")| Internet Explorer | 5.5 |
| ![Chrome](https://developer.mozilla.org/static/media/chrome.4c570865.svg "Chrome")| Chrome | 1 |
| ![Edge](https://developer.mozilla.org/static/media/edge.40018f6a.svg "Edge") | Edge | 12 |
| ![Firefox](https://developer.mozilla.org/static/media/firefox.51d8a59c.svg "Firefox") | Firefox | 3 |
| ![Opera](https://developer.mozilla.org/static/media/opera.a0ab0c50.svg "Opera") | Opera | 15 |
| ![Safari](https://developer.mozilla.org/static/media/safari.3679eb31.svg "Safari") | Safari | 4 |


| Mobile terminal | Browser | Minimal version |
|-|-|-|
| ![WebView Android](https://developer.mozilla.org/static/media/android.7d9bf320.svg "WebView Android") | WebView Android | 1 |
| ![Chrome Android](https://developer.mozilla.org/static/media/chrome.4c570865.svg "Chrome Android") | Chrome Android | 18 |
| ![Firefox Android](https://developer.mozilla.org/static/media/firefox.51d8a59c.svg "Firefox Android") | Firefox Android | 4 |
| ![Opera Android](https://developer.mozilla.org/static/media/opera.a0ab0c50.svg "Opera Android") | Opera Android | 14 |
| ![iOS Safari](https://developer.mozilla.org/static/media/safari.3679eb31.svg "iOS Safari") | iOS Safari | 3.2 |
| ![Samsung Internet](https://developer.mozilla.org/static/media/samsung-internet.6fd7f423.svg "Samsung Internet") | Samsung Internet | 1.0 |

> Compatible with IE5.5-IE8 browsers, you need to quote /lib/jsc.min.js. (If you don't need to be compatible with lower version browsers, you don't need to reference the jsc library)

#### Compilation Principle

1. Find the tags that need to be compiled through document.getElementsByClass("vx")
2. Find the attribute that needs to be compiled by the attribute name prefixed with "vx-"
3. Find the text content that needs to be compiled through document.getElementsByTagName("vx")

> Viewx's compilation principle makes dynamic compilation fast, and it can be considered that precompilation is not required.

#### Dynamically compile nested templates

> For some special development scenarios, it is more convenient to use dynamic compilation than pre-compilation. <br>
> Such as: store the custom template in the table, get the template content through ajax, and dynamically compile the template and display it through the nested template (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>
    Dynamically compile nested templates:
    <div class="vx" vx-inner-html="{{myTemplate}}"></div>
</body>
</html>

```



## Example
#### say hello
Demonstrate the simplest example say hello

```
<!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: {
                name: "Tom"
            }
        })
    </script>
</head>
<body>

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

</body>
</html>
```
Sample file: /demo/say-hello.html

#### page onload
The loading event of the demo page, the onload event is the initial method of the page life cycle.

```
<!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 = "Page has been loaded";
            }
        })
    </script>
</head>
<body>

</body>
</html>
```
Sample file: /demo/page-onload.html


#### setData
Demonstrate that the view is updated through the setData control data model.
```
<!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: <vx>{{time}}</vx>

</body>
</html>
```
Sample file: /demo/set-data.html


#### page observers
Demonstrate the monitoring of page data changes through the observers property of the page
```
<!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);
            },
            observers: {
                time: function (value) {
                    document.getElementsByTagName("body")[0].innerText = "observer time: "+ value;
                }
            }
        })
    </script>
</head>
<body>

</body>
</html>
```
Sample file: /demo/observers.html


#### Loop

```
<!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: {
                list:[{ name:"hello" },{ name:"kity" },{ name:"tom" },{ name:"cat" }]
            },
            onLoad: function () {
                
            }
        })
    </script>
</head>
<body>

    <div class="vx" vx-for="{{list}}" for-item="item" for-index="index">

        <div>
            name:<vx>{{item.name}}</vx>, index:<vx>{{index}}</vx>
            <span class="vx" vx-if="{{index%2==0}}">, odd lines</span>
            <span class="vx" vx-if="{{index%2==1}}">, even rows</span>
        </div>

    </div>

</body>
</html>
```
Sample file: /demo/for.html

#### Conditions

```
<!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: {
                show: 1,
                name1: "Tom",
                name2: "Mary",
                name3: "Lucy"
            },
            onLoad: function () {
                var that = this;

                setInterval(function () {
                    that.setData({
                        show: (that.data.show+1)%3
                    });
                }, 500);
            }
        })
    </script>
</head>
<body>
    <div><vx>{{show}}</vx></div>
    <div class="vx" vx-if="{{show==0}}">Hi, <vx>{{name1}}</vx>!</div>
    <div class="vx" vx-elif="{{show==1}}">Hi, <vx>{{name2}}</vx>!</div>
    <div class="vx" vx-else>Hi, <vx>{{name3}}</vx>!</div>
</body>
</html>
```
Example file: /demo/if.html

#### Binding events

> catch refers to a bound event that prevents bubbling

```
<!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: "click me"
            },
            myClick: function (e) {
                this.setData({ output: "Hi," + e.currentTarget.dataset.name })
            }
        })
    </script>
</head>
<body>

    <div class="vx" catch-click="myClick" data-name="Tom"><vx>{{output}}</vx></div>
    
</body>
</html>
```
Sample file: /demo/catch-event.html

> bind refers to the bound event with bubbling

```
<!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: "click me"
            },
            myClick: function (e) {
                this.setData({ output: "Hi," + e.currentTarget.dataset.name })
            }
        })
    </script>
</head>
<body>

    <div class="vx" bind-click="myClick" data-name="Tom"><vx>{{output}}</vx></div>
    
</body>
</html>
```
Example file: /demo/bind-event.html


#### Two-way binding

-One-way binding value, use "vx-", single bar means one-way
-Two-way binding value, use "vx--", single bar means two-way

```
<!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:"hello"
             },
             clickBtn: function () {
                 this.setData({
                     value: new Date().toString()
                 })
             }
         })
     </script>
</head>
<body>

     <div>Input value: <input type="text" class="vx" vx--value="{{value}}" style="width:500px" /></div>

     <div>Model value: <vx>{{value}}</vx></div>

     <div>Setting value: <button class="vx" catch-click="clickBtn">Click setting value</button></div>

</body>
</html>
```


#### Custom components

```
<!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: "default value"
                         }
                     },
                     template: "Hi, <vx>{{name}}</vx>!"
                 }
             },
             data: {}
         })
     </script>
</head>
<body>

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

</body>
</html>
```

Sample file: /demo/component.html