Update html & raw & svg

master
yutent 2023-09-22 10:06:48 +08:00
parent 44f5424597
commit 0d5ca7465c
1 changed files with 67 additions and 1 deletions

@ -1 +1,67 @@
Welcome to the Wiki.
# html & raw & svg
> 这几个方法, 功能比较简单, 就是将字符串html模板生成框架需要的模板对象。另外就是配合`string-html-css`插件来实现语法高亮。
```js
// 普通的html结构
html`<div>hello world!</div>`
// 不可写成
html(`<div>hello world!</div>`)
```
由于`SVG`的特殊性, 一些属性不能按`html`节点来处理, 所以这种情况就需要换`svg函数`了
```js
svg`<svg><path d=""></svg>`
// 但是, 如果svg节点是被包在其他html节点中的话, 可以不用svg函数
// 这样也是可以正常解析的
html`<div><svg><path d=""></svg></div>`
```
以上2个函数, 有个特点, 那就是**节点结构**都是明确的, 无法根据现有的**html文本**来创建模板对象。
```js
let somethingFromOther = '<h1>hello</h1>'
// 这样的结果, 只会原样输出 '<h1>hello</h1>' 字符串, 而不是 h1节点
html`<div>${somethingFromOther}</div>`
```
这种情况, 就是`raw函数`该出场了。
```js
let somethingFromOther = '<h1>hello</h1>'
// 这样即可达到你想要的效果
html`<div>${raw(somethingFromOther)}</div>`
```