V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX 提问指南
cqcn1991
V2EX  ›  问与答

想写个 JS 插件,怎么在 JS 里面写 HTML 比较好?

  •  
  •   cqcn1991 · 2016-02-20 22:28:57 +08:00 · 2774 次点击
    这是一个创建于 3199 天前的主题,其中的信息可能已经有所发展或是发生改变。

    从来没用过 JS 写 web 插件,所以想请教一下

    想给 Ipython Notebook 写个 navigation 插件,看起来差不多如此

    项目里已经有了一个: https://github.com/ipython-contrib/IPython-notebook-extensions/blob/master/nbextensions/usability/toc2/main.js

    我的问题是,里面的 HTML 内容,都是用 js 写的,看起来很不直观,也加大了维护难度

    我想问问,可不可以像写 Rails 一样,写成一个模版和 behavior 的东西,
    比如,直接写成

    <div class="table-of-content">
      <%= title.each do |title| %>
        <h1><%= title.content %></h1>
      <% end  %>
    </div>
    ### 下面再具体声明某个 component 的 behavior
    

    这样,看起来会比 js 里面写一些make_node的函数看起来舒服,也更容易开发一点(似乎 ReactJS 就是如此?)

    想问一下,可不可以这样写呢?(比如先写成一种文件,然后可以再自动转换成传统的 js 文件)
    又应该怎么做?

    谢谢!

    13 条回复    2016-02-22 12:28:46 +08:00
    lxrmido
        1
    lxrmido  
       2016-02-20 23:15:10 +08:00
    react 是一种方法;
    还有就是 ES6 自带的``符号可以当模板语言用;
    以及你搜索“ JS 模板引擎”会找到许多轮子

    ---------------------------
    其实,只能写在 JS 里的话,你就用'<div>' + xxx + '</div>'的形式好了……
    cqcn1991
        2
    cqcn1991  
    OP
       2016-02-20 23:18:26 +08:00
    @lxrmido 但是 react 可以生成静态 js 然后来做成这种传统的`js+html+css`的插件吗?
    就是模板引擎不了解,所以想来问问

    有没有啥具体例子?
    jjplay
        3
    jjplay  
       2016-02-20 23:21:26 +08:00
    http://aui.github.io/artTemplate/
    http://juicer.name/

    这种纯渲染成 HTML 的模板引擎?
    BOYPT
        4
    BOYPT  
       2016-02-21 02:12:25 +08:00
    其实就是要 js 模板引擎吧,可以让这个网站帮你选择一个: https://garann.github.io/template-chooser/

    比较简易的,我建议用 undersocrejs 库里面的 template 函数就好了。
    cqcn1991
        5
    cqcn1991  
    OP
       2016-02-21 07:53:57 +08:00 via iPhone
    @BOYPT
    @jjplay

    大概看了一下模板引擎是啥意思,我觉得和我想要的差不多
    但是,我这里是没有服务器端的,应该最终生成文件就是 html , css, js 。然后用户下载、引入这些文件来使用这个插件。那么,这样还能使用模板引擎吗?
    suconghou
        6
    suconghou  
       2016-02-21 11:46:17 +08:00
    或许 你需要的是模板预编译 http://cdc.tencent.com/?p=7382
    cqcn1991
        7
    cqcn1991  
    OP
       2016-02-21 12:21:36 +08:00
    @suconghou 感觉这个比前面说的更合适我了诶~谢谢!
    不过国外有类似的东西吗?这个 github 都没了...
    daben1990
        8
    daben1990  
       2016-02-21 12:36:21 +08:00
    https://github.com/sindresorhus/multiline/blob/master/index.js

    我们用的这个,可以在 js 里面,正常写 html

    var str = multiline(function() {/*!@tpl
    <!doctype html>
    <html>
    <body>
    <h1>❤ unicorns</h1>
    </body>
    </html>
    */
    console.log();
    })
    suconghou
        9
    suconghou  
       2016-02-21 14:28:21 +08:00
    @cqcn1991 改名了,其实就是 artTemplate 的预编译工具 , https://github.com/aui/artTemplate https://github.com/aui/tmodjs
    BOYPT
        10
    BOYPT  
       2016-02-21 15:14:11 +08:00
    @cqcn1991 模板引擎多数都可以客户端服务器端通用的,客户端用的时候,一般模板写在 html 里面,用<script type="text/template">括着。你看看那些模板引擎的例子就可以了。
    完全在 js 里面写我个人觉得不好,虽然也可以.
    cqcn1991
        11
    cqcn1991  
    OP
       2016-02-21 16:03:32 +08:00 via iPhone
    @BOYPT 那应该咋写?求教一下 best practice
    BOYPT
        12
    BOYPT  
       2016-02-21 16:07:56 +08:00
    @cqcn1991 你看例子啊,比如我找那个体积最小的 micro template : http://ejohn.org/blog/javascript-micro-templating/
    主页上就有例子。其实多数模板引擎都大同小异。
    cqcn1991
        13
    cqcn1991  
    OP
       2016-02-22 12:28:46 +08:00
    @lxrmido
    @jjplay
    @BOYPT
    @daben1990
    @suconghou

    感谢楼上各位的回答,感觉 js template 并不是很了解。似乎 React JS 确实能解决我的问题
    我目前打算先试试用 React JS, 然后再试试 Js 模版
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2433 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 24ms · UTC 15:56 · PVG 23:56 · LAX 07:56 · JFK 10:56
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.