t().to() t().view() t().tag() t().attr() t().child() t().children() t().param() t().style() t().inject() t().draw() t().redraw() t().mount() t.parent
创建一个虚拟节点,调用new Tag()
通过回调函数的self将自己暴露给外部,可以卸载渲染函数外,也可以写在渲染函数里
渲染函数,控制内部的render方法,每次重绘都会从新构建虚拟节点(内部的vnode属性)
定义虚拟标签的tagName 例如 div button input等 √必须写在渲染函数里
定义虚拟标签的style属性 √必须写在渲染函数里
定义虚拟标签的attribute,即属性,例如 class,onclick,onmouseover,type
对应标签的<div class="" type="" onclick="" onmouseover=""></div>
√必须写在渲染函数里
定义虚拟标签的子节点,是一个数组,每个元素必须是字符串,或者是Tag的实例 √必须写在渲染函数里
内部方法 √必须写在渲染函数里
当t()作为组件的时候,通过该方法给组件传参数 x 必须写在渲染函数外部
用法类似t().view(),在调用组件的时候使用,顾名思义,在组件原有view的基础上,给组件注入新的view 和view不同的是,view会直接覆盖内部的render方法,而inject是在原有的基础上追加 范例里通过该方法修改了comp1的background x 必须写在渲染函数外部,约等于渲染函数
内部方法 立即通过虚拟dom重新生成新的真实dom x 必须写在渲染函数外
递归根据自身及其子节点的渲染函数重绘画面 会重新生成虚拟dom 会根据生成的虚拟dom调用其draw()方法生成真实dom x必须写在渲染函数外
将组件挂载到html的dom标签里 x必须写在渲染函数外
import {t} from icat_tag
let comp1 = ()=>{
let num = 0
return t()
.view((self)=>{
self
.tag("div")
.style({
width:"100px",
height:"100px",
background:"red"
})
.children([
self.params.content || "comp1"
])
})
}
let root = document.quertSelecotr("#root")
let num = 0
let vdom = null
t()
.view((self)=>{
self.children([
comp1(),
comp1()
.to((self)=> vdom = self)
.inject((self)=>{
self
.style({
background:"#eee"
})
.attr({
onclick:()=>{
num++
vdom.redraw() //update dom by hand
},
oncreate:(dom)=>{
//dom operation
}
})
.param ()=>{
content:"click"+num
}
})
])
})
.mount(root)
// new example
// Generated by CoffeeScript 2.6.1
var Box, main, num, tmp, x;
import {
t
} from "../main";
main = document.querySelector("#main");
Box = () => {
return t().$style(() => {
return {
margin: "1rem",
background: "#eee",
border: "0.1rem solid #ccc",
fontSize: "1.6rem"
};
}).$inner(() => {
return "hello";
});
};
num = 0;
x = null;
tmp = Box().$inner(() => {
return [
Box().$inner(() => {
return "呜啊拉拉";
}),
Box().$inner(() => {
return "呜啦啦啦";
}),
Box().$inner(() => {
return "我是按钮" + num;
}).$attr((i) => {
return {
onclick: () => {
num++;
return i.redraw();
},
oncreate: (dom) => {
return dom.onmouseover = () => {
return console.log(111);
};
}
};
})
];
}).mount(main);
console.log(tmp);
现在允许你使用中文方法,详情见main.js