#yyds干货盘点# 前端歌谣的刷题之路-第一百零九题-双向数据绑定
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了#yyds干货盘点# 前端歌谣的刷题之路-第一百零九题-双向数据绑定相关的知识，希望对你有一定的参考价值。
前言
我是歌谣 我有个兄弟 巅峰的时候排名c站总榜19 叫前端小歌谣 曾经我花了三年的时间创作了他 现在我要用五年的时间超越他 今天又是接近兄弟的一天人生难免坎坷 大不了从头再来 歌谣的意志是永恒的 放弃很容易 但是坚持一定很酷 本题目源自于牛客网 微信公众号前端小歌谣
题目
请补全javascript代码，要求如下：
1. 监听对象属性的变化
2. 当"person"对象属性发生变化时，页面中与该属性相关的数据同步更新
3. 将输入框中的值与"person"的"weight"属性绑定且当输入框的值发生变化时，页面中与该属性相关的数据同步更新
注意：
1. 必须使用Object.defineProperty实现且触发set方法时更新视图
2. 必须使用DOM0级标准事件（oninput）
3. 可以使用预设代码"_render"函数
核心代码
<!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>
<style>ul
list-style: none;
</style>
<body>
<input type="text">
<ul></ul>
<!--
创建”Observe“函数，接收一个对象参数，首先判断该对象参数是否合法，之后通过遍历对象的所有属性进行拦截操作。尽管可以直接使用Object.defineProperty
函数对”person“对象进行拦截，但是可以通过创建”Observe“函数来封装对某个对象的属性劫持功能，之后可以复用此函数。
创建“defineReactive”函数，接收三个参数分别为该对象、对象属性、对象属性值。该函数内部使用Object.defineProperty函数对该对象的属性值进行拦截，
且每当触发set时，调用”render“方法重新渲染视图
给"inp"对象添加”oninput“事件，当输入内容时，”person“的”weight“属性同步被改变，触发页面的重新渲染
-->
<script>var ul = document.querySelector(ul);
var person =
sex: 男,
age: 25,
name: 王大锤,
height: 28,
weight: 32
;
var inp = document.querySelector(input);
inp.value = person.weight;
const _render = () =>
var str = `<li>姓名：<span>$person.name</span></li>
<li>性别：<span>$person.sex</span></li>
<li>年龄：<span>$person.age</span></li>
<li>身高：<span>$person.height</span></li>
<li>体重：<span>$person.weight</span></li>`
ul.innerHTML = str;
inp.value = person.weight;
_render(ul);
// 补全代码
function Observe(target)
if (typeof target !== object || target == null)
return target
for (var key in target)
defineReactive(target, key, target[key])
function defineReactive(target, key, value)
Object.defineProperty(target, key,
get: function ()
return value
,
set: function (newVal)
if (newVal !== value)
value = newVal
_render()
)
Observe(person);
inp.oninput = function ()
person.weight = this.value</script>
</body>
</html>
总结
和监听对象那道题有相似之处 可以对比学习
创建”Observe“函数，接收一个对象参数，首先判断该对象参数是否合法，之后通过遍历对象的所有属性进行拦截操作。尽管可以直接使用Object.defineProperty
函数对”person“对象进行拦截，但是可以通过创建”Observe“函数来封装对某个对象的属性劫持功能，之后可以复用此函数。
创建“defineReactive”函数，接收三个参数分别为该对象、对象属性、对象属性值。该函数内部使用Object.defineProperty函数对该对象的属性值进行拦截，
且每当触发set时，调用”render“方法重新渲染视图
给"inp"对象添加”oninput“事件，当输入内容时，”person“的”weight“属性同步被改变，触发页面的重新渲染
以上是关于#yyds干货盘点# 前端歌谣的刷题之路-第一百零九题-双向数据绑定的主要内容，如果未能解决你的问题，请参考以下文章
#yyds干货盘点# 前端歌谣的刷题之路-第一百三十题-absolute
#yyds干货盘点# 前端歌谣的刷题之路-第一百四十二题-单列布局
#yyds干货盘点# 前端歌谣的刷题之路-第一百五十九题-new
#yyds干货盘点# 前端歌谣的刷题之路-第一百一十六题-数组去重