# 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/1103/050949_27b1d193_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>


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

###### 产生背景

1. 微信小程序是ViewxJS产生的引火线之一，它的模板语法相比vue几乎十分完美，表现出精简易学，功能俱全。然而，微信小程序的模板引擎无法脱离微信单独使用在其它地方。
2. 在中国的软件大背景下，依然有着大量的软件公司使用着asp.net、jsp、php等传统后端模板引擎。因此急需要一种前后端双MVC模板引擎的创新架构的可能性，vue语法没有考虑好与传统模板技术相结合，即无法较平滑的技术迭代过度，也无法为解决此背景下问题寻求创新的技术解决方案。

###### 特点：
1. 纯前端mvc模板
2. 很小：仅8k
3. 很快：采用vx编译机制
4. 兼容：IE5
5. 易学：接口与潮流相近
6. 控件整合：可与.net自定义控件、jsp自定义标签等动态网页组件技术整合。
7. 模型整合：可与.net winform、struct、asp mvc、spring mvc等动态网页的模型整合。

###### 比较：
| 比较项 | viewx | vue |
|---|---|---|
| 动态编译 | 支持 | 支持 |
| 动态编译效率 | 更快 | 快 |
| 运行效率 | 快 | 更快 |
| 文件大小 | 8k | 30k-100k |
| 自定义组件 | 支持 | 支持 |
| 兼容IE5-8 | 支持 | 不支持 |
| .net控件与viewx组件融合 | 支持 | 不支持 |
| .net mvc与viewx mvc融合 | 支持 | 不支持 |
| MVC | 支持 | 支持 |
| MVVM（双向绑定） | 支持 | 支持 |

###### 能具体做什么？

1. viewx体积仅8K的，在移动端可以做下载速度更快的用户体验。
2. 可与传统的动态网页组件技术（.net winform、jsp自定义标签），进行技术整合使用。如：<asp:TextBox CssClass="vx" vx--value="Content"></asp:TextBox>
3. 可与传统的动态网页模型技术（.net winform、struct、asp mvc、spring mvc），进技技术整合使用。

###### 未公布细节

1. 构建基于ViewxJS的前端自定义组件（已实现50多个控件，应用测试中未公布，代号为ViewxUI.JS）
2. 构建基于ViewxJS的后端ASP.NET控件（已实现50多个控件，应用测试中未公布，代号为ViewxUI.NET）
3. 构建ViewxMVC.JS、ViewxWebformMVC.NET、ViewxResponseMVC.NET、ViewxPushMVC.NET的前后端四MVC模板引擎架构体系（已实现，应用测试中未公布）

#### 安装

```
npm i silis-viewjs
```

> 暂不推荐用npm安排，作者目前很少更新npm，直接在gitee下载

#### 文件大小
|文件名|文件大小|文件说明|
|--|--|--|
|viewx.min.js.zip|3k|js代码压缩 + zip压缩，用于网络要求更高的生产运营环境|
|viewx.min.js|6.8k|js代码压缩，用于生产运营时使用|
|viewx.js|17k|js源代码，用于开发测试时使用|
|jsc.min.js|2.9k|用于兼容低版本浏览器，如：IE5.5-IE8.0|


#### 兼容浏览器版本

| 电脑端 | 浏览器 | 最小版本 |
|-|-|-|
| ![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 |


| 手机端 | 浏览器 | 最小版本 |
|-|-|-|
| ![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 |

> 兼容IE5.5-IE8浏览器，需要引用/lib/jsc.min.js。（如果不需要兼容低版本浏览器，则不需要引用jsc库）

#### 编译原理

1. 通过document.getElementsByClass("vx")，寻找需要编译的标签
2. 通过带"vx-"前缀的属性名，寻找需要编译的属性
3. 通过document.getElementsByTagName("vx")，寻找需要编译的文本内容

> viewx的编译原理，使得动态编译很快，可以考虑不需要预编译。

#### 动态编译嵌套模板

> 可能一些特殊的开发场景，使用动态编译比预编译更方便。<br>
> 如：把自定义模板存放在表中，通过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

```
<!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>
```
示例文件：/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: {
                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>
```
示例文件：/demo/set-data.html


#### page observers
演示通过page的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/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>
```
示例文件：/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: {
                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}}">, 奇数行</span>
            <span class="vx" vx-if="{{index%2==1}}">, 偶数行</span>
        </div>

    </div>

</body>
</html>
```
示例文件：/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: {
                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>
```
示例文件：/demo/if.html

#### 绑定事件

> catch指阻止冒泡的绑定事件

```
<!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: "Hi," + e.currentTarget.dataset.name })
            }
        })
    </script>
</head>
<body>

    <div class="vx" catch-click="myClick" data-name="Tom"><vx>{{output}}</vx></div>
    
</body>
</html>
```
示例文件：/demo/catch-event.html

> bind指带冒泡的绑定事件

```
<!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: "Hi," + 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:"hello"
            },
            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

#### 自定义组件

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

示例文件：/demo/component.html