实验：使用 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

[loading]

又是一个轮子

[will0404]

所谓字符串中插入变量和直接字符串拼接有什么区别

[chemzqm]

话说我也有个 reactive 小模块 https://github.com/chemzqm/reactive-lite ，基于 Object.defineProperty 方式：
支持 textcontent html function attribute 等插入方式
支持可重用 binding ， event handler 函数
支持 Reactive 实例属性共享，避免 dom 重复解析
支持替换绑定 model

仅供参考

[timqian]

@will0404 没有本质区别，只是看起来舒服点，速度快一点，
可以在这里测试： http://jsperf.com/template-strings-perf/3

[nino]

字符串拼 DOM ，小心 XSS 哦……

[timqian]

@nino XSS 是其他用户在这个网站中注入脚本，跟 DOM 生成方式没关系吧？
https://en.m.wikipedia.org/wiki/Cross-site_scripting

[timqian]

@nino 该应用只有一个用户，所以应该不存在 xss 的问题，不知道对不对？

[jarlyyn]

你是要取代 underscore/lodash 的 template 吧？

和 react 有啥关系……

react 的核心不是通过内部生成虚拟 dom,然后和实际 dom 对比，仅操作发生变化的，以避免昂贵的 dom 操作的浪费么？

[timqian]

@jarlyyn 取代 说的确实不妥，，我的意思是原来用 react 作为 View 层，这里试了下直接使用 string template

[jarlyyn]

@timqian

我是用 react+backbones 的

本来就是用 react 来实现数据绑定，取代 backbones 中使用的 underscore template 的。

你这个做法我看不懂优点在哪……

[timqian]

@jarlyyn 这种做法只是一个实验，踩踩坑

[tobeyouth]

这样的话，实现在模板中添加逻辑比较困难吧

[timqian]

@tobeyouth 嗯，调不了其他模块

[timqian]

@tobeyouth 目前没找到好办法，复杂逻辑只好多一个 route 来处理

[sox]

well https://github.com/substack/hyperx

[timqian]

@sox look good ！ sox 大法好

[will0404]

@nino 跟 xss 有什么关系

[glasslion]

@will0404
@timqian xss 主要靠模板层过滤

[nino]

@will0404 http://www.zhihu.com/question/26628342/answer/33572866

可以参考这个回答，说的比较清楚的。楼主这个场景可能没有 XSS 风险，但是我们还是要避免 innerHTML 的方式插入 DOM 。

[chemzqm]

innerHTML 不仅可以避免 xss 而且性能上要好得多