菁英数字科技（猩码）-猩码学苑-专注软件开发人才菁英教育

标题: 前端-王卓凡-20230530 [打印本页]

作者: 王卓凡 时间: 2023-6-13 18:14
标题: 前端-王卓凡-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>

欢迎光临菁英数字科技（猩码）-猩码学苑-专注软件开发人才菁英教育 (http://www.xingmaxueyuan.com/)