如何拆分 Javascript 和 HTML 文件？答案

【问题标题】：How to split Javascript and HTML Files?如何拆分 Javascript 和 HTML 文件？
【发布时间】：2013-06-18 09:53:48
【问题描述】：

我目前正在使用 jQuery Mobile。拆分 Javascript 和 HTML 文件的最佳方法是什么？是否可以创建单个视图，并使用 Ajax 将它们加载到代码中？

例子：

view.html

<li>
    <img src="{$image}" alt="{$title}" /> {$title}
</li>

Javascript 代码：

for(var i = 0; i < data.channels.length; i++)
{
    var url = data.channels[i].url,
    image = data.channels[i].image,
    title = data.channels[i].name;

    // load view.html and replace variables in each loop, than append view into an div
}

它也可能是一个与 jQuery Mobile 配合良好的 MVC 框架。谢谢！

【问题讨论】：

是的，这是可能的，但是这个答案对你有什么帮助？
你能说我也怎么样？问题是我在坑WebAPP中有很多Javascript代码，而且有些视图在更多页面中使用。
问题不在于视图，而在于如何将服务器变量传递给它们。你必须有一个控制器来管理这个。正如我所见，您在视图中使用 Smarty。
如何将视图加载到变量中，并用 .replace() 替换视图的变量？你能告诉我一种将视图加载到变量中的好方法吗？
这不是办法。

标签： javascript jquery html jquery-mobile model-view-controller

【解决方案1】：

我认为 AngularJS 会允许这样的数据绑定：http://angularjs.org/

显然你还需要某种适配器：https://github.com/opitzconsulting/jquery-mobile-angular-adapter

一般来说，对于拥有多个 js 文件，我会推荐 RequireJS（我不知道 AngularJS 是否有自己的解决方案来解决需要解决的问题。

【讨论】：

【解决方案2】：

我找到了一个非常好的解决方案，用 jquery.tmpl 分割 HTML 和 Javascript 文件！

官方支持的插件：https://github.com/BorisMoore/jquery-tmpl

我现在将整个 HTML 保存在单个文件中。

例子：

模板/channel_row.html

<li>
    <a href="somelink.html?id=${id}" data-transition="slide">
        <img src="#" data-src="${image}" alt="" class="ui-li-icon ui-corner-none" />
        ${name}
    </a>
</li>

我正在调用这个文件：

// array with all channels
var channels = [];

for(var i = 0; i < data.channels.length; i++)
{
    // data
    var channel = {
        id: data.channels[i].id,
        name: data.channels[i].name,
        image: data.channels[i].image
    };

    // ad channel to array
    channels.push(channel);
}

$.get("templates/channel_row.html", function(template) {
        $.tmpl(template, channels).appendTo("#listview_channels");
});

希望对你有所帮助。

【讨论】：