有没有用 js 创建 dom 的库

2015-08-05 10:01:11 +08:00
 tommark

我需要用js动态生成一组页面ui,用jquery.html(这里需要一大串html代码,太恶心了),有没有方便的库可以实现这个功能?

4472 次点击
所在节点    JavaScript
49 条回复
xujif
2015-08-05 17:53:04 +08:00
iyangyuan
2015-08-05 18:11:50 +08:00
模板引擎不仅可维护性远大于createElement,效率也比createElement要高,浏览器解析html字符串肯定不会傻到逐行createElement。用createElement创建出来的复杂html,几乎不可维护
zythum
2015-08-05 18:25:19 +08:00
@zhea55 你看源码就知道了。 https://github.com/facebook/react/blob/master/src/renderers/dom/shared/ReactDOMComponent.js#L515

测试。再高级浏览器效率微乎其微。再旧式ie, html高
zythum
2015-08-05 18:51:41 +08:00
@zhea55 朱一有静下心来读了人家代码。
chairuosen
2015-08-05 18:56:38 +08:00
jQuery自己就可以啊 $('<div>') 就是创建
yolio2003
2015-08-05 18:57:30 +08:00
难道不是 cheerio ?
不知道楼上在说的哪些是啥
yolio2003
2015-08-05 18:58:05 +08:00
额 我错了 是前端 我不说了 模板库1万种
推荐baidu etpl
chenggiant
2015-08-05 19:44:48 +08:00
Google Closure?
ZnZt
2015-08-06 09:08:55 +08:00
前端模板阿
zhea55
2015-08-06 10:17:03 +08:00
@xujif 没写过createElement就不要bb,你给的测试例子是循环使用createElement不断的添加dom借点

有点经验的人都知道使用document.createDocumentFragment在内存中创建好所有dom元素,最后才添加到dom中。

你猜什么效率高,你是个猪,你就知道什么效率高? 操作内存不比浏览器自己解析字符串,然后根据字符串的含义,一个个创建的效率高?

你能先看玩c++的书,再跟我bb?
zhea55
2015-08-06 10:39:08 +08:00
@zythum 性能差异微乎其微?好意思说出口?

你看老外现在研究的前端框架,没什么人讨论jquery了吧?因为大家都会用了,现在要求精了

react为什么这么多人用,难道不是因为别人的性能高? react的开发成本比jquery可高多了


假设你只要完成任务,ok你现在的技能足够了。假设你要做的性能好,远远不够。

代码级别的性能就应该开始追求,那怕一点点。
xujif
2015-08-06 10:39:09 +08:00
@zhea55 talk is cheap 。 我没研究过createElement,但是我学过编译原理。另外,如果没有linus的技术,就不要出口成脏
zhea55
2015-08-06 10:49:19 +08:00
@xujif http://jsperf.com/appendchild-vs-documentfragment-vs-innerhtml/61


sb东西 性能高了40% 另外createDocumentFragment这个方法dom结构只会reflow一次

作为一个程序员,天天写些垃圾代码,从不思考怎么提升代码性能,有什么用?
xujif
2015-08-06 11:14:09 +08:00
@zhea55 你既然知道reflow了,拿个 innerHtml+= 出来说少了40也不嫌丢人
更适合模板引擎的case是这个,https://jsperf.com/innerhtml-vs-createelement-test/7
另外即使是61这个case,我猜你肯定是用chrome,你敢把相同的代码放到edge,ie里试试吗
作为一个程序员,我就不说维护性问题。除非你是写编译器的,不然能交给编译器优化的东西竟然自己优化,你确定你在思考怎么提高代码性能?
zhea55
2015-08-06 11:20:22 +08:00
@xujif 你是sb吗 你不知道手动操作内存,比自动的效率高很多吗。

懒得和你当键盘侠了,你去问问做ios的 资深的 看 手动效率高 还是 自动高。。

自动是因为程序员能力不足,人家给你一种舒服的方式,降低难度。

真要做好的 还得是手动人工管理的东西。



另外createElement相关方法是DOM 1 specification 里面就有的,也就是说ie6也是支持的。

效率的提升同样适用,别拿你不知道的兼容性说事,你是做前端的吗?

你是做开发吗,写过多少行代码,就研究编译器了?
zythum
2015-08-06 11:26:16 +08:00
@zhea55

1. 都是innerHTML。 不管怎么样操作底层dom api。怎么着都比用react api。react再去调底层dom api来得快。看下源码就知道了,中间经过了多少函数,还有正则, 你完全被react的国内布道者把react魔化了。 react的性能好是针对比如angular这样(angluar的效率低是出了名的...)。react确实比angular快10倍以上。
(vdom 确实比操作真实dom快,dom操作是很慢的。但是最后一步操作dom是跑不掉的。react快是快在中间 patch diff的过程。)

2. 用react或者说用mvvm就是为了降低开发成本, 和模块化成本。

3. 不是追究不追求效率的问题。我就说firefox createElement更快, chrome innerHTML更快, 那我该怎么办。然后过段时间,firefox把innerHTML速度也提升上去了。我又该怎么办。 都是dom低层api。优化是浏览器去做的。我们应该做的是提升上层的效率。还要注意你代码的gc,避免循环引用,提成可维护性。

4. 不是外国的月亮就是圆的。国内的司徒大大的avlaon. 右大的vue都是写的很好的框架。至少代码写的要比react清晰易懂得多。并且效率也比angular快,整体体积还小。你要用一个东西,你需要评估你的需求,用最适合你的。如果市面上没有最适合你的,那么就需要自己造,所以就有那么多自己造轮子的。不是因为他们傻,是他们需要最适合自己的。上面我都说了。就比方出门打个酱油,是坐飞机呢,还是汽车呢,还是自行车呢,还是走路呢...

5. 骂人不好。你自己都说静下心来看人家文档了。

6. 这是朱一最后一次回复你在这个主题。因为跑题了。

=================

对于po主。对不起,说来些没用的。

朱一的建议是看下你的需求。你需要拼很多有逻辑的模版么。
如果逻辑分支很多。那么建议用模版引擎。
如果没有逻辑。就直接innerHTML就行了。
但是如果你不想写html,估计跑不掉了。如果你真的不想写html可以试试jade。 : )
react?
如果你想引入一个200多k的框架代码,并把之前用jquery的代码用react再重写一遍的话。可以试试玩玩。
react还是挺有趣的。
当你用一个东西的时候建议把他搞清楚他是怎么工作的,大部分的所谓的坑都是因为没有把它搞清楚造成的。
zhea55
2015-08-06 11:40:08 +08:00
@zythum “优化是浏览器去做的”

行了,没别的了,你做的东西我明白了。


楼主问这个问题说明他不是很清楚。这个时候他该使用bom的一些原生方法去渲染结构。

只有经历过这些,才会思考,有没有更好的方法。怎样做更好。

模版引擎是怎么实现的。他们有哪些差异...


什么都不明白就直接开始用模版引擎,就跟你现在一样,对性能一无所知。

就等着浏览器帮你优化。当然大多数应用不太需要这些性能的提升。


但移动端或许需要,以及未来更多的智能设备。
xujif
2015-08-06 11:52:42 +08:00
@zhea55 你看有其他人来打你脸了, 你拿ios和js类比就知道你有多么”业余",你知道托管代码和非托管的区别吗?js我可能说不上“精通”, 但是我知道交给dom api后,操作内存的是非托管代码,效率和js的操作是数量级的差别。
ie6里的innerhtml效率比createElement高多了知道吗
手动操作内存不一定比自动效率高,除非程序员真的知道他在写什么。现代语言的发展方向(rust等)有两种,一种是增加gc效率,一种是对程序员的增加约束,提高编译后的性能
ffffwh
2015-08-06 13:27:57 +08:00
zhea55
2015-08-06 13:51:10 +08:00
@xujif 所有的编程语言里面的思想,理念都是相通的。只有你这样的sb才会觉得不能类比。

你举得性能例子是为的举例而举例。
渲染数据一般都是要渲染一些集合,是需要用到循环的。

我举得例子是我实际开发经验中,经常碰到的,的确能提升性能的例子。

你讲技术,讲不出个东西,一说到一些深的东西,你说你不清楚。

你不清楚就不要装b,搞的好像你要在你不懂的领域装b,别人看不出你是个sb一样。

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/210884

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX