<button onclick=function(e){}></button>

    <button onclick=function add(){} /> 

    <button onclick=e=>{}/> 

    function add(){}
    <button onclick=add/> 

    /**
     * 如果 add 可能会被从新定义，可以用 @() 做绑定的声明
     * 后续 add 变量有任何变更 onclick 监听方法都会得到更新
     */
    let add=function(){}
    <button onclick=@(add)/> 

<span title=name>((name))<span>
<span title=`name : ${name}`>((name))<span> // 这里的 `` 只是 es6 的模板表达式，属性 = 右边可以是几乎所有的表达式

<span title=@(name)>@{`name : ${name}`}<span>  
// 其实 title=@{name} 也是允许的，@{} 会根据当前语境做相应的转化
// 不过 {} 更多的是块级语句或模板的意思 () 和表达式比较接近，这里用 @() 比较合适一点

    <input value=@(name)/>
    <input type="radio" checked=@(checked)/>
    <select value=@(selected)></select>

    // 也可以仅初始化取值，方法参考上文

    let list=[
        {name:"aaa"},
        {name:"bbb",nodes:[{name:"ccc"}]}
    ]
    document.body.appendChild(
        <MyComponent list=@(list)>
            <li>
                @{
                    let name="";
                    <input value=@(name) placeholder="name"/>
                    <button onclick=function(){
                        list.unshift({name});
                        name="";
                    }>add</button>
                }
            </li>
        </MyComponent>
    )
    function MyComponent({list,children}){
        return <ul>
            @:children
            @:for(let item of list){
                <li>
                    @{item.name}
                    @:if(item.nodes && item.nodes.length){
                        <MyComponent list=@(item.nodes)/>
                    }
                </li>
            }
        </ul>
    }

    /**
     * "@:" 后面可以接着一条 JS 语句
     * 如果 "@:" 后接着的是一条表达式语句，
     * 则该表达式的结果会作为父级元素的子元素
     * 如果 "@:" 后接着的是声明语句，
     * 则该声明成立的同时将每个声明结果的值作为父级元素的子元素
     * 
     * "@{}" 大括号内是绑定的 JS 语句块  
     * 如果 "@{}" 语句块内仅包含一条语句且为表达式语句，
     * 则该表达式的结果会作为父级元素的子元素
     * 
     * 如果语句块内包含多条语句，
     * 则仅包含单独的 Identifier Literal Element 的语句都视为父级元素的子元素
     * 
     * 通过这些方式声明的 for 或  if 语句中使用 break continue 会有限制，这些会在编译时给出警告，并不会从结果中剔除
     *（
     *  暂时找不到内部实现上看起来不冗余又能很好支持渲染流内 for if 中使用 break continue 的方式，
     *  其实渲染流内 switch 语句并没有 break 的使用限制，因为 switch 使用频率较低内部语义转化实现上没有 for 或 if 优 
     *  渲染流即是从HTML内部通过 @xx 插入的渲染 JS 逻辑（不包括内部声明的 function）
     * ）
     * 
     */
    let list = [
        {show:true,disabled:true,title:"test",message:"aaa"}
    ];
    let view = <ul>
        @{
            let title="";
            let message="";
            <li>
                <input value=@(title) placeholder="title"/>
                <input value=@(message)  placeholder="message"/>
                <button onclick=function(){
                    list.unshift({
                        show:true,
                        disabled:false,
                        title,message
                    });
                    title="";
                    message="";
                }>add</button>
            </li>
        }
        @:for(let item of list){
            let {show,disabled,title,message}=item;
            if(show){
                <li 
                    class=@(`item ${disabled?"disable":""}`)
                    onclick=function (){
                        item.disabled^=true;
                    }
                >
                    <cite>@{title}</cite>
                    <span>@{message}</span>
                </li>
            }
        }
    </ul>
    document.body.appendChild(view);

document.body.appendChild(
    <div>
        <RouterLink to="/test" mode="hash">to test</RouterLink>
        <Router path="/test" mode="hash">
            test
            <br/>
            <RouterLink to="./one" action="replace">01</RouterLink>
            <RouterLink to="./two" action="replace">02</RouterLink>
            <br/>
            <RouterLink to="../" action="back">back</RouterLink>
            <RouterLink to="/" action="back">back</RouterLink>
            <br/>
            <Router 
                path=["/:bar","../:bar/:foo"]
                component=function({children,match:{bar,foo}}){
                    return <span>
                        @:children;
                        <br/>
                        @:"bar : " + bar;
                        <br/>
                        @:"foo : " + foo;
                        <br/>
                    </span>
                }
            > test 00 </Router>
            <Router path="one"> test 01 </Router>
            <Router path="./two"> test 02 </Router>
        </Router>
    </div>
)