Home Sign Up Sign In
• 请不要在回答技术问题时复制粘贴 AI 生成的内容
akinoniku
V2EX  ›  程序员

无论出于什么考虑，永远别在 JS 中拼接 HTML 字符串... but why？

  •   
  •   akinoniku ·
    akinoniku · May 24, 2013 · 10585 views
    This topic created in 4921 days ago, the information mentioned may be changed or developed.
    Whatever templating strategy you end up with, it's nice if you never have to put strings of HTML in your JavaScript.

    出自 http://backbonejs.org/

    那是什么考虑？ 是防XSS？ 好维护？ 还是别什么原因？
  • HTML
  • your
  • WHY
    50 replies  •  1970-01-01 08:00:00 +08:00
    kingwkb
    kingwkb
    May 24, 2013
    1
    最佳的做法是什么呢？
    lyric
    lyric
    May 24, 2013❤️1
    2
    嗯，防XSS而且好维护

    @kingwkb 最佳做法当然是用模版了。

    推荐 AngularJS 的 DOM 模版。
    darasion
    darasion
    May 24, 2013
    3
    感觉js做的拼接或者模板，都有点不可靠。
    alexrezit
    alexrezit
    May 24, 2013
    4
    目测星祈娘快要完工了...
    ipconfiger
    ipconfiger
    May 24, 2013
    5
    一般都在局部用underscore.js的模板。
    bitsmix
    bitsmix
    May 24, 2013
    6
    @lyric angularjs 有独立出来的模板了额？？？
    ghbjy1128
    ghbjy1128
    May 24, 2013
    7
    我用胡子，好用的佷。
    akinoniku
    akinoniku
    OP
    May 24, 2013
    8
    @alexrezit 其实是考虑到对你项目的扩展-> restful -> js模板 -> 单页webapp -> backbonejs

    结论是，不知道要不要重新做一下界面？

    https://www.dropbox.com/s/m7cfpo6xggj0u8c/xqn%205.png

    （flat ui 又有阴影，检讨）
    jasya
    jasya
    May 24, 2013
    9
    AngularJS 的学习成本太高了
    loading
    loading
    May 24, 2013
    10
    我不知道restful是什么，有人举个简单例子说明下么…
    juicy
    juicy
    May 24, 2013
    11
    。。。从backbone文档里那句话的上下问来看，这句话的作用纯粹是推荐你使用模板来拼接字串，而不要费劲自己去拼接（因为那样很繁琐，不便于维护）。

    这句话传递出来的语气应该是这样的：“甭管你最后用什么模板，只要你用模板来实现，而不是自己去吃力不讨好地拼啊拼，那我心里就舒畅了（要不我看着都纠结死了。。。）“

    什么防XSS啊，那是想太多了吧。。。
    akinoniku
    akinoniku
    OP
    May 24, 2013❤️1
    12
    @loading
    通俗点说应该是把这个对应起来，然后服务器的/route/[id]请求，返回json
    create → POST
    read → GET
    update → PUT
    delete → DELETE

    也就是说服务器不是返回页面或者其他东西了，返回只是纯碎的数据。


    当然这个说法也不太科学。。
    lyric
    lyric
    May 24, 2013
    13
    @bitsmix 没独立出来，我的意思就是直接用 angularJS 啊哈哈哈

    @akinoniku 做 WebApp 我一定要推荐 AngularJS 啊。我两个月前花了几天把一个 4k CoffeeScript 的项目从 Spine 移植到 Angular

    @jasya 不高，一下午走一遍官方教程而已。
    bitsmix
    bitsmix
    May 24, 2013 via iPhone
    14
    @lyric 我也想呢。。 不可能独立出来嘛！
    我也力挺 angular 一站式解决方案啊简直就是。
    reusFork
    reusFork
    May 24, 2013❤️1
    15
    你理解错这句话的意思了。它只是说把html放在模版文件里，比放在js里更nice而已
    模版的实现当然会涉及字符串操作，怎么可能永远不用
    hxgdzyuyi
    hxgdzyuyi
    May 24, 2013
    16
    @lyric 你现在是angular粉呀。 我觉得angular太重了~
    lyric
    lyric
    May 24, 2013
    17
    @hxgdzyuyi 不重啊。才80kb。可以像用jQ一样用它，也可以像用一个框架一样用它
    alexrezit
    alexrezit
    May 24, 2013
    18
    @akinoniku
    其实现在还没开工咱会乱讲?
    倒是折腾了些别的东西...
    hxgdzyuyi
    hxgdzyuyi
    May 24, 2013
    19
    @lyric 两个jquery那么大吧~ 重的方面觉得 它好像把很多功能都实现了，实现了一个大而全的框架~ 当然不是说不好， 只是觉得并不是很对我的胃口。 目前还是偏向于可以像积木一样用很多小库堆起来。感觉替换的空间会更大。 更灵活
    lyric
    lyric
    May 24, 2013
    20
    @hxgdzyuyi jQuery 1.9 min 96kb... angularJS 80kb ...
    akinoniku
    akinoniku
    OP
    May 24, 2013
    21
    @lyric angularJS 是把jquery也省了的意思吗。。？
    lyric
    lyric
    May 25, 2013
    22
    @akinoniku 对啊。用了Angular，99%的操作DOM的机会就没了。
    lyric
    lyric
    May 25, 2013
    23
    @akinoniku 所以不需要jQuery了。
    squallsdjl
    squallsdjl
    May 25, 2013
    24
    @akinoniku 好有意思的项目，我本来和一位ios开发的朋友商量做相似的东西来着～
    leohxj
    leohxj
    May 25, 2013 via Android
    25
    @ghbjy1128 胡子是啥
    MarshallChen
    MarshallChen
    May 25, 2013
    26
    @leohxj Mustache template
    hisea
    hisea
    May 25, 2013
    27
    支持AngularJS,支持用AngularJS的时候不用JQuery
    akinoniku
    akinoniku
    OP
    May 25, 2013
    28
    @lyric 好。。我跳坑


    @squallsdjl 谢谢~ 业余项目有意思是很重要的
    squallsdjl
    squallsdjl
    May 25, 2013
    29
    @akinoniku 你在北京么？如果可以的话一起来玩把～http://devin.zarktui.com/talk/6，
    @alexrezit 肿么给你发这个的时候你木有反应～http://devin.zarktui.com/talk/6，不感兴趣么～哈哈
    akinoniku
    akinoniku
    OP
    May 25, 2013
    30
    @squallsdjl 谢谢。。 虽然我很想去，可是我在深圳。。非常远呢
    alexrezit
    alexrezit
    May 25, 2013
    31
    @squallsdjl
    大概没看到... 而且我还在哈尔滨呢!!!
    squallsdjl
    squallsdjl
    May 25, 2013
    32
    @akinoniku @alexrezit 是吧那欢迎关注微信公众帐号咯～zarkxdev，
    话说alexrezit你怎么又跑回家了哈哈哈哈～
    yakczh
    yakczh
    May 25, 2013
    33
    @hisea AngularJS 根据自定义标签生成动态脚本是什么原理？
    是不是根据标签分很多case

    　case tagXX

    fun=new Function("xxxx")
    tag.onXX=fun
    lyric
    lyric
    May 25, 2013
    34
    @akinoniku 哈哈哈哈哈哈哈哈，我觉得我可以去当布道师
    lyric
    lyric
    May 25, 2013
    35
    @yakczh 说的是用directive http://docs.angularjs.org/guide/directive 构建自定义组件么？
    hisea
    hisea
    May 25, 2013
    36
    @yakczh 他们应该也是event loop，然后由很多watcher来watch那些特殊的tag
    alexrezit
    alexrezit
    May 25, 2013
    37
    @squallsdjl
    在家好几个月了...
    damngood
    damngood
    May 25, 2013
    38
    @hisea
    可是如果使用 BootStrap 这种框架的话, 还是免不了要引入 JQuery...

    看了下源码, 貌似 Angular 会在 JQuery 存在的情况下优先使用 JQuery 做 Dom 操作
    如果不存在的话就使用自己的一个 Mini JQuery 组件

    另: Angular 真的很好用.. :)
    yishenggudou
    yishenggudou
    May 25, 2013
    39
    AngularJS 比backbone的优势在那里 感觉 AngularJS 文档看着一头雾水 backbone.js 就很清晰
    akinoniku
    akinoniku
    OP
    May 25, 2013
    40
    @lyric 刚看完Tutorial，实在是太棒了。
    bitsmix
    bitsmix
    May 25, 2013 via iPhone
    41
    @yishenggudou 写写就知道了
    lyric
    lyric
    May 25, 2013
    42
    @damngood 没关系，有一个 jQuery free 的 Bootstrap，即现在的 angular-ui
    lyric
    lyric
    May 25, 2013
    43
    @akinoniku 我成功了：）
    akinoniku
    akinoniku
    OP
    May 25, 2013
    44
    @lyric 如果公司的项目可以用AngularJS重写就好了。。。
    damngood
    damngood
    May 25, 2013
    45
    @lyric 当时有找过 Bootstrap port in Angular, 结果也找到了你提到的那个..
    但是考虑到当时刚开始使用 Angular, 怕驾驭不了, 于是就还是用的 Bootstrap..
    下个项目试一下看看.. :)
    chuck911
    chuck911
    May 25, 2013❤️1
    46
    @akinoniku 少年，我想从另外一个角度说一下
    “it's nice if you never have to” 和 “永远别” 语气上差别大了点
    never have to 意思是“绝不是必须”=>不必=>可以不 , 而不是“必不”
    比如老无所依里有句台词 “You don't have to do this” ，意为“你不必这么做的”，而不是“你不许这么做！”
    再加上“it's nice if ”，真是委婉得不得了

    直译的话，“不管你用什么模板策略，如果你不是只能把html塞进js，那是很好的”
    luikore
    luikore
    May 25, 2013
    47
    如果不懂为什么,永远别写代码算了...
    如果懂了,任何never都没有意义...
    hxgdzyuyi
    hxgdzyuyi
    May 26, 2013
    48
    @lyric 看你前面说80kb 脑补成gzip后了。
    hxgdzyuyi
    hxgdzyuyi
    May 26, 2013
    49
    @lyric 可能有些偏见了 回头写个todo list 试试~
    hisea
    hisea
    May 27, 2013
    50
    @damngood 嗯，你说的是bootstrap里面的javascript部分把，css部分跟angular没关系。

    Javascript的部分我们用了Angular Bootstrap项目，来替换原生的bootstrap javascript.
    http://angular-ui.github.io/bootstrap/
    About   ·   Help   ·   Advertise   ·   Blog   ·   API   ·   FAQ   ·   Privacy   ·   Solana   ·   934 Online   Highest 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 69ms · UTC 21:27 · PVG 05:27 · LAX 13:27 · JFK 16:27
    ♥ Do have faith in what you're doing.