手写JS双向绑定
个人笔记，方便自己看，另外感谢后盾人向军老师，笔记借鉴 后盾人。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>后盾人</title>
</head>
<body>
<input type="text" v-model="content">
<input type="text" v-model="title">
<input type="text" v-model="title">
<h4 v-bind="title">这里也同步更新</h4>
<script>
function View() {
let proxy = new Proxy({}, {
get(obj, property) {
},
set(obj, property, value) {
document.querySelectorAll(`[v-model="${property}"]`).forEach(item => {
item.value = value;
});
document.querySelectorAll(`[v-bind="${property}"]`).forEach(item => {
item.innerHTML = value;
})
},
});
this.init = function () {
let els = document.querySelectorAll('[v-model]');
els.forEach(item => {
item.addEventListener('keyup', function () {
proxy[this.getAttribute('v-model')] = this.value;
})
})
}
}
new View().init();
</script>
</body>
</html>
手写JS表单验证
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
padding: 50px;
background: #34495e;
}
input {
border: solid 10px #ddd;
height: 30px;
}
.error {
border: solid 10px red;
}
</style>
</head>
<body>
<input type="text" validate rule="max:12,min:3" />
<input type="text" validate rule="max:3,isNumber" />
</body>
<script>
class Validate {
max(value, len) {
return value.length < len;
};
min(value, len) {
return value.length > len;
};
isNumber(value) {
return /^\d+$/.test(value);
}
}
function ProxyFactory(target) {
return new Proxy(target, {
get(target, key) {
return target[key];
},
set(target, key, value) {
console.log(value === target[key])
}
})
}
let proxy = ProxyFactory(document.querySelectorAll('[validate]'));
proxy.forEach((item, i) => {
item.addEventListener('keyup', function () {
proxy[i] = this;
})
})
</script>
</html>
JSON的格式转换
let a = {
name: 'why',
age: 19,
// toJSON: function () { //自定义JSON格式，会自动调用该方法
// return true;
// }
}
console.log(JSON.stringify(a))
let b = JSON.stringify(a)
console.log(typeof b) // string
let c = JSON.parse(b, (key, value) => {
// console.log(key);//name,age
// console.log(value);//why,19
if (key === 'age') {
value = '您的年龄是' + value;
}
return value;
})
console.log(c)
\
