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

Posted 2023-02-22

技术标签:

【中文标题】在页面加载时将服务器端 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 做点什么，但我想得到一些反馈，看看其他人的想法。

【问题讨论】：

略读问题更容易。如果您只阅读粗体字，则无需通读即可了解大部分内容。 【参考方案1】：

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

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

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

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

【讨论】：

【参考方案2】：

这些天肯定有很多想法。

AirBnB 的人想出了Rendr