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

js里怎么方便的输出大量的html

  •  
  •   sd4399340 · 2012-04-24 21:17:10 +08:00 · 5607 次点击
    这是一个创建于 4596 天前的主题,其中的信息可能已经有所发展或是发生改变。
    是这样一种需求,我要在js读取api从数据库里拿大量数据,
    然后动态生成很多div乱七八糟的,大量的html,怎么样方便点呢,
    js文件里出现大量的html是不是不太雅观啊

    我以前是在html里写一个隐藏的div,把框架搭好,然后js填充这个div,
    然后把这个填充好的div给append到别处去,用完就隐藏掉,再用的时候再append到另外的地方

    大家一般咋解决的?
    20 条回复    1970-01-01 08:00:00 +08:00
    lyxint
        1
    lyxint  
       2012-04-24 21:26:13 +08:00   ❤️ 2
    airyland
        2
    airyland  
       2012-04-24 21:27:17 +08:00
    文本模板用<script type="text/template" id="template">some html {{data}}</script>写在html里。
    用mustache之类的模板引擎render。
    catfan
        3
    catfan  
       2012-04-24 21:37:11 +08:00
    使用此方法建立fragment
    var frag = document.createDocumentFragment();

    在里面塞元素:
    frag.appendChild(xxx);

    然后把它append到需要的地方
    document.getElementById('wrap').append(frag);
    turing
        4
    turing  
       2012-04-24 21:40:21 +08:00
    https://github.com/janl/mustache.js
    +1 使用有规则数据源,确定好DOM结构后按需渲染。
    jjlovegrape
        5
    jjlovegrape  
       2012-04-24 21:47:41 +08:00
    https://github.com/janl/mustache.js +1,在最近的一个项目中使用了mustache,感觉很KISS,配合backbone使用效果更佳。
    http://coenraets.org/blog/2011/12/tutorial-html-templates-with-mustache-js/ 这边是个mustache.js的 tutorial,可能要翻墙。
    rociiu
        6
    rociiu  
       2012-04-24 21:47:56 +08:00
    可以看看 backbone (http://documentcloud.github.com/backbone/) 轻量的前端MVC框架
    sd4399340
        7
    sd4399340  
    OP
       2012-04-24 21:49:34 +08:00
    @turing @lyxint 我也想过模板,这个在非node的环境下也可以用?
    turing
        8
    turing  
       2012-04-24 21:50:27 +08:00
    @sd4399340 mustache可以完全用在客户端,支持js渲染的。
    sd4399340
        9
    sd4399340  
    OP
       2012-04-24 21:52:15 +08:00
    @rociiu 这个前段时间看过的,很好的东西,不过还没怎么懂~呵呵
    POPOEVER
        10
    POPOEVER  
       2012-04-24 21:55:02 +08:00
    其实我跟你一样,我更懒,直接用 jQuery 的 html()+prepend() =_=
    tioover
        11
    tioover  
       2012-04-24 22:10:22 +08:00
    看了一下mustache
    语法会和服务端的冲突,怎么解决?
    jjlovegrape
        12
    jjlovegrape  
       2012-04-24 22:13:51 +08:00   ❤️ 1
    @tioover 为什么会和服务端冲突呢?比较好的方式是,从服务端读取了JSON,然后render模板,模板支持用函数的方法填充,填充可以是{{someFunctiion}},这个函数里处理你想要的数据。{{{}}}这样使用填充的内容不会变转移。
    lene
        13
    lene  
       2012-04-24 22:18:48 +08:00
    介不似那个谁么?学习学习~~~
    zzNucker
        14
    zzNucker  
       2012-04-24 22:28:15 +08:00
    @catfan 的方法是不在第三方框架介入的情况下比较高效的方法
    tioover
        15
    tioover  
       2012-04-24 22:29:28 +08:00
    @jjlovegrape 也对……
    jamev5
        16
    jamev5  
       2012-04-24 22:31:39 +08:00
    @POPOEVER 彼此彼此,先在才知道还有这种办法,受教了。
    sd4399340
        17
    sd4399340  
    OP
       2012-04-24 22:32:44 +08:00
    @lene 矮油,这里你都玩啊~
    paulguo
        18
    paulguo  
       2012-08-30 22:34:31 +08:00
    可以尝试下 Juicer(榨汁机,模板引擎 by Taobao UED):http://juicer.name ,性能较 Mustache 等出众很多。
    kernel1983
        19
    kernel1983  
       2012-08-30 23:43:02 +08:00
    js template, 由于现在underscore.js已经是标配, 直接用它内置的

    backbone依赖underscore, 但是我不依赖backbone
    bitsmix
        20
    bitsmix  
       2012-08-30 23:52:53 +08:00
    t.js 也不错。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2783 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 25ms · UTC 07:46 · PVG 15:46 · LAX 23:46 · JFK 02:46
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.