V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
推荐关注
Meteor
JSLint - a JavaScript code quality tool
jsFiddle
D3.js
WebStorm
推荐书目
JavaScript 权威指南第 5 版
Closure: The Definitive Guide
timqian
V2EX  ›  JavaScript

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

  •  
  •   timqian · 2016-02-01 23:14:35 +08:00 · 3094 次点击
    这是一个创建于 3212 天前的主题,其中的信息可能已经有所发展或是发生改变。

    使用 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

    24 条回复    2016-02-03 13:34:57 +08:00
    loading
        1
    loading  
       2016-02-02 06:06:45 +08:00 via Android
    又是一个轮子
    will0404
        2
    will0404  
       2016-02-02 08:45:33 +08:00 via iPhone
    所谓字符串中插入变量和直接字符串拼接有什么区别
    chemzqm
        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

    仅供参考
    timqian
        4
    timqian  
    OP
       2016-02-02 09:24:05 +08:00 via Android
    @will0404 没有本质区别,只是看起来舒服点,速度快一点,
    可以在这里测试: http://jsperf.com/template-strings-perf/3
    nino
        5
    nino  
       2016-02-02 10:01:49 +08:00
    字符串拼 DOM ,小心 XSS 哦……
    timqian
        6
    timqian  
    OP
       2016-02-02 10:32:28 +08:00 via Android
    @nino XSS 是其他用户在这个网站中注入脚本,跟 DOM 生成方式没关系吧?
    https://en.m.wikipedia.org/wiki/Cross-site_scripting
    timqian
        7
    timqian  
    OP
       2016-02-02 10:33:56 +08:00 via Android
    @nino 该应用只有一个用户,所以应该不存在 xss 的问题,不知道对不对?
    jarlyyn
        8
    jarlyyn  
       2016-02-02 10:34:27 +08:00
    你是要取代 underscore/lodash 的 template 吧?

    和 react 有啥关系……

    react 的核心不是通过内部生成虚拟 dom,然后和实际 dom 对比,仅操作发生变化的,以避免昂贵的 dom 操作的浪费么?
    timqian
        9
    timqian  
    OP
       2016-02-02 10:42:16 +08:00 via Android
    @jarlyyn 取代 说的确实不妥,,我的意思是原来用 react 作为 View 层,这里试了下直接使用 string template
    jarlyyn
        10
    jarlyyn  
       2016-02-02 10:44:10 +08:00
    @timqian

    我是用 react+backbones 的

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

    你这个做法我看不懂优点在哪……
    timqian
        11
    timqian  
    OP
       2016-02-02 10:51:11 +08:00 via Android
    @jarlyyn 这种做法只是一个实验,踩踩坑
    tobeyouth
        12
    tobeyouth  
       2016-02-02 11:15:48 +08:00
    这样的话,实现在模板中添加逻辑比较困难吧
    timqian
        13
    timqian  
    OP
       2016-02-02 11:28:44 +08:00 via Android
    @tobeyouth 嗯,调不了其他模块
    timqian
        14
    timqian  
    OP
       2016-02-02 11:30:07 +08:00 via Android
    @tobeyouth 目前没找到好办法,复杂逻辑只好多一个 route 来处理
    sox
        15
    sox  
       2016-02-02 11:30:20 +08:00
    timqian
        16
    timqian  
    OP
       2016-02-02 11:37:03 +08:00 via Android
    @sox look good ! sox 大法好
    will0404
        17
    will0404  
       2016-02-02 12:01:29 +08:00
    @nino 跟 xss 有什么关系
    glasslion
        18
    glasslion  
       2016-02-02 13:33:32 +08:00
    @will0404
    @timqian xss 主要靠模板层过滤
    nino
        19
    nino  
       2016-02-02 14:58:40 +08:00   ❤️ 1
    @will0404 http://www.zhihu.com/question/26628342/answer/33572866

    可以参考这个回答,说的比较清楚的。楼主这个场景可能没有 XSS 风险,但是我们还是要避免 innerHTML 的方式插入 DOM 。
    chemzqm
        20
    chemzqm  
       2016-02-02 15:10:43 +08:00
    innerHTML 不仅可以避免 xss 而且性能上要好得多
    chemzqm
        21
    chemzqm  
       2016-02-02 15:11:01 +08:00
    说错了 应该是 textContent
    sox
        22
    sox  
       2016-02-02 15:19:13 +08:00
    @chemzqm 你这相当于没说 😂
    breeswish
        23
    breeswish  
       2016-02-03 09:52:55 +08:00
    [我不是针对你,我是说所有用这个的东西都可以被 XSS 。]

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

    (以及 markdown 本身并不确保不被 XSS (随便找个 marked 的 XSS 就可以用了
    shyling
        24
    shyling  
       2016-02-03 13:34:57 +08:00 via Android
    嗯嗯,字符串拼接 html 是容易遇到 xss 问题
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   5607 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 25ms · UTC 07:29 · PVG 15:29 · LAX 23:29 · JFK 02:29
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.