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

Question

我正在尝试构建一个快速而脏的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的事情,但我想得到一些反馈,看看其他人的想法.

Answer 1

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

至于您的页面是否需要启用爬虫，您必须使用 PhantomJS 之类的东西来构建“页面”的快照以供蜘蛛使用。

这是一个可以帮助您的角度模块： https: //github.com/steeve/angular-seo

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