使用 Templete string ,我们可以方便得在 string 中插入变量。这不就是 view component 主要工作吗?
例子:
function sayHi(name) {
return `<p>How are you, ${name}?</p>`;
}
于是在最近的小项目中试验了下这种方式.
利用 github 作为后端博客系统,可以直接在博客上增删内容(通过调用 github api)
主体部分放在 <main id="contentContailer"></main/>
中,根据不同的 route 设置其的 innerHTML 。
header 和 footer 部分几乎不变,只需要根据不同的 route 控制一下某些内容是否显示。
index.js
中来 handle 这个事件,导致 index 比较臃肿。 1
loading 2016-02-02 06:06:45 +08:00 via Android
又是一个轮子
|
2
will0404 2016-02-02 08:45:33 +08:00 via iPhone
所谓字符串中插入变量和直接字符串拼接有什么区别
|
3
chemzqm 2016-02-02 09:05:16 +08:00
话说我也有个 reactive 小模块 https://github.com/chemzqm/reactive-lite ,基于 Object.defineProperty 方式:
支持 textcontent html function attribute 等插入方式 支持可重用 binding , event handler 函数 支持 Reactive 实例属性共享,避免 dom 重复解析 支持替换绑定 model 仅供参考 |
4
timqian OP |
5
nino 2016-02-02 10:01:49 +08:00
字符串拼 DOM ,小心 XSS 哦……
|
6
timqian OP |
8
jarlyyn 2016-02-02 10:34:27 +08:00
你是要取代 underscore/lodash 的 template 吧?
和 react 有啥关系…… react 的核心不是通过内部生成虚拟 dom,然后和实际 dom 对比,仅操作发生变化的,以避免昂贵的 dom 操作的浪费么? |
9
timqian OP @jarlyyn 取代 说的确实不妥,,我的意思是原来用 react 作为 View 层,这里试了下直接使用 string template
|
10
jarlyyn 2016-02-02 10:44:10 +08:00
@timqian
我是用 react+backbones 的 本来就是用 react 来实现数据绑定,取代 backbones 中使用的 underscore template 的。 你这个做法我看不懂优点在哪…… |
12
tobeyouth 2016-02-02 11:15:48 +08:00
这样的话,实现在模板中添加逻辑比较困难吧
|
15
sox 2016-02-02 11:30:20 +08:00
|
19
nino 2016-02-02 14:58:40 +08:00 1
@will0404 http://www.zhihu.com/question/26628342/answer/33572866
可以参考这个回答,说的比较清楚的。楼主这个场景可能没有 XSS 风险,但是我们还是要避免 innerHTML 的方式插入 DOM 。 |
20
chemzqm 2016-02-02 15:10:43 +08:00
innerHTML 不仅可以避免 xss 而且性能上要好得多
|
21
chemzqm 2016-02-02 15:11:01 +08:00
说错了 应该是 textContent
|
23
breeswish 2016-02-03 09:52:55 +08:00
[我不是针对你,我是说所有用这个的东西都可以被 XSS 。]
楼主现在用在了博客上,那么只能自己 XSS 自己,一旦放开了内容生产者,那么就可以到处任意 XSS 了。 (以及 markdown 本身并不确保不被 XSS (随便找个 marked 的 XSS 就可以用了 |
24
shyling 2016-02-03 13:34:57 +08:00 via Android
嗯嗯,字符串拼接 html 是容易遇到 xss 问题
|