如何在 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;

上一篇:馬尼拉免簽嗎

下一篇:如何做音樂混剪?把兩首音樂分段剪在壹起。