上代码:
function startRender(renderer) {
const layer = renderer.layer
function render(time) {
layer.render(time)
requestAnimationFrame(render)
}
requestAnimationFrame(render)
}
class Layer {
constructor(dom) {
this.dom = dom
}
render(time) {
this.dom.innerHTML = `Time cost: ${time}`
}
}
class Renderer {
constructor(layer) {
this.layer = layer
}
beginRender() {
startRender(this)
}
}
function init() {
const layer = new Layer(document.getElementById('tips'))
const renderer = new Renderer(layer)
renderer.beginRender()
}
不需要HTTP环境,双击用浏览器打开,点击按钮即可看到不停跳动的数字
结构
各部分含义