微信小程序开发 day06、day07 - event.currentTarget、data-*、自定义数据属性、组件间通信 防抖、搜索页设计

一、day06 event.currentTarget、data-*、自定义数据属性、组件间通信

1、浏览器事件中 event 的 target、 currentTarget 有什么不同？

• target是当前用户点击的最顶层视图
• currentTarget是代码中事件绑定的视图

2、执行代码 console.log(event) ，为什么从chrome控制台我们看到currentTarget的属性是null？然而代码中 console.log(event.currentTarget) 就能拿到正确的值呢？

• 首先得理解【chrome的控制台打印原理】，在打印一个对象时，会先打印一个对象的快照。

 > PointerEvent {isTrusted: true, pointerId: 1, width: 1, height: 1, pressure: 0, …}

• 【这时候点击 “>” 这个展开三角符号】此时会去内存中拿该对象【此刻】在内存中的属性值，并不是代码 console.log(event) 执行时的值。

v PointerEvent {isTrusted: true, pointerId: 1, width: 1, height: 1, pressure: 0, …}
isTrusted: true
altKey: false
currentTarget: null

• 【猜测】应该是currentTarget只在事件发生时存在于event对象中，随后就被移除了。
• 【代码论证法】在 console.log(event) 这句代码后面加入 debugger; 代码，此刻就能看到currentTarget的正确值。
• 【文献论据】在MDN上找到如下提示，解释了最终原因，也验证了我们的猜想。

Note: The value of event.currentTarget is only available while the event is being handled. If you console.log() the event object, storing it in a variable, and then look for the currentTarget key in the console, its value will be null.
Instead, you should either use console.log(event.currentTarget) to be able to view it in the console or use the debugger statement, which will pause the execution of your code thus showing you the value of event.currentTarget.

3、通过执行下面代码，分别在setTimeout之前和之后观察【chrome控制台日志】，加深理解。

var foo = {};
for (var i = 0; i < 100; i++) {
  foo["longprefix" + i] = i;
}
console.log(foo);
setTimeout(() => {
  console.log("====");
  foo.longprefix1 = "abc";
}, 5000);

4、btn 中的 data-* 是什么语法？如何在JavaScript代码中获取？

• 【是什么】data-* 是自定义数据属性语法，它富裕我们在所有HTML元素上嵌入自定义属性的能力，并且可以通过脚本在 HTML 与 DOM 表现直接进行专有数据的交换。
• 【获取】event.currentTarget.dataset.tearcherName 即可获得自定的 lsp 值

5、小程序组件内部如何触发外部 的事件？

Component({
  properties: {},
  methods: {
    onTap: function(){
      var myEventDetail = {} // detail对象，提供给事件监听函数
      var myEventOption = {} // 触发事件的选项
      this.triggerEvent('myevent', myEventDetail, myEventOption)
    }
  }
})

• 组件间通信与事件，微信开发者文档

一、day07 防抖、搜索页设计

1、如下搜索页面做增加防抖操作，主要目的是什么？

image.png

• 【保护服务器，减少低效的请求】

2、小程序里面有官方富文本组件吗？

• 【有】rich-text

3、如下页面，要实现搜索条固定，搜索结果滚动的布局，怎么设计？

image.png

// page页面
page {
  padding-top: 56px;
}

// 搜索框
.search {
  position: fixed;
  top: 0;
  left: 20rpx;
  right: 20rpx;
}