百度前端技术学院是一个为大学生创办的免费的前端技术实践、分享、交流平台。由百度校园招聘组、百度校园品牌部、百度前端技术部以及多个百度的前端团队联合创办。学院组织了一批百度在职工程师,精心编写了数十个实践编码任务,将技术知识点系统有机地串联在各个充满趣味与挑战的任务中,同学们通过实际地编码练习来掌握知识,再辅以互相评价、学习笔记等方式,加深对于学习内容的理解。在过去的三年中,百度前端技术学院累积吸引了上万名同学参加,并且有数十名同学在学习后,顺利加入了百度,成为了百度的前端工程师。

动态数据绑定(一)

进阶

人数1008人在学习该课程,有383人已经完成该课程

时间平均用时2.5

课程概述

作业提交截止时间:04-24

任务目的

  1. 了解 getter 和 setter
  2. 了解 new

任务描述

这是“动态数据绑定”系列的第一题。

我之前经常使用 Vue,后来不满足于仅仅使用它,我想了解其内部实现原理,所以就尝试学习其源码,获益匪浅。所以,如果你跟我一样,希望挑战这高难度的事情,那就开启这一系列吧!

我们从最简单的开始。

其中,动态数据绑定就是 Vue 最为基础,最为有用的一个功能。这个系列将分成5部分,一步一步来理解和实现这一功能。

ok,我们从最简单的开始。给定任意一个对象,如何监听其属性的读取与变化?也就是说,如何知道程序访问了对象的哪个属性,又改变了哪个属性? 举个例子。

let app1 = new Observer({
  name: 'youngwind',
  age: 25
});

let app2 = new Observer({
  university: 'bupt',
  major: 'computer'
});

// 要实现的结果如下:
app1.data.name // 你访问了 name
app.data.age = 100;  // 你设置了 age,新的值为100
app2.data.university // 你访问了 university
app2.data.major = 'science'  // 你设置了 major,新的值为 science

请实现这样的一个 Observer,要求如下:

  1. 传入参数只考虑对象,不考虑数组。
  2. new Observer返回一个对象,其 data 属性要能够访问到传递进去的对象。
  3. 通过 data 访问属性和设置属性的时候,均能打印出右侧对应的信息。

任务注意事项

  1. 不能使用任何第三方的库
  2. 程序执行环境为浏览器

在线学习参考资料

学员提交的作业 (-)
学员名称提交时间提交的代码预览效果评价数平均得分操作
课程优秀学习笔记

暂无优秀学习笔记~