小程序原理篇：模版运行时原理
********
javascript
{
EventEmitter:class i
emit:f()
on:f()
once:f()
emitConfigReady:f()
global:{...}
env:{...}
...
}
plain
{
ELement:f()
Observer:f()
ShadowRoot:f()
// 元素相关
registerElement:f()
createELement:f()
appendChild:f()
removeChild:f()
// 处理事件
triggerEvent:f()
Event:f()
...
}javascript
// 定义一个 MyComponent 组件
var xxxComponent = exparser.registerElement({
// 组件名称
is: 'xxx-component',
// 组件属性列表
properties: {
text: String,
count: Number
},
// 组件生命周期函数
attached: function() {
console.log('xxxcomponent attached');
},
methods:{
/* 处理滑动 */
handleScroll(e){
this.triggerEvent('scroll',e)
},
},
});xml
<xxx-component bind:scroll="handleScroll"></my-component>
javascript
page{
background:#ccc;
}
.box{
background:pink;
width:200rpx;
}xml
['.box { background:pink;width:', 200, ';}\n', 'page', '{ background:#ccc; }' ]javascript
``<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>wxss 编译流程</title>
</head>
<body>
<div class="box">hello,world</div>
<script>
function setCssToStyleHead(styles) {
let styleText = ''
styles.forEach(item => {
if (typeof item === 'number') {
styleText += item + 'px'
}else if(item === 'page') {
styleText += 'body'
}else{
styleText += item
}
})
var headElement = document.head
const style = document.createElement('style')
style.innerHTML = styleText
headElement.appendChild(style)
}
const wxssString = ['.box { background:pink;width:', 200, ';}\n', 'page', '{ background:#ccc; }' ]
setCssToStyleHead(wxssString)
</script>
</body>
</html>
``html
<view >
<text>hello,world</text>
</view>javascript
function templateFun(context,scope){
return [
context.createNode(
'view',
{},
function (context){
return [
context.createNode('text',
{},
function (context){
return ['hello,world']
}
)
]
}
)
]
}
``javascript
function createNode(tag,attr,children){
const vnode = {
tag,
attr,
childten
}
return vnode
}
javascript
data:{
msg:'hello,world'
},javascript
<view>{{ msg }}</view>javascript
````createNode('view',{},function(context){
return [
context.getPropsData('msg')
]
})
``xml
<view>
<view wx:if="{{show}}" >显示</view>
<view wx:else >隐藏</view>
</view>javascript
context.createNode('view',{},function(context){
/* 获取 show 属性，如果这个属性为 true 的时候 */
if(context.getPropsData('show')){
return [
context.createNode('view',{},function(context){
return [ '显示' ]
})
]
}else{
/* 否则执行这里面的属性 */
return [
context.createNode('view',{},function(context){
return [ '隐藏' ]
})
]
}
})
html
<view>
<view wx:for="dataList" >{{item}}-{{index}}</view>
</view>javascript
context.createNode('view',{},function(context){
return [
context.handleWxFor(
context,
context.getPropsData('dataList'), // 获取 dataList 列表状态
'item',
'index',
function(context){
return [
context.createNode('view',{},[
context.getPropsData('item'),
'-',
context.getPropsData('index')
])
]
}
)
]
})javascript
function handleWxFor(context,list,itemKey,indexKey,fn){
return list.map((item,index,)=>{
const newContext = {
...context
}
newContext[itemKey] = item
newContext[indexKey] = index
return fn(newContext)[0]
})
}
- ****
javascript
// systom-info.js
const systomInfo = wx.getSystemInfoSync()
export default systomInfo