想写个 JS 插件，怎么在 JS 里面写 HTML 比较好？

2016-02-20 22:28:57 +08:00
 cqcn1991

从来没用过 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 文件）
又应该怎么做？

谢谢！

2786 次点击
所在节点    问与答
13 条回复
lxrmido
2016-02-20 23:15:10 +08:00
react 是一种方法；
还有就是 ES6 自带的``符号可以当模板语言用；
以及你搜索“ JS 模板引擎”会找到许多轮子

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

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

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

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

大概看了一下模板引擎是啥意思，我觉得和我想要的差不多
但是，我这里是没有服务器端的，应该最终生成文件就是 html ， css, js 。然后用户下载、引入这些文件来使用这个插件。那么，这样还能使用模板引擎吗？
suconghou
2016-02-21 11:46:17 +08:00
或许 你需要的是模板预编译 http://cdc.tencent.com/?p=7382
cqcn1991
2016-02-21 12:21:36 +08:00
@suconghou 感觉这个比前面说的更合适我了诶~谢谢！
不过国外有类似的东西吗？这个 github 都没了...
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
2016-02-21 14:28:21 +08:00
@cqcn1991 改名了,其实就是 artTemplate 的预编译工具 , https://github.com/aui/artTemplate https://github.com/aui/tmodjs
BOYPT
2016-02-21 15:14:11 +08:00
@cqcn1991 模板引擎多数都可以客户端服务器端通用的，客户端用的时候，一般模板写在 html 里面，用<script type="text/template">括着。你看看那些模板引擎的例子就可以了。
完全在 js 里面写我个人觉得不好，虽然也可以.
cqcn1991
2016-02-21 16:03:32 +08:00
@BOYPT 那应该咋写？求教一下 best practice
BOYPT
2016-02-21 16:07:56 +08:00
@cqcn1991 你看例子啊，比如我找那个体积最小的 micro template ： http://ejohn.org/blog/javascript-micro-templating/
主页上就有例子。其实多数模板引擎都大同小异。
cqcn1991
2016-02-22 12:28:46 +08:00
@lxrmido
@jjplay
@BOYPT
@daben1990
@suconghou

感谢楼上各位的回答，感觉 js template 并不是很了解。似乎 React JS 确实能解决我的问题
我目前打算先试试用 React JS, 然后再试试 Js 模版

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

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

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

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

© 2021 V2EX