ban.min.js下载
eg.
<!--引用腾讯的模板引擎--> <script src="~/Content/plugins/artTemplate/template-simple.js"></script> <!--双向绑定的js--> <script src="~/Content/plugins/ban.min.js"></script>
eg.
<!--引用腾讯的模板引擎--> <script src="~/Content/plugins/artTemplate/template-simple.js"></script> <!--双向绑定的js--> <script src="~/Content/plugins/ban.min.js"></script>
参数 | 描述 |
---|---|
el | 监听扫描元素的开始节点,id选择器,如:#fm,默认body开始扫描 |
data | 监听的数据对象 |
watchinfo | 监听属性值变更的时候,自定义函数 |
<script type="text/javascript"> var ban = new Ban({ el:"",//监听的元素开始节点,id选择器,如:#fm,默认body data: { //这里自定义属性 //如xx:"" , //如xx:"" , }, watchinfo:"",监听属性值变化的时候自定义的函数 }); </script>eg.
<div id='list'></div> var ban = new Ban({ el:"#list", data: { //自定义属性 username:"",//姓名 IsFlag:"",//是否选中 Search: { Id: 0, SearchKey PageSize: 20, Page: 1 }, //搜索条件 Lst: [ { Id: 1, AppKey: "code1", AppName: "测试产品1" }, { Id: 2, AppKey: "code2", AppName: "测试产品2" }, { Id: 3, AppKey: "code3", AppName: "测试产品3" }, { Id: 4, AppKey: "code4", AppName: "测试产品4" }, { Id: 5, AppKey: "code5", AppName: "测试产品5" }, { Id: 6, AppKey: "code6", AppName: "测试产品6" }, ], //列表集合, }, watchinfo:"P.ValChange",//监听值变更 });
姓名:{{username}}
<span>姓名:</span><span><input class="layui-input" bf-model="username"/></span>
<span>姓名:</span><span><input type="checkbox" data-val="1" bf-model="IsFlag"/></span>
<span>姓名:</span><span><input class="layui-input" bf-html="username"/></span>
<span>姓名:</span><span><input bf-class="layui-input"/></span>
参数 | 描述 |
---|---|
keyname | 绑定的对象名称 |
_key | 绑定的对象的属性名称 |
value | 变更的属性值 |
pk | 主键,只对数组对象有用 |
eg.
<div id='list'></div> var ban = new Ban({ el:"#list", data: { //自定义属性 username:"",//姓名 }, watchinfo:"P.ValChange",//监听值变更 }); var P={ ValChange:(keyname, _key, value, pk){//监听值变更会传4个参数数 } }
id | 产品编号 | 产品名称 |
---|
js双向绑定采用自主编运用proxy代理的形式实现的,vue3也是通过proxy代理的。
我们知道vue主要的是双向绑定,vue2.0和3.0使用的形式还有所区别:
vue2 的双向数据绑定是利⽤ES5 的⼀个 API ,Object.definePropert()对数据进⾏劫持 结合 发布订阅模式的⽅式来实现的。
vue3 中使⽤了 es6 的 ProxyAPI 对数据代理,通过 reactive() 函数给每⼀个对象都包⼀层 Proxy,通过 Proxy 监听属性的变化,从⽽ 实现对数据的监控。
这⾥是引相⽐于vue2版本,使⽤proxy的优势如下 1.defineProperty只能监听某个属性,不能对全对象监听 可以省去for in、闭包等内容来提升效率(直接绑定整个对象即可) 2.可以监听数组,不⽤再去单独的对数组做特异性操作,通过Proxy可以直接拦截所有对象类型数据的操作,完美⽀持对数组的监听
在使用vue2.0,3.0的时候博主发现几个场景写起来比较繁琐:
1.当属性字段值变化的时候,vue的监听watch写起来就比较痛苦了
2.模板渲染的时候,想自定义方法且传参的时候,vue的不太支持,
博主自己写了个简版的双向绑定,再配合腾讯的模板引擎结合起来 ,基本实现可以不写jquery代码
<!--引用腾讯的模板引擎--> <script src="~/Content/plugins/artTemplate/template-simple.js"></script> <!--双向绑定的js--> <script src="~/Content/plugins/ban.min.js"></script>
var ban = new Ban({ data: { Search: { Id: 0, AppKey: "", AppName: '', PageSize: 20, Page: 1 }, //搜索条件 Lst: [ { Id: 1, AppKey: "code1", AppName: "测试产品1" }, { Id: 2, AppKey: "code2", AppName: "测试产品2" }, { Id: 3, AppKey: "code3", AppName: "测试产品3" }, { Id: 4, AppKey: "code4", AppName: "测试产品4" }, { Id: 5, AppKey: "code5", AppName: "测试产品5" }, { Id: 6, AppKey: "code6", AppName: "测试产品6" }, ], //列表集合, } }); var P = { Search: () => { var lst = []; ban.$data.Lst.forEach((sub, i) => { var flag = true; if (ban.$data.Search.Id > 0) { flag = false; if (sub.Id == ban.$data.Search.Id) { flag = true; } } if (ban.$data.Search.AppKey.length > 0) { flag = false; if (sub.AppKey == ban.$data.Search.AppKey) { flag = true; } } if (ban.$data.Search.AppName.length > 0) { flag = false; if (sub.AppName == ban.$data.Search.AppName) { flag = true; } } if (flag) lst.push(sub); }); //渲染数据 var html = template('tpl_lsttable', { lst: lst }); document.querySelector('#listtable').innerHTML = html; }, InitData: () => { //渲染数据 var html = template('tpl_lsttable', { lst: JSON.parse(JSON.stringify(ban.$data.Lst)) }); document.querySelector('#listtable').innerHTML = html; } } $(function () { P.InitData(); });