十、程序思维训练

（一）歌词滚动

1.页面功能组成

• 页面初始化
• 交互事件
  • 监听什么事件
  • 如何处理

（二）王者荣耀官网英雄查询

1.英雄对象属性

1）pay_type

• 该值为 10 时，表示本周免费
• 该值为 11 时，表示新手推荐

2）hero_type, hero_type2

• 有些英雄同时具有两种英雄类型
• 例如 { hero_type: 6, hero_type2: 2} 表示该英雄既是一个辅助，也是一个法师
  • 1-战士
  • 2-法师
  • 3-坦克
  • 4-刺客
  • 5-射手
  • 6-辅助

2.自定义属性

1）设置自定义属性

• HTML5 规范：自定义属性必须以 data- 开头

<div data-type="type1">文本</div>

2）获取自定义属性值

• HTML5 API：dataset
• 当且仅当属性名以 data- 开头时有效

const type = document.querySelector("div").getAttribute("data-type");
// 或者
const type = document.querySelector("div").dataset.type;

（三）美团省市级联

1.grid 布局

div {
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: repeat(auto-fit, 20px);
  row-gap: 6px;
  column-gap: 26px;
  justify-items: left;
}

2.DRY 原则

• Don't repeat yourself
• 优先注册多元素的公共处理事件