在頁面加載時將服務器端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

這些日子當然有很多想法。

AirBnB的人提出了Rendr

和裝飾主義想出了艾澤爾

兩者都不成熟，兩者都可以從更多的思想貢獻中受益。

此外，使用Backbone和Node可能並非巧合。 與Backbone相比，在服務器上使用像Angular或Ember這樣的框架可能會非常困難。 如果您要在服務器上使用JS進行渲染，那么使用JS服務器會更有意義。

Answer 2

Angular是一個很好的方式，它肯定會讓你的生活更輕松（在我看來）。

至於您是否需要使用爬蟲程序，您必須使用像PhantomJS這樣的東西來構建蜘蛛消耗的“頁面”快照。

這是一個角度模塊，可以幫助您： https ： //github.com/steeve/angular-seo

有關AJAX應用程序和抓取工具的更多信息： https ： //developers.google.com/webmasters/ajax-crawling/