ViewxJS是一款构建用户界面的JS框架,可适用于前后端双MVC模板引擎的整合创新的有利条件,继承微信小程序模板引擎的精简易学、功能俱全的优良特质,并始终惯彻地为开发者考虑体积大小、运行速度、兼容性等技术性需求,以达到最佳的技术适用性与创新性条件。
比较项 | viewx | vue |
---|---|---|
动态编译 | 支持 | 支持 |
动态编译效率 | 更快 | 快 |
运行效率 | 快 | 更快 |
文件大小 | 8k | 30k-100k |
自定义组件 | 支持 | 支持 |
兼容IE5-8 | 支持 | 不支持 |
.net控件与viewx组件融合 | 支持 | 不支持 |
.net mvc与viewx mvc融合 | 支持 | 不支持 |
MVC | 支持 | 支持 |
MVVM(双向绑定) | 支持 | 支持 |
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库)
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
<!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
演示页面的加载事件,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控制数据模型更新视图。
<!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属性,监听页面数据变化
<!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
<!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
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。
1. 开源生态
2. 协作、人、软件
3. 评估模型