JavaScript:在服务器和服务器上执行DOM依赖代码的最佳实践。客户端?

时间:2014-01-17 07:10:13

标签: javascript node.js express single-page-application browserify

背景

从2年多前开始(使用Batman.js& node.js)我开始尝试在服务器和客户端上执行相同的DOM代码。这需要具有可以使用pushState呈现的SPA(单页应用程序),并且可以在已经为SEO呈现的页面的路由中访问并且具有卓越的用户体验(没有与SPA呈现相关联的页面“flash”)页面加载后的元素)。这通常涉及在if语句中包装模块,以检查模块是在window中执行还是在require.js中被执行,或者作为node.js中的模块等。

客户端+服务器SPA的当前实现

Rendr& Ezel都试图帮助将客户端+服务器代码共享和DOM呈现功能引入Backbone SPA。 Ezel在Backbone模型/集合中具有魔力,但在客户端上使用Express + Jade时,在服务器上使用Backbone.View + Jade呈现视图。这意味着在扩展的Backbone.View中使用Rivets之类的内容不会导致HTML命中Rivets预呈现的客户端。我想构建一些最好的实践和技术来自己渲染DOM服务器端以保持简单(在一个地方编辑视图代码)和灵活(能够添加Ezel当前不支持的其他DOM操作模块) )。

所需结果

我希望使用类似Rivets的内容将模型数据注入到视图中,然后在通过HTTP点击整页加载路由时,从Express向浏览器提供页面请求,并且还必须通过客户端上的pushState响应更改。节点中的环境要求是什么让我能够在服务器上使用Rivets来修改HTML并在客户端上保持绑定?如何最好地将jQueryBackboneRivets等引入node.js,让它们在HTML模板的DOM上运行,然后提供结果预先渲染(同时在客户端上保持正常的JS行为)?

相关模块

Sharify& Browserify都是可以帮助在各方之间共享代码的工具。 RivetsBackbone& jQuery都有node.js兼容的发行版。

当前工作

我已开始通过Ezelfork on Github添加功能。

1 个答案:

答案 0 :(得分:2)

通过使用jsdom构建在Ezel之上,我能够实现具有近乎纯粹的同构JavaScript应用程序。 jsdom会导致性能下降,因此我尽可能缓存了在服务器上运行铆钉的结果。

我从https://github.com/adjohnson916/rivets-server获得了一些线索。我无法使用该模块批发,因为它踩了我需要发送到铆钉的几个配置选项(铆钉 - 服务器使用铆钉叉)。

我最初遇到的一个陷阱与使用Sharify& amp;同时铆钉。 Sharify将一个脚本注入到包含一个函数的网页中,并且因为它使用{}进行模板操作而绊倒了铆钉。通过将templateDelimiters改为双花括号,我绕过了这个问题。

同构JavaScript应用程序的主要组件是:

  • 在浏览器的nod​​e.js环境元素中填充的模块,包括require(例如Browserify)
  • 在服务器上使用首次运行数据绑定库的能力(例如jsdom运行铆钉)。使用这个而不是Ezel使用node-jadeify的方法(我做出贡献)优于Ezel,其中渲染必须以不同的方式在两个不同的文件中发生。
  • 抽象HTTP请求客户端服务器(例如,骨干超级同步)的差异的模块
  • 一个模块,可让您在客户端和客户端之间共享配置数据。服务器(例如锐化)