推荐关注
› Meteor
› JSLint - a JavaScript code quality tool
› jsFiddle
› D3.js
› WebStorm
推荐书目
› JavaScript 权威指南第 5 版
› Closure: The Definitive Guide
› Closure: The Definitive Guide
实验：使用 es6 templete string 作为 view component(取代 react？)
timqian · 2016-02-01 23:14:35 +08:00 · 3105 次点击这是一个创建于 3221 天前的主题，其中的信息可能已经有所发展或是发生改变。
使用 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 比较臃肿。
项目地址
 |
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 问题
|
Select Language