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

动态数据绑定(三)

困难

人数212人在学习该课程,有159人已经完成该课程

时间平均用时2.0

关键词Vue

课程概述

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

任务目的

  • 了解事件传播机制

任务描述

这是“动态数据绑定”的第三题。在第二题的基础上,我们再多考虑一个问题:"深层次数据变化如何逐层往上传播"。举个例子。

let app2 = new Observer({
    name: {
        firstName: 'shaofeng',
        lastName: 'liang'
    },
    age: 25
});

app2.$watch('name', function (newName) {
    console.log('我的姓名发生了变化,可能是姓氏变了,也可能是名字变了。')
});

app2.data.name.firstName = 'hahaha';
// 输出:我的姓名发生了变化,可能是姓氏变了,也可能是名字变了。
app2.data.name.lastName = 'blablabla';
// 输出:我的姓名发生了变化,可能是姓氏变了,也可能是名字变了。

观察到了吗?firstName 和 lastName 作为 name 的属性,其中任意一个发生变化,都会得出以下结论:"name 发生了变化。"这种机制符合”事件传播“机制,方向是从底层往上逐层传播到顶层。
这现象想必你们也见过,比如:“点击某一个DOM元素,相当于也其父元素和其所有祖先元素。”(当然,你可以手动禁止事件传播) 所以,这里的本质是:"浏览器内部实现了一个事件传播的机制",你有信心自己实现一个吗?

任务注意事项

  1. 不能使用任何第三方的库
  2. 程序执行环境为浏览器
学员提交的作业 (-)
学员名称提交时间提交的代码预览效果评价数平均得分操作
课程优秀学习笔记
标题发布时间浏览量点赞量
大神们求轻喷 一个可行方案2017-03-02 13:5420112
封装了 一个fox-listener module2017-02-28 11:4820742
点击查看更多课程优秀笔记