<style>
body{margin:0;}
li{list-style:none;cursor:pointer;}
</style>
<body></body>
<script src=jq.js></script>
<script>
'use strict'
const log=console.log
function page(obj){
for (let i in obj){
let data=window[i]=obj[i].data
$('body').append('<div class='+i+'></div>')
$('.'+i).html(obj[i].html(data)).css(obj[i].css)
for(let j in obj[i].event){
$('.'+i)[j](()=>obj[i].event[j](obj))
}
let length=data.length
setInterval(function (){
if(length != data.length){
$('.'+i).html(obj[i].html(data))
length=data.length
}
})
}
}
page({
nav:{
data:['hello','world'],
html:data=>data.map(n=>'<li>'+n+'</li>'),
css:{display:'flex','justify-content':'space-around'},
event:{
click:function(){
log(this)
nav.push('你好')
side.push('你好')
},
hover:function(){
log('hover!')
},
}
},
side:{
data:[],
html:data=>data.map(n=>'<li>'+n+'</li>'),
css:{display:'flex','justify-content':'space-around'},
event:{
click:function(){
nav.pop()
}
}
}
})
</script>