是否有用于 javascript 的现代/轻量级布局库，可用于 backbone.js 等？答案

【问题标题】：Is there a modern / lightweight layout library for javascript for use with backbone.js or the like?是否有用于 javascript 的现代/轻量级布局库，可用于 backbone.js 等？
【发布时间】：2011-09-03 01:30:40
【问题描述】：

我在中断后回到 Web UI，并希望使用主干.js（或 batman.js，如果它曾经贬低）、node.js、通过 now.js 等进行通信来创建一个现代的单页 JavaScript 应用程序- 但我的问题是我该如何布置？ CSS 不是这种情况下的最佳选择，而且我相信 css 固定定位在 iPad 上不起作用（而且 css 布局毁了我的灵魂）。理想情况下，该库适用于桌面和移动布局，但这并不是严格的要求，因为似乎有一些库可以很好地处理移动布局。

我只关心支持现代浏览器（webkit 和 FF），并且希望对所有内容都使用 css3 动画和渲染，而不是传统动画和圆角技巧。我也不关心旧浏览器或禁用 js 的人是否无法查看该网站。

似乎很多人都在使用 JQuery（JQuery UI 插件？）或类似的“传统”库，但随着现代 js 库的爆炸式增长，我很惊讶没有独立的东西可以与骨干.js。我看到了 jLayout (http://www.bramstein.com/projects/jlayout/)，但它缺少我需要的功能（边框布局中的可拖动/可折叠窗格等）。

那么我应该只使用传统框架，例如 JQuery + UI 插件或 Mootools MochaUI 吗？ ExtJS 由于许可而退出，UKI 看起来很有希望，但似乎疯狂地缺乏记录。有没有人对这些有很好的经验，或者还有其他选择吗？还是我应该重新考虑 CSS 布局的痛苦可能性？

更新：

谢谢各位。除非我遗漏了一些东西，否则所有的模板解决方案都只是 - 模板解决方案，而不是可以做我想要的布局框架（具有固定区域的边框布局等）。似乎共识是我应该坚持使用 CSS，可能使用 Compass + Sass 之类的东西？我的理解和经验是，很难进行 fixed-region 边框布局，它可以跨浏览器工作并且不会在移动设备上失败，但我可能会走得很远。我也不确定我是否理解模板在这里的作用，它是自动渲染区域和模型对吗？

【问题讨论】：

反正都是CSS，不如硬着头皮学吧。当“layout”和“ui”框架没有做你想做的事情时，它会为你省去很多麻烦。
同意 Jeremy 的观点，CSS 并不完美，但它是布局网站的最佳解决方案。唯一的其他选择是 gasp 表格。
是您的更新——我确实链接了其中一些所谓的布局框架。 ajax.org、google gwt 和 cappucino 都使用基于 javascript 的 ui 生成。 gwt 将具有诸如“面板”之类的概念，并且诸如您正在谈论的具有边框/布局区域的概念。但是，我认为这些是巨大的依赖关系。 html/css 已经走过了漫长的道路，如果您的目标是较新的浏览器，固定布局并不难做到

标签： javascript jquery layout backbone.js

【解决方案1】：

您的问题听起来不像是在寻找 javascript 框架，而更像是在寻找有助于页面布局的东西。我大量使用 Backbone，并且刚刚开始涉足蝙蝠侠。我认为没有理由不使用这些库/框架。我更喜欢使用 lightweight tools 并避免使用单体框架。

在我看来，如果您正在构建单页 Web 应用程序，那么扎实的 CSS 知识是必不可少的。我完全同意你应该咬紧牙关学习它。使用 Less、Stylus 或 SASS 来简化您的 CSS 是完全可以接受的，但您仍然应该了解这些工具生成的底层 CSS。我个人在这个时候使用 Stylus。

如果您想快速启动您的项目并在进行中学习 CSS，您可能需要查看一些项目。这些将帮助您快速启动和运行，并减少您需要从头开始创建的 CSS 数量。

【解决方案2】：

我不会使用它们，但是有一些工具包可以进行布局抽象。

正如评论者所建议的那样，如果我是你，我会咬紧牙关。骨干.js 非常接近金属，对现代 css/html 组合的深刻理解是非常必要的。

我会使用模板和类似 sass 的语言来让 css 更受欢迎。

模板：

小胡子：http://mustache.github.com/
一堆特定于语言的语言，如玉、haml 等

CSS 元语言：

萨斯：http://sass-lang.com/
少：http://lesscss.org/
特定语言的，如手写笔：http://learnboost.github.com/stylus/

乔什

【讨论】：

thanks josh 我正要发表评论并表示感谢，但我已经排除了 GWT 和 cappuccino 已经看过它们并希望避免使用单体库 - 只是在谷歌上搜索 css3 边框布局并没有找到很多 - 假设那是另一个 SO 问题，谢谢

【解决方案3】：

也许microjs 可能对您有用。您可以查看templating 库和css animation 库，甚至可能查看single page app 库。

【讨论】：

感谢 Alex，我不知道 microjs，这很棒，虽然我不确定模板库是否有助于解决我的布局问题

【解决方案4】：

最好的 js 布局插件：

http://masonry.desandro.com

【讨论】：

很不错的框架...你能用它实现边框布局吗？
不做边框布局。它构建的页面有点像一堵砖墙。对于边框布局，试试这个。 layout.jquery-dev.net我以前用过，还不错。 JQueryUI 人员和作者之间曾讨论将其合并到 JQueryUI 中，但不确定何时/是否会发生。它具有您所说的可拖动/可折叠窗格。在此处查看演示：layout.jquery-dev.net/demos.cfm

【解决方案5】：

一个非常有趣和超轻量级的是Tempo JS。非常好的 json 渲染引擎，你会找到关于 tempo+backbone 的文章。

【讨论】：

是否有用于 javascript 的现代/轻量级布局库，可用于 backbone.js 等？

HTML5Boilerplate

Twitter Bootstrap

Semantic.gs

jQuery UI Layout

Template Precompiler