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

logo

介绍

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

产生背景

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

特点：

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

比较：

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

能具体做什么？

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

未公布细节

构建基于ViewxJS的前端自定义组件（已实现50多个控件，应用测试中未公布，代号为ViewxUI.JS）
构建基于ViewxJS的后端ASP.NET控件（已实现50多个控件，应用测试中未公布，代号为ViewxUI.NET）
构建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	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:"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

十里 / ViewxJS

介绍

产生背景

特点：

比较：

能具体做什么？

未公布细节

安装

文件大小

兼容浏览器版本

编译原理

动态编译嵌套模板

示例

say hello

page onload

setData

page observers

循环

条件

绑定事件

双向绑定

自定义组件

简介

发行版 (26)

贡献者

近期动态

十里 / ViewxJS .gitee-modal { width: 500px !important; }

介绍

产生背景

特点：

比较：

能具体做什么？

未公布细节

安装

文件大小

兼容浏览器版本

编译原理

动态编译嵌套模板

示例

say hello

page onload

setData

page observers

循环

条件

绑定事件

双向绑定

自定义组件

简介

发行版 (26)

开源评估指数源自 OSS-Compass 评估体系，评估体系围绕以下三个维度对项目展开评估：

贡献者

近期动态

搜索帮助

十里 / ViewxJS