案例：数据渲染到页面<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)<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>
|
|
|
|
