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

HTML

your

WHY

50 条回复 • 1970-01-01 08:00:00 +08:00

1

kingwkb

2013-05-24 15:04:19 +08:00

最佳的做法是什么呢？

2

lyric

2013-05-24 15:14:44 +08:00

1

嗯，防XSS而且好维护

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

推荐 AngularJS 的 DOM 模版。

3

darasion

2013-05-24 16:00:28 +08:00

感觉js做的拼接或者模板，都有点不可靠。

4

alexrezit

2013-05-24 16:02:29 +08:00

目测星祈娘快要完工了...

5

ipconfiger

2013-05-24 16:03:31 +08:00

一般都在局部用underscore.js的模板。

6

bitsmix

2013-05-24 16:05:16 +08:00

@lyric angularjs 有独立出来的模板了额？？？

7

ghbjy1128

2013-05-24 16:22:42 +08:00

我用胡子，好用的佷。

8

akinoniku

OP

2013-05-24 16:23:56 +08:00

@alexrezit 其实是考虑到对你项目的扩展-> restful -> js模板 -> 单页webapp -> backbonejs

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

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

（flat ui 又有阴影，检讨）

9

jasya

2013-05-24 16:50:41 +08:00

AngularJS 的学习成本太高了

10

loading

2013-05-24 16:58:03 +08:00

我不知道restful是什么，有人举个简单例子说明下么…

11

juicy

2013-05-24 17:49:32 +08:00

。。。从backbone文档里那句话的上下问来看，这句话的作用纯粹是推荐你使用模板来拼接字串，而不要费劲自己去拼接（因为那样很繁琐，不便于维护）。

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

什么防XSS啊，那是想太多了吧。。。

12

akinoniku

OP

2013-05-24 18:30:01 +08:00

1

@loading
通俗点说应该是把这个对应起来，然后服务器的/route/[id]请求，返回json
create → POST
read → GET
update → PUT
delete → DELETE

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

当然这个说法也不太科学。。

13

lyric

2013-05-24 19:26:08 +08:00

@bitsmix 没独立出来，我的意思就是直接用 angularJS 啊哈哈哈

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

@jasya 不高，一下午走一遍官方教程而已。

14

bitsmix

2013-05-24 20:29:14 +08:00 via iPhone

@lyric 我也想呢。。不可能独立出来嘛！
我也力挺 angular 一站式解决方案啊简直就是。

15

reusFork

2013-05-24 20:53:31 +08:00

1

你理解错这句话的意思了。它只是说把html放在模版文件里，比放在js里更nice而已
模版的实现当然会涉及字符串操作，怎么可能永远不用

16

hxgdzyuyi

2013-05-24 21:08:15 +08:00

@lyric 你现在是angular粉呀。我觉得angular太重了~

17

lyric

2013-05-24 21:16:40 +08:00

@hxgdzyuyi 不重啊。才80kb。可以像用jQ一样用它，也可以像用一个框架一样用它

18

alexrezit

2013-05-24 21:17:47 +08:00

@akinoniku
其实现在还没开工咱会乱讲?
倒是折腾了些别的东西...

19

hxgdzyuyi

2013-05-24 21:36:03 +08:00

@lyric 两个jquery那么大吧~ 重的方面觉得它好像把很多功能都实现了，实现了一个大而全的框架~ 当然不是说不好，只是觉得并不是很对我的胃口。目前还是偏向于可以像积木一样用很多小库堆起来。感觉替换的空间会更大。更灵活

20

lyric

2013-05-24 22:31:57 +08:00

@hxgdzyuyi jQuery 1.9 min 96kb... angularJS 80kb ...

21

akinoniku

OP

2013-05-24 22:51:08 +08:00

@lyric angularJS 是把jquery也省了的意思吗。。？

22

lyric

2013-05-25 00:03:44 +08:00

@akinoniku 对啊。用了Angular，99%的操作DOM的机会就没了。

23

lyric

2013-05-25 00:05:03 +08:00

@akinoniku 所以不需要jQuery了。

24

squallsdjl

2013-05-25 00:35:54 +08:00

@akinoniku 好有意思的项目，我本来和一位ios开发的朋友商量做相似的东西来着～

25

leohxj

2013-05-25 00:52:34 +08:00 via Android

@ghbjy1128 胡子是啥

26

MarshallChen

2013-05-25 02:41:35 +08:00

@leohxj Mustache template

27

hisea

2013-05-25 03:09:26 +08:00

支持AngularJS,支持用AngularJS的时候不用JQuery

28

akinoniku

OP

2013-05-25 08:19:45 +08:00

@lyric 好。。我跳坑

@squallsdjl 谢谢~ 业余项目有意思是很重要的

29

squallsdjl

2013-05-25 09:16:17 +08:00

@akinoniku 你在北京么？如果可以的话一起来玩把～http://devin.zarktui.com/talk/6，
@alexrezit 肿么给你发这个的时候你木有反应～http://devin.zarktui.com/talk/6，不感兴趣么～哈哈

30

akinoniku

OP

2013-05-25 09:20:45 +08:00

@squallsdjl 谢谢。。虽然我很想去，可是我在深圳。。非常远呢

31

alexrezit

2013-05-25 09:22:38 +08:00

@squallsdjl
大概没看到... 而且我还在哈尔滨呢!!!

32

squallsdjl

2013-05-25 09:57:35 +08:00

@akinoniku @alexrezit 是吧那欢迎关注微信公众帐号咯～zarkxdev，
话说alexrezit你怎么又跑回家了哈哈哈哈～

33

yakczh

2013-05-25 10:02:57 +08:00

@hisea AngularJS 根据自定义标签生成动态脚本是什么原理？
是不是根据标签分很多case

　case tagXX

fun=new Function("xxxx")
tag.onXX=fun

34

lyric

2013-05-25 10:31:48 +08:00

@akinoniku 哈哈哈哈哈哈哈哈，我觉得我可以去当布道师

35

lyric

2013-05-25 10:34:41 +08:00

@yakczh 说的是用directive http://docs.angularjs.org/guide/directive 构建自定义组件么？

36

hisea

2013-05-25 10:49:23 +08:00

@yakczh 他们应该也是event loop，然后由很多watcher来watch那些特殊的tag

37

alexrezit

2013-05-25 10:52:16 +08:00

@squallsdjl
在家好几个月了...

38

damngood

2013-05-25 11:06:29 +08:00

@hisea
可是如果使用 BootStrap 这种框架的话, 还是免不了要引入 JQuery...

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

另: Angular 真的很好用.. :)

39

yishenggudou

2013-05-25 12:38:46 +08:00

AngularJS 比backbone的优势在那里感觉 AngularJS 文档看着一头雾水 backbone.js 就很清晰

40

akinoniku

OP

2013-05-25 13:47:37 +08:00

@lyric 刚看完Tutorial，实在是太棒了。

41

bitsmix

2013-05-25 14:11:01 +08:00 via iPhone

@yishenggudou 写写就知道了

42

lyric

2013-05-25 15:51:03 +08:00

@damngood 没关系，有一个 jQuery free 的 Bootstrap，即现在的 angular-ui

43

lyric

2013-05-25 15:53:56 +08:00

@akinoniku 我成功了：）

44

akinoniku

OP

2013-05-25 16:02:22 +08:00

@lyric 如果公司的项目可以用AngularJS重写就好了。。。

45

damngood

2013-05-25 17:22:19 +08:00

@lyric 当时有找过 Bootstrap port in Angular, 结果也找到了你提到的那个..
但是考虑到当时刚开始使用 Angular, 怕驾驭不了, 于是就还是用的 Bootstrap..
下个项目试一下看看.. :)

46

chuck911

2013-05-25 18:11:40 +08:00

1

@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，那是很好的”

47

luikore

2013-05-25 18:25:46 +08:00

如果不懂为什么,永远别写代码算了...
如果懂了,任何never都没有意义...

48

hxgdzyuyi

2013-05-26 10:06:38 +08:00

@lyric 看你前面说80kb 脑补成gzip后了。

49

hxgdzyuyi

2013-05-26 10:23:50 +08:00

@lyric 可能有些偏见了回头写个todo list 试试~

50

hisea

2013-05-27 01:19:46 +08:00

@damngood 嗯，你说的是bootstrap里面的javascript部分把，css部分跟angular没关系。

Javascript的部分我们用了Angular Bootstrap项目，来替换原生的bootstrap javascript.
http://angular-ui.github.io/bootstrap/