实验：使用 es6 templete string 作为 view component(取代 react？)

[timqian]

使用 Templete string ，我们可以方便得在 string 中插入变量。这不就是 view component 主要工作吗？
例子：

function sayHi(name) {
return `<p>How are you, ${name}?</p>`;
}

于是在最近的小项目中试验了下这种方式.

项目简介

利用 github 作为后端博客系统，可以直接在博客上增删内容(通过调用 github api)

项目结构

• store.js: 保存应用状态 (Model)
• componets: 放 view components (View)
• index.js: 根据不同的 route 做不同的事 (Controller)
• 其他 util 函数

工作原理

主体部分放在 <main id="contentContailer"></main/>中，根据不同的 route 设置其的 innerHTML 。
header 和 footer 部分几乎不变，只需要根据不同的 route 控制一下某些内容是否显示。

这种方式的好处

• 代码体积小
• 业务无关代码少
• view component 容易理解

遇到的坑

• 由于使用这种方式生成的 component 是纯字符串，所以无法在 onclick handler 中调用其他的模块。所以对于需要比较复杂操作 onclick 事件，我会改变网页的 route, 在 index.js中来 handle 这个事件，导致 index 比较臃肿。

项目地址

https://github.com/timqian/GiG

[chemzqm]

说错了 应该是 textContent

[sox]

@chemzqm 你这相当于没说 😂

[breeswish]

[我不是针对你，我是说所有用这个的东西都可以被 XSS 。]

楼主现在用在了博客上，那么只能自己 XSS 自己，一旦放开了内容生产者，那么就可以到处任意 XSS 了。

（以及 markdown 本身并不确保不被 XSS （随便找个 marked 的 XSS 就可以用了

[shyling]

嗯嗯，字符串拼接 html 是容易遇到 xss 问题