草庐IT

#yyds干货盘点# 前端歌谣的刷题之路-第一百零九题-双向数据绑定

前端歌谣 2023-03-28 原文

前言

我是歌谣 我有个兄弟 巅峰的时候排名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“属性同步被改变，触发页面的重新渲染


之路盘点spancolorstyle属性值html数据同步JavaScript前端开发yyds干货盘点

有关#yyds干货盘点# 前端歌谣的刷题之路-第一百零九题-双向数据绑定的更多相关文章

  1. ruby-on-rails - 创建 ruby​​ 数据库时惰性符号绑定(bind)失败 - 2

    我正在尝试在Rails上安装ruby​​，到目前为止一切都已安装，但是当我尝试使用rakedb:create创建数据库时，我收到一个奇怪的错误:dyld:lazysymbolbindingfailed:Symbolnotfound:_mysql_get_client_infoReferencedfrom:/Library/Ruby/Gems/1.8/gems/mysql2-0.3.11/lib/mysql2/mysql2.bundleExpectedin:flatnamespacedyld:Symbolnotfound:_mysql_get_client_infoReferencedf

  2. ruby-on-rails - 在 Rails 应用程序的前端获取实时日志 - 2

    在Rails3.x应用程序中，我正在使用net::ssh并向远程pc运行一些命令。我想向用户的浏览器显示实时日志。比如，如果两个命令在net中运行::ssh执行即echo"Hello",echo"Bye"被传递然后"Hello"应该在执行后立即显示在浏览器中。这是代码我在ruby​​onrails应用程序中使用ssh连接和运行命令Net::SSH.start(@servers['local'],@machine_name,:password=>@machine_pwd,:timeout=>30)do|ssh|ssh.open_channeldo|channel|channel.requ

  3. ruby - 如何在 Ruby 中创建双向 SSL 套接字 - 2

    我正在构建一个连接到服务器并等待数据的客户端Ruby库，但也允许用户通过调用方法发送数据。我使用的机制是有一个初始化套接字对的类，如下所示:definitialize@pipe_r,@pipe_w=Socket.pair(:UNIX,:STREAM,0)end我允许开发人员调用以将数据发送到服务器的方法如下所示:defsend(data)@pipe_w.write(data)@pipe_w.flushend然后我在一个单独的线程中有一个循环，我从连接到服务器的socket和@pipe_r中选择:defsocket_loopThread.newdosocket=TCPSocket.new

  4. ruby - 如何在转换器插件中访问页面属性(YAML 前端) - 2

    我正在为Jekyll编写一个转换器插件，需要访问一些页眉(YAML前端)属性。只有内容被传递给主要的转换器方法，似乎无法访问上下文。例子:moduleJekyllclassUpcaseConverter关于如何在转换器插件中访问页眉数据有什么想法吗？ 最佳答案 基于Jekyll源代码，无法在转换器中检索YAML前端内容。根据您的情况，我看到了两种可行的解决方案。您的文件扩展名可以具有足够的描述性，以提供您本应包含在前言中的信息。看起来Converter插件的设计就是这么基本的。如果修改Jekyll是一个选项，您可以更改Convert

  5. 焕新古文化传承之路，AI为古彝文识别赋能 - 2

    目录1古彝文与古典保护2古文识别的挑战2.1西文与汉文OCR2.2古彝文识别难点3合合信息：古彝文保护新思路3.1图像矫正3.2图像增强3.3语义理解3.4工程技巧4总结1古彝文与古典保护彝文指的是云南、贵州、四川等地的彝族人使用的文字，区别于现代意义上的彝文，古彝文指的是在民间流通使用的原生态彝文，多达87046字。古彝文的起源距今至少数千年，是世界上最古老的文字之一。对古彝文字集研究有助于理解尚未被翻译成汉文、用字尚未规范化的古籍，更深层、透彻地作用于传统文化保护。古彝文字义对照图（网络资料+邵文苑供图）古籍是不可再生的宝贵资源，应当得到妥善保护。中国的古籍在历史上迭经水火兵燹等自然灾害、

  6. ruby-on-rails - Rails - 双向 "friendship"模型(续) - 2

    这是这个问题的延续:OriginalQuestion(SO)这个问题的答案涉及以下一组模型:classUser:friendships#...endclassFriendship'User',:foreign_key=>'friend_id'end如果说，我有一个用户并且我想获得他或她的id是友谊模型上的:user_idFK的所有“友谊”，这很好用。但是，当我运行类似的东西时@user.friendships.friends我希望它返回该用户是友谊中的:user或:friend的所有用户记录-因此，换句话说，返回该用户参与的所有友谊。希望以上内容有意义。我对Rails还是很陌生，希望有

  7. “网安三人行”盘点：软件供应链安全的那些事儿 - 2

    2022年伊始，默安科技联合数世咨询举办以“软件供应链安全的时与势”为主题的访谈活动，由数世咨询创始人李少鹏主持，邀请贝壳安全研发负责人李文鹏、北京邮电大学副教授张文博、默安科技副总裁沈锡镛三位行业大咖做客网安小酒馆，从产业、企业、学术的不同维度，共同探讨软件供应链安全建设的新思路，为业界呈现了一场开年网安盛宴。随着全球软件供应链安全事件频发，软件供应链安全逐渐成为业界关注焦点，也成为影响国家重要信息系统安全与关键信息基础设施安全的重要因素，以及网络安全保障体系和能力建设的重要环节。嘉宾们围绕软件供应链安全发展的主要驱动力、关基行业中的实施现状和落地难点、产学研成果转化、软件供应链安全的重要性

  8. 【数据结构和算法】实现带头双向循环链表（最复杂的链表） - 2

    前文，我们实现了认识了链表这一结构，并实现了无头单向非循环链表，接下来我们实现另一种常用的链表结构，带头双向循环链表。如有仍不了解单向链表的，请看这一篇文章(7条消息)【数据结构和算法】认识线性表中的链表，并实现单向链表_小王学代码的博客-CSDN博客目录前言一、带头双向循环链表是什么？二、实现带头双向循环链表1.结构体和要实现函数2.初始化和打印链表3.头插和尾插4.头删和尾删5.查找和返回结点个数6.在pos位置之前插入结点7.删除指定pos结点8.摧毁链表三、完整代码1.DSLinkList.h2.DSLinkList.c3.test.c总结前言带头双向循环链表，是链表中最为复杂的一种结

  9. 前端实现文件上传（点击+拖拽） - 2

    一、简介之前在Vue项目中使用过element的上传组件，实现了点击上传+拖拽上传的两种上传功能。然后我就在想是否可以通过原生的html+js来实现文件的点击上传和拖拽上传，说干就干。首先是点击获取上传文件自然没的说，只需要借助input标签即可，但原生的点击上传按钮，实在是过于简陋，所以我的想法是通过一个div，模拟成上传按钮，然后监听其点击事件，通过input.click()去模拟点击真正的上传元素。然后是拖拽获取上传文件，这个稍有难度，我的想法是通过HTML5新增的drag拖放API+dataTransfer来实现文件的拖拽获取，但是由于是html5新增的，所以可能在某些低版本IE浏览器

  10. 【思考】聊聊低代码的实践之路 - 2

    文章目录背景一、最初的疑惑二、简单聊聊原理三、组织内实践案例四、实践带来的反思五、最后聊几句问题背景这个概念由来已久，但是在国内兴起，是最近几年；低代码即Low-Code；指提供可视化开发环境，可以用来创建和管理软件应用；简单的说就是可以通过各种组件的拖拽，实现页面的创建，交互流程和逻辑，以及数据层面的管理，更加高效的实现需求；早先在数据公司时；见识过低代码的应用，也参与过部分研发，比如元数据平台，BI分析等；不过，当时还是以数据管理的工具来定义项目，并非是低代码；从「2020年底」开始；实际上，那个时间节点，低代码平台的应用已经形成趋势了；现在的公司，将低代码平台的使用规划到业务体系中；后来

随机推荐