初步实现了数据自动映射到html中，动态修改对象数据也很自动更新到html。提供addProps方法-添加新增属性并初始化自动监听
代码如下：
1、abserve.js：包含数据监听实现、类似jquery的find函数--querySelector实现等（数据深度迭代版）
(function(window) {
var methods = {
htmlToData: function(ctner) { // html反向映射到data
var pName = this.name,
vName = ctner ? ctner.getAttribute('varibleName') : null;
if (vName) {} else {
for (let key in window) {
if (typeof window[key] == 'object') {
try {
var rObj = methods.getPropByPath(window[key], pName);
if (rObj && rObj.v != undefined) {
vName = key;
if (ctner) ctner.setAttribute('varibleName', key);
break;
}
} catch (e) {}
}
}
}
var pPath = vName + '.' + pName + '=\'' + this.value + '\'';
console.log(pPath);
eval(pPath);
},
parseHtml: function({
key, value, container, fn
}) {
var inputs = methods.querySelector("[name=" + key + "]", container);
inputs.forEach(function(item, index, array) {
try { /* callback 提供设值接口 */
fn.apply(item, [value]);
} catch (e) {
item.value = value;
}
$(item).off("blur.render");
$(item).on("blur.render", function() {
methods.htmlToData.apply(this, [container]);
});
});
},
/*查找子节点，用法类似jquery的find函数，仅支持id,class,attr选择器，返回匹配的元素集*/
querySelector: function find(selector, el) {
var el = el || document;
var m = selector.match(/([#\.\[])([\w\W]+)/i);
var type, key, attrName, result = [];
if (m) { /* 正则判断选择器类型 */
if (m[1] == ".") {
type = "class";
key = m[2];
} else if (m[1] == "#") {
type = "id";
key = m[2];
}
if (m[1] == "[") {
type = "attr";
m = m[2].match(/(\w+)=((\w+(\[\d+\])*\.*)+)/i);
attrName = m[1];
key = m[2];
}
} else {
type = "tag";
key = selector;
}
function findChild(node) {
var c;
for (var i = 0; i < node.childNodes.length; i++) {
c = node.childNodes[i];
if (type == "class" && c.className == key) result.push(c);
else if (type == "id" && c.id == key) {
result.push(c);
continue;
} else if (type == "attr" && c.getAttribute && c.getAttribute(
attrName) == key) {
result.push(c);
continue;
} else if (type == "tag" && c.tagName && c.tagName.toLowerCase() ==
key) {
result.push(c);
continue;
}
findChild(c);
}
}
findChild(el);
return result;
},
getPropByPath: function(obj, path) {
let tempObj = obj;
path = path.replace(/\[(\w+)\]/g, '.$1');
path = path.replace(/^\./, '');
let keyArr = path.split('.');
let i = 0;
for (let len = keyArr.length; i < len - 1; ++i) {
let key = keyArr[i];
if (key in tempObj) tempObj = tempObj[key];
else {
throw new Error(
'[render warn]: please transfer a valid prop path to form item!'
);
}
}
return {
o: tempObj,
k: keyArr[i],
v: tempObj[keyArr[i]]
};
},
_copyProps: function(obj, target) {
for (var key in target) obj[key] = target[key];
},
_defProps: function(obj, ctx, key, value, props, path, bool) {
/* prop参数是为了解决二次赋值操作导致key值改变，parseHtml无法获得name名 */
(function(key, prop, props) {
Object.defineProperty(obj, key, {
set: function(newValue) {
if (bool)
methods._addProps(obj[key], newValue, ctx, path);
else key = props[prop] = newValue;
},
get: function() {
return props[prop];
}
});
})(key, key, props);
/* 实现obj.prop 和 obj.data.prop双向更新 */
(function(ctx, key, value, props, path) {
Object.defineProperty(props, key, {
set: function(newValue) {
if (key == newValue) return;
key = newValue;
path = path.replace(/\.*(undefined)*\.+/, '.')
.replace(/\.(\d+)\./g, '[+$1+].').replace(
/[+]/g,
'');
var propPath = path.slice(path.indexOf('.') + 1);
if (propPath.indexOf('data.') == 0)
propPath = propPath.replace('data.', '');
methods.parseHtml({
key: propPath,
value: newValue,
container: document.querySelector(ctx),
fn: Vue.prototype.setValue
});
},
get: function() {
return key;
}
});
props[key] = value;
})(ctx, key, value, props, path);
},
_addProps: function(obj, props, ctx, path) {
for (var key in props) {
if (typeof props[key] == 'object') {
methods._addProps(obj[key] = {}, props[key], ctx, path +
'.' +
key);
methods._defProps(obj, ctx, key, props[key], props, path +
'.' +
key, true);
} else if (typeof props[key] == 'function') obj[key] = props[
key];
else methods._defProps(obj, ctx, key, props[key], props, path +
'.' + key);
}
return obj;
},
/* obj:目标对象；props:json格式属性；path:属性路径；el:渲染域容器 */
addProps: function(obj, props, path) {
var target = obj;
if (path) target = methods.getPropByPath(obj, path).v;
methods._addProps(target, props, obj.el || 'document', '.' +
path);
}
};
_ = {
addProps: methods.addProps,
getPropByPath: methods.getPropByPath,
querySelector: methods.querySelector,
parseHtml: methods.parseHtml,
htmlToData: methods.htmlToData
};
Vue = function(param) {
methods._copyProps(this, param);
if (this.data) methods._addProps(this, this.data, this.el);
}
Vue.prototype = {
addProps: function(props, path) {
methods.addProps(this, props, path);
}
};
}(window));
2、html代码：（实现对easyui组件的设值，其他组件也可以通过设值接口实现对应设值操作）
<!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>
后续会逐步更新 ... ...