如何在 JS 中嵌入 HTML 代码

大段的 HTML 嵌入到 JS 里结果就是悲剧。不能代码高亮不能自动缩进，太难维护了。

我的经验是，直接把 HTML 单独写到一个浏览器能访问到的文件里，比如 template/foo.html。然后 JS 里发一个同步 XHR 请求去读这个文件，例如：

var html = Template.load('/template/foo.html')

var target = document.getElementById('xxx')

target.innerHTML = html

Template 是一个工具类，负责发送同步 XHR 请求并返回结果。

这样在开发的时候，模板文件和 JS 代码分离，非常好维护。

当然这样做的话，上线的时候总发 XHR 请求也不是办法。所以在打包 JS 之前，我一般会通过脚本把所有的 Template.load('.*') 提取出来，替换成对应 HTML 的内容。这样在开发时非常方便，上线时也没有性能问题。

比如上面的代码被打包工具跑一下就变成了：

var html = "\n...\n"// 引号里是 /template/foo.html 对引号、换行做了转义之后的内容，由工具自动生成

var target = document.getElementById('xxx')

target.innerHTML = html

类似于这样的方式

<script src="public/echarts.min.js"></script>

将js文件引入html页面中即可

<!--#include file="Conn.asp"-->

<title>也可以用另一种方案：页面全前端，ajax给后台asp获取数据然后赋值</title>

<style>

    table{}

    table tr td{text-align:centerbox-shadow: 0 0 0 1px #00cafc, 1px 1px 6px 1px rgba(10, 10, 0, 0.5)}

</style>

<div style="border:1px solid #f60padding:15px">

<%

    Dim rs,sql,title,uname,k

    set rs=server.createobject("adodb.recordset")

    sql="select top 20 * from sjsj order by id desc"

    rs.open sql,conn,1,1

    if rs.bof and rs.eof then

        response.write "<div class='error'>error!</div>"

    else

        k=1

        response.write "<table><tr><td width=100>ID</td><td width=120>第一项</td><td width=200>第二项</td></tr>"

        do while not rs.eof

            response.write "<tr><td>"&k&"</td><td>"&rs("id")&"</td><td>"&rs("kid")&"</td></tr>"

            k=k+1

            rs.movenext

        loop

        response.write "</table>OK!"

    end if

    rs.close

    set rs=nothing

%>

</div>

---