彭婉嘉-20230530

• 数据渲染1
  
  

<div class="box">
  <h2></h2>
  <ul></ul>
</div>// 把数据渲染到页面中
let arr1 = {
  title: '体育新闻',
  list: ['男足闯入世界杯', '男足进入世界杯决赛', '男足捧起大力神杯']
}
// 使用class创建类
class createNews1 {
  constructor(selector, data) {
    this.obj = document.querySelector(selector)
    this.title = data.title
    this.list = data.list
    this.renderHtml()
  }
  renderHtml() {
    const h2 = this.obj.querySelector('h2')
    const ul = this.obj.querySelector('ul')
    h2.innerHTML = this.title
    ul.innerHTML = this.list.map(item => `<li>${item}</li>`).join('')
  }
}
new createNews1('.box', arr1)

• 数据渲染2
  
  

<div class="dv">
  <h2></h2>
  <img src="" alt="">
  <ul></ul>
</div>let arr2 = {
  title: '科技新闻',
  imgsrc: 'https://img-qn.51miz.com/preview/video/00/00/15/05/V-150552-553EA116O.jpg',
  list: ['自主内核浏览器', '1纳米芯片', '中文编程语言']
}
//利用继承实现数据的渲染
class createNews2 extends createNews1 {
  constructor(selector, data) {
    super(selector, data)
    this.imgsrc = data.imgsrc
    this.renderHtml()
  }
  renderHtml() {
    super.renderHtml()
    const img = this.obj.querySelector('img')
    img.src = this.imgsrc
  }
}
new createNews2('.dv', arr2)
严格模式

严格模式下的要求：

1.变量声明需要使用var

2.不能删除已经声明的变量 -  例如： delete a

3.全局的函数中的this是undefined

4.构造函数需要使用new,不能直接调用

5.函数的参数不能重名

<!--为整个脚本开启严格模式-->
<script>
// "use strict"
</script>
<script>
    (function () {
        "use strict"
    })();
</script>//只为一个函数开启严格模式
<script>
  
    function fn() {
      'use strict'
    }
​
</script>