您的位置：首页 > 移动开发 > Objective-C

Object.defineProperty(obj,prop,descriptor)使用

2017-08-18 10:11 579 查看 
初步实现了数据自动映射到html中，动态修改对象数据也很自动更新到html。提供addProps方法-添加新增属性并初始化自动监听
代码如下：


1、abserve.js：包含数据监听实现、类似jquery的find函数--querySelector实现等（数据深度迭代版）

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>javascript test</title>
<link rel="stylesheet" type="text/css" href="css/metro/easyui.css">
<link rel="stylesheet" type="text/css" href="css/icon.css">
<link rel="stylesheet" type="text/css" href="css/demo.css">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.easyui.min.js"></script>
</head>
<body>
<div class="easyui-panel" title="数据驱动dom更新" style="width:500px">
<div style="padding:10px 60px 20px 60px">
<h1>F12 console 中输入：a.user.name = 'jack'; <br>
可以看到界面也会更新数据，其他更新参考脚本。</h1>
<form id="ff" class="easyui-form" method="post" data-options="novalidate:true" action="save.do">
<table cellpadding="5">
<tr>
<td>对象的名称:</td>
<td><input  type="text" name="user.name" class="easyui-textbox" ></input></td>
</tr>
<tr>
<td>对象的年龄:</td>
<td><input name="user.age" class="easyui-numberbox"></td>
</tr>
<tr>
<td>对象的描述:</td>
<td>
<input  name="user.addr" class="easyui-textbox" data-options="height:60,multiline:true">
</td>
</tr>

<tr>
<td>纯变量数量:</td>
<td><input name="count" class="easyui-numberspinner"></td>
</tr>
<tr>
<td>纯变量选项:</td>
<td>
<select class="easyui-combobox" name="dept" style="width:150px;">
<option value="1">aitem1</option>
<option value="2">bitem2</option>
<option value="3">bitem3</option>
<option value="4">ditem4</option>
<option value="5">eitem5</option>
<option value="6">eitem6</option>
<option value="7">eitem7</option>
<option value="8">eitem8</option>
<option value="9">eitem9</option>
</select>
</td>
</tr>

<tr>
<td>menber-0-name:</td>
<td><input name="menbers[0].id.code" class="easyui-textbox"></td>
</tr>
<tr>
<td>menber-0-age:</td>
<td>
<input  name="menbers[0].age" class="easyui-numberbox">
</td>
</tr>
<tr>
<td>menber-1-name:</td>
<td><input name="menbers[1].name" class="easyui-textbox"></td>
</tr>
<tr>
<td>menber-1-age:</td>
<td>
<input  name="menbers[1].childs[0].name" class="easyui-textbox">
</td>
</tr>
<tr>
<td>danomick:</td>
<td>
<input  name="menbers[0].addrs" class="easyui-textbox">
</td>
</tr>
<tr>
<td>danomick user:</td>
<td>
<input  name="user.email" class="easyui-textbox">
</td>
</tr>
<tr>
<td>danomick a:</td>
<td>
<input  name="phones" class="easyui-numberbox">
</td>
</tr>
</table>
</form>
</div>
</div>
<script type="text/javascript" src="render.js"></script>
<script>
"use strict"
/* 扩展对easyui组件设值支持 */
Vue.prototype.setValue = function (value) {
var $ctn = $(this).parent().prev(), ctnClass = $ctn.attr("class"),
itemFn = ctnClass.match(/easyui-(\w+)/),itemFn = itemFn[1];
$ctn[itemFn]('setValue',value);
};
/* 组件值反射到data中机制构建 */
$.parser.onComplete = function(context){
try {
$('[type=hidden].textbox-value').each(function(){
var prev = $(this).prev(), $ctn = $(this).parent().prev(), ctnClass = $ctn.attr("class"),
itemFn = ctnClass.match(/easyui-(\w+)/),itemFn = itemFn[1];
if (prev) {
prev.off("blur.prev");
prev.on("blur.prev", function() {
var item = $(this).next()[0];
setTimeout(function(){
item.value = $ctn[itemFn]('getValue');
_.htmlToData.apply(item);
},150);
});
}
});
} catch (e) {}
}
/* 模仿Vue */
var a = new Vue({
el: '#ff', /* 指定扫描的容器 */
data:{ /* 要处理的数据 */
user:{
name: 'json',
age: 26,
addr: 'usa'
},
menbers:[],
count: 10,
dept: 6
}
});
/* 覆盖原有属性会自动建立映射关系 */
a.menbers = [
{
mName: 'jack',
age: 26,
id: {
code: 'idCard'
}
},
{
name: 'timy',
age: 20,
childs:[
{name: 'kimi'},
{name: 'coco'}
]
}
];
/* 针对没有的属性提供属性添加API(API会建立映射关系) */
a.addProps({email:'czm@139.com'},'user');
a.addProps({addrs:'lin ken street'},'data.menbers[0]');
a.addProps({phones:13900139000});
$("#scriptContent").text(JSON.stringify(a.data));
/* 模拟数据更新 */
// var int = setInterval(function () {
//   a.user.age = Math.round(Math.random()*100);
//   a.data.user.addr = new Date();
//   a.count = Math.round(Math.random()*10000);
//   a.data.dept = Math.round(Math.random()*8 + 1);
// },1500);
</script>
</body>
</html>


View Code

后续会逐步更新 ... ...
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航