Js实现监听数据，单向双向绑定
恕我直言，这个轮子也就是自己玩玩
- 你可能需要项目地址https://github.com/licunzhi/dream_on_sakura_rain/blob/master/html_bind_event/src/main/resources/index/jianting.html
- 单项数据绑定
- 原理
- 单向数据绑定
- 双向后台数据同步
- 整个页面的代码
- 败笔
你可能需要项目地址https://github.com/licunzhi/dream_on_sakura_rain/blob/master/html_bind_event/src/main/resources/index/jianting.html
扣下来项目之后，只要有正确的jquery的地址就OK了希望你玩的开心（如果玩的动的话）
单项数据绑定
原理
监听各种选择框的动态事件一旦发生数据改变直接进行数据的存储，基本的输入类型也就这几种了（样式不太会写 大家凑合看）
因此我在外面定义了一个对象，为了防止出现很多的监听的对象类型，因此这里面的判断的tag和修改的对象都在方法中作为参数传进来。
我要是用嘴说估计就是扯淡，核心的代码展示一下再说吧
单向数据绑定
/**
* @desc 数据的单向绑定,拜托以前的手动采集
*
* @param tag 自定义tag，避免tag冲突
* @param outObject 动态输出对象，需要定义全局对象
* @param defaultValue 默认监听的对象无数据的时候默认值,不传输默认null
*/
function bindWatchEvent(tag, outObject, defaultValue) {
outObject = outObject || {};
//单选 radio
$(`[${tag}]`).each(function () {
if ($.inArray($(this)[0].tagName.toLocaleLowerCase(), ['input', 'textarea']) >= 0 &&
$.inArray($(this)[0].type.toLocaleLowerCase(), ['text', 'textarea']) >= 0) {
$(this).bind('input propertychange', 'textarea', function () {
if ($(this).val()) {
outObject[$(this).attr(tag)] = $(this).val();
} else {
outObject[$(this).attr(tag)] = defaultValue || null;
}
});
} else if ($(this)[0].tagName.toLocaleLowerCase() === 'select') {
$(this).bind('select change', function () {
if ($(this).val()) {
outObject[$(this).attr(tag)] = {
k: $(this).children('option:selected').val(),
v: $(this).children('option:selected').text()
};
} else {
outObject[$(this).attr(tag)] = defaultValue || null;
}
});
} else if ($(this)[0].tagName.toLocaleLowerCase() === 'input' && $(this)[0].type.toLocaleLowerCase() === 'checkbox') {
$(this).on('click', function () {
var tagValue = $(this).attr(tag);
outObject[tagValue] = [];
$('[' + tag + '=' + $(this)[0].getAttribute(tag) + ']').each(function () {
if ($(this)[0].checked) {
outObject[tagValue].push({
k: $(this)[0].getAttribute('k'),
v: $(this)[0].getAttribute('v')
});
}
});
});
} else if ($(this)[0].tagName.toLocaleLowerCase() === 'input' && $(this)[0].type.toLocaleLowerCase() === 'radio') {
$(this).on('click', function () {
if ($(this)[0].checked) {
outObject[$(this).attr(tag)] = {
k: $(this)[0].getAttribute('k'),
v: $(this)[0].getAttribute('v')
};
}
});
}
});
}
双向后台数据同步
/**
* @desc 数据的双向绑定
*
* @param tag 自定义tag，避免tag冲突
* @param inObject 动态输出对象，需要定义全局对象
*/
function bindEachEvent(tag, inObject, outObject) {
var nameArr = [];
$(`[${tag}]`).each(function () {
if ($.inArray($(this).attr(tag), nameArr) >= 0) {
return;
}
nameArr.push($(this).attr(tag));
var tagValue = $(this).attr(tag);
Object.defineProperty(inObject, tagValue, {
get: function () {
return name;
},
set: function (value) {
console.log(tagValue, "--------", value);
$('[' + tag + '="' + tagValue + '"' + ']').each(function () {
if ($.inArray($(this)[0].tagName.toLocaleLowerCase(), ['input', 'textarea']) >= 0 &&
$.inArray($(this)[0].type.toLocaleLowerCase(), ['text', 'textarea']) >= 0) {
$(this).val(inObject[tagValue]);
outObject[tagValue] = $(this).val();
} else if ($(this)[0].tagName.toLocaleLowerCase() === 'select') {
$(this).find(`[value=${value.k}]`).prop('selected', true);
outObject[tagValue] = value;
} else if ($(this)[0].tagName.toLocaleLowerCase() === 'input' && $(this)[0].type.toLocaleLowerCase() === 'checkbox') {
for (var i = 0; i < value.length; i++) {
$(`[${tag}=${tagValue}][k=${value[i].k}]`).prop('checked', true);
}
outObject[tagValue] = value;
} else if ($(this)[0].tagName.toLocaleLowerCase() === 'input' && $(this)[0].type.toLocaleLowerCase() === 'radio') {
$(`[${tag}=${tagValue}][k=${value.k}]`).prop('checked', true);
outObject[tagValue] = value;
}
});
}
});
});
}
整个页面的代码
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<title>监听事件，自定义监听</title>
<!--引入jQuery-->
<script src="../../js/jquery/jquery.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<!--假装写个样式-->
<div style="width: 20%; text-align: center; float: left">
<input type="text" lczer="name">
<hr>
<textarea type="text" lczer="desc"></textarea>
<hr>
<select name="city" lczer="city">
<option value="">请选择</option>
<option value="1">北京</option>
<option value="2">上海</option>
<option value="3">南京</option>
</select>
<hr>
<input type="checkbox" name="hobby" lczer="hobby" k="1" v="篮球">篮球
<input type="checkbox" name="hobby" lczer="hobby" k="2" v="乒乓球">乒乓球
<hr>
<input type="radio" name="drink" lczer="drink" k="1" v="啤酒">啤酒
<input type="radio" name="drink" lczer="drink" k="2" v="牛奶">牛奶
<hr>
<button onclick="see()">我想看看结果</button>
<hr>
<button onclick="city()">city属性被修改</button>
<hr>
<button onclick="hobby()">爱好属性被修改</button>
<hr>
<button onclick="drink()">喝的属性被修改</button>
</div>
<pre>
<div style="width: 50%; height: 600px; border: 1px black solid; float: left" id="resultInfo">
</div>
</pre>
</body>
<script type="text/javascript">
/**
* @desc 数据的单向绑定,拜托以前的手动采集
*
* @param tag 自定义tag，避免tag冲突
* @param outObject 动态输出对象，需要定义全局对象
* @param defaultValue 默认监听的对象无数据的时候默认值,不传输默认null
*/
function bindWatchEvent(tag, outObject, defaultValue) {
outObject = outObject || {};
//单选 radio
$(`[${tag}]`).each(function () {
if ($.inArray($(this)[0].tagName.toLocaleLowerCase(), ['input', 'textarea']) >= 0 &&
$.inArray($(this)[0].type.toLocaleLowerCase(), ['text', 'textarea']) >= 0) {
$(this).bind('input propertychange', 'textarea', function () {
if ($(this).val()) {
outObject[$(this).attr(tag)] = $(this).val();
} else {
outObject[$(this).attr(tag)] = defaultValue || null;
}
});
} else if ($(this)[0].tagName.toLocaleLowerCase() === 'select') {
$(this).bind('select change', function () {
if ($(this).val()) {
outObject[$(this).attr(tag)] = {
k: $(this).children('option:selected').val(),
v: $(this).children('option:selected').text()
};
} else {
outObject[$(this).attr(tag)] = defaultValue || null;
}
});
} else if ($(this)[0].tagName.toLocaleLowerCase() === 'input' && $(this)[0].type.toLocaleLowerCase() === 'checkbox') {
$(this).on('click', function () {
var tagValue = $(this).attr(tag);
outObject[tagValue] = [];
$('[' + tag + '=' + $(this)[0].getAttribute(tag) + ']').each(function () {
if ($(this)[0].checked) {
outObject[tagValue].push({
k: $(this)[0].getAttribute('k'),
v: $(this)[0].getAttribute('v')
});
}
});
});
} else if ($(this)[0].tagName.toLocaleLowerCase() === 'input' && $(this)[0].type.toLocaleLowerCase() === 'radio') {
$(this).on('click', function () {
if ($(this)[0].checked) {
outObject[$(this).attr(tag)] = {
k: $(this)[0].getAttribute('k'),
v: $(this)[0].getAttribute('v')
};
}
});
}
});
}
/**
* @desc 数据的双向绑定
*
* @param tag 自定义tag，避免tag冲突
* @param inObject 动态输出对象，需要定义全局对象
*/
function bindEachEvent(tag, inObject, outObject) {
var nameArr = [];
$(`[${tag}]`).each(function () {
if ($.inArray($(this).attr(tag), nameArr) >= 0) {
return;
}
nameArr.push($(this).attr(tag));
var tagValue = $(this).attr(tag);
Object.defineProperty(inObject, tagValue, {
get: function () {
return name;
},
set: function (value) {
console.log(tagValue, "--------", value);
$('[' + tag + '="' + tagValue + '"' + ']').each(function () {
if ($.inArray($(this)[0].tagName.toLocaleLowerCase(), ['input', 'textarea']) >= 0 &&
$.inArray($(this)[0].type.toLocaleLowerCase(), ['text', 'textarea']) >= 0) {
$(this).val(inObject[tagValue]);
outObject[tagValue] = $(this).val();
} else if ($(this)[0].tagName.toLocaleLowerCase() === 'select') {
$(this).find(`[value=${value.k}]`).prop('selected', true);
outObject[tagValue] = value;
} else if ($(this)[0].tagName.toLocaleLowerCase() === 'input' && $(this)[0].type.toLocaleLowerCase() === 'checkbox') {
for (var i = 0; i < value.length; i++) {
$(`[${tag}=${tagValue}][k=${value[i].k}]`).prop('checked', true);
}
outObject[tagValue] = value;
} else if ($(this)[0].tagName.toLocaleLowerCase() === 'input' && $(this)[0].type.toLocaleLowerCase() === 'radio') {
$(`[${tag}=${tagValue}][k=${value.k}]`).prop('checked', true);
outObject[tagValue] = value;
}
});
}
});
});
}
var outObject = {};
var inObject = {};
$(function () {
bindWatchEvent('lczer', outObject);
bindEachEvent('lczer', inObject, outObject);
});
function see() {
$('#resultInfo').text(JSON.stringify(outObject, null, 4));
}
function city() {
inObject.city = {
k: 2,
v: '上海'
};
}
function hobby() {
inObject.hobby = [
{
k: "1",
v: "篮球"
},
{
k: "2",
v: "乒乓球"
}
]
}
function drink() {
inObject.drink = {
k: "1",
v: "啤酒"
}
}
</script>
</html>
败笔
早就有很多人都实现这个写法了，这个思想也是在很多现在的前端框架中。心太大想学这个又想学那个，心里还想发财梦。
这种绑定时间然而也只是在最基本的html结构中使用而已，除了让自己的代码变得更骚，也是没谁了。
现在的很多前端UI框架，都是内部自带了很多render的方式，因此这个的意义 哎 也就是自己玩玩吧