实训（1）

1.响应式页面

响应式页面一般是移动优先，所以是从小到大的页面写。采用媒体查询或者rem或者flexible.js等等

1. 内容可以采取grid布局

@media screen and (min-width: 1643px) {
  .container-main-items {
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
  }
}

2. template模板
   下面是一个用模板，然后通过fetch请求json数据，渲染替换的一个案例。
   注 let bottomAvatarCover = items.User.avatar || items.User.weixin_code || items.User.alipay_code
   （表示其中一个不符合就走下一个）

 <script type="text/template" id="item">
      <div class="item">
           <span> <a href="javascript:;"> <img src="{{imgsCover}}" alt="imgsCover"> </a></span>
           <div class="list-label">
               <div class="label-left">
                  <div class="avatar-img">
                    <img src="{{avatarImg}}" alt="avartar">
                    <div class="avatar-name">{{avartarName}}</div>
                  </div>
                   <div class="level-container">{{levelContainer}}</div>
               </div>
      </div>
    </script>
 async function run() {
  // 等待异步请求的json数据，通过泛型标记返回的数据类型为 ISong[]
  let contents = await request.get<Lsit[]>('data/task.json')
  let items = document.getElementById('item').innerHTML
  console.log(items);
  let itemsList=contents
  .map(v => {
    let cover = v.cover
   ...
    let result = items.replace('{{imgsCover}}', cover)
  ...
    .replace('{{ViewNum}}', views)
     
    return result
  })
  .join('')
  document.querySelector('.container-main-items').innerHTML = itemsList
}   
// 定义一个基本的异步网络请求方法
async function request<T>(method: string, url: string) {
  let res = await fetch(url, {
    method,
  })
  let json: T = await res.json()
  return json
}

// 导出一个简单的GET请求方法
export function get<T>(url: string) {
  return request<T>('GET', url)
}

2. 本地存储localStorage

1. 如果重新读取或存储（数组）被覆盖怎么办？
   在每次存之前应该取出来一下，然后和新的数据一起存进去，这样就不会出现被覆盖的情况

3.展开运算符

 let arr1 = [1, 3, 5, 7, 9]
    let arr2 = [2, 4, 6, 8, 10]
    console.log(...arr1) //展开一个数组 1  3 5 7 9
    let arr3 = [...arr1, ...arr2] //连接数组
    console.log(arr3) //[1, 3, 5, 7, 9, 2, 4, 6, 8, 10]
    //在函数中使用
    function sum(...numbers) {
      return numbers.reduce((pre, next) => pre + next, 0)
    }
    console.log(sum(1, 2))//3
    //构造字面量对象时使用展开语法
    let person = { name: '你好', age: 18 }
    let person2 = { ...person } //复制一个对象
    console.log(person2)
    //   console.log(...person)//报错，展开运算符不能展开对象
    console.log()
    let { name, age } = person//解构赋值
    console.log(name)
    //复制对象的同时，修改属性 合并
    let person3 = { ...person, name: 'kack', address: '地球' }

4.高阶函数

1.若A函数，接收的参数是一个函数，那么A就可以称之为高阶函数
2.若A函数，调用的返回值依然是一个函数，那么A就可以称之为高阶函数
2.常见的高阶函数：Promise，setTimeout，arr.map()等等