html & raw & svg

这几个方法, 功能比较简单, 就是将字符串html模板生成框架需要的模板对象。另外就是配合string-html-css插件来实现语法高亮。



// 普通的html结构
html`<div>hello world!</div>`

// 不可写成
html(`<div>hello world!</div>`)

由于SVG的特殊性, 一些属性不能按html节点来处理, 所以这种情况就需要换svg函数了


svg`<svg><path d=""></svg>`

// 但是, 如果svg节点是被包在其他html节点中的话, 可以不用svg函数
// 这样也是可以正常解析的
html`<div><svg><path d=""></svg></div>`

以上2个函数, 有个特点, 那就是节点结构都是明确的, 无法根据现有的html文本来创建模板对象。


let somethingFromOther = '<h1>hello</h1>'

// 这样的结果, 只会原样输出 '<h1>hello</h1>' 字符串, 而不是 h1节点
html`<div>${somethingFromOther}</div>`

这种情况, 就是raw函数该出场了。


let somethingFromOther = '<h1>hello</h1>'

// 这样即可达到你想要的效果
html`<div>${raw(somethingFromOther)}</div>`

需要注意的是, raw()函数的用法是常规的函数调用的语法, 如果需要传参的话, 请把值放到第2参数中,raw(str, args)。另外, raw()函数不会帮你过滤任何内容, 这会有安全隐患, 所以请自行确保你拿到的html字符串是安全的。


let somethingFromOther = '<h1 title="%s" @click="%s">hello</h1>'


html`<div>${raw(somethingFromOther, ['这是标题', ev => alert('这是事件绑定回调')])}</div>`

Table of Contents

框架核心模块: