在页面加载时将服务器端 HTML 转换为 Javascript MVC 的最佳方法是什么？答案

【问题标题】：What's the best way to convert server side HTML into a Javascript MVC on page load?在页面加载时将服务器端 HTML 转换为 Javascript MVC 的最佳方法是什么？
【发布时间】：2014-04-18 15:14:59
【问题描述】：

我正在尝试构建一个快速而肮脏的 Javascript 库，它可以非常轻松地处理初始服务器生成的 HTML 页面，然后在 Javascript 中执行进一步的操作。

我的问题是，大多数 Javascript MVC 解决方案，无论是框架还是模式，都依赖于将数据与服务器返回的 HTML 分开。这里的论点是，这对于构建和构建完整的 Web 应用程序更有效。

但是，它们会减慢页面加载速度，使搜索引擎和其他非 JavaScript 客户端无法使用您的网站。

与其想办法在服务器端运行 JS 来预生成页面，我更希望 让 JS 在页面加载时读取 DOM 并由此创建其初始对象状态。

我正在使用 Django，我的计划是制作适用于 Jinja 和 Handlebars 稍微修改版本的模板。

这样 我可以在服务器端和 JS 中使用相同的代码渲染模板。 我在这里缺少的唯一部分是如何制作它以便 JS 可以构建它的对象表示页面加载时的 DOM。

这是我现在对模板的想法：

<div class="post" js-model="post.id" js-value="{{ id }}">
    <div class="post-header">
        <span js-model="post.author.username" js-value="{{ author.username }}">
            {{ author.username }}
        </span>
        <img src="{{ author.avatar }}" js-model="post.author.avatar" js-value="{{ author-avatar }}">
    </div>
    <p js-model="post.content" js-value="{{ content }}">
        {{ content }}
    </p>
    <div js-model="post.date" js-value="{{ date }}" class="post-footer">
        {{ date }}
    </div>
</div>

然后我的 Javascript 会读取这个并生成这个对象的内部表示。

我可能想多了，最好还是用 Angular 做点什么，但我想得到一些反馈，看看其他人的想法。

【问题讨论】：

略读问题更容易。
如果您只阅读粗体字，则无需通读即可了解大部分内容。

标签： javascript django angularjs handlebars.js frontend

【解决方案1】：

Angular 是一个很好的选择，它肯定会让你的生活更轻松（在我看来）。

如果你需要让你的页面成为爬虫，你必须使用像 PhantomJS 这样的东西来构建你的“页面”的快照以供蜘蛛使用。

这里有一个 Angular 模块可以帮助你：https://github.com/steeve/angular-seo

更多关于 AJAX 应用程序和爬虫的信息：https://developers.google.com/webmasters/ajax-crawling/

【讨论】：

【解决方案2】：

这些天肯定有很多想法。

AirBnB 的人想出了Rendr

Artsy 想出了Ezel

两者都不成熟，都可以从更多的思想贡献中受益。

另外，同时使用 Backbone 和 Node 可能并非巧合。与 Backbone 相比，在服务器上使用 Angular 或 Ember 之类的框架可能非常困难。如果你要在服务器端用 JS 渲染，那么使用 JS 服务器会更有意义。

【讨论】：