有没有适用于backbone.js或类似框架的现代/轻量级JavaScript布局库？

Question

我已经有一段时间没有涉及Web UI了，现在想用backbone.js（或者batman.js，如果它解禁的话）、node.js和now.js通信来创建一个现代化的单页JavaScript应用程序，但我的问题是如何布局？CSS对于这种情况不是最优的选择，而且我认为CSS固定定位在iPad上不起作用（CSS布局毁了我的灵魂）。理想情况下，库可以适用于桌面和移动端布局，但这并不是必须的，因为似乎有处理移动端布局的库。

我只关心支持现代浏览器（webkit和FF），并希望使用CSS3动画和渲染来完成所有工作，而不是使用旧的动画和圆角技巧。我也不在乎那些老旧的浏览器或禁用JS的人无法查看网站。

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

那么我应该选择传统的框架，如JQuery + UI插件或Mootools MochaUI吗？由于许可证的原因，ExtJS被排除在外，UKI看起来很有前途，但文档非常匮乏。有没有人对这些有良好的经验，或者还有其他选择？或者我应该重新考虑痛苦的CSS布局的可能性？

更新：

谢谢大家。除非我遗漏了什么，所有模板解决方案都只是模板解决方案，而不是可以做我想要的布局框架（带有固定区域等）。那么，总体意见似乎是我应该坚持使用CSS，可能使用类似Compass + Sass的东西？我的理解和经验是，在跨浏览器工作并且不会在移动设备上失败的情况下很难进行固定区域边框布局，但我可能完全错了。我也不确定模板在这里的作用是什么，它是自动呈现区域和模型的吗？

- user445994

---

反正这都是 CSS，所以你最好硬着头皮学一下。当“布局”和“UI”框架不能满足你的需求时，学习 CSS 可以避免很多麻烦。 - Jeremy

同意Jeremy的看法，CSS虽然不完美，但它是布局网站的最佳解决方案。唯一的其他选择是咳嗽表格。 - T Nguyen

关于你的更新 - 我确实链接了一些所谓的布局框架。ajax.org、Google GWT和Cappucino都使用基于JavaScript的UI生成。GWT将具有像“面板”之类的概念，这些概念具有边框/布局区域，就像你所说的那样。但是，我认为这些是巨大的依赖项。HTML/CSS已经发展了很长一段时间，如果您针对较新的浏览器，则固定布局并不难做到。 - Josh

Answer 1

你的问题似乎不是在寻找JavaScript框架，而更像是在寻找有助于页面布局的东西。我经常使用Backbone，最近也开始尝试Batman。我认为没有理由不使用这些库/框架。我更喜欢使用轻量级工具，避免使用庞大的框架。

在我看来，如果你正在构建单页Web应用程序，对CSS的扎实掌握至关重要。我完全同意你应该下决心去学习它。使用Less、Stylus或SASS简化CSS是完全可以接受的，但你仍然应该了解这些工具生成的基本CSS。目前我个人使用Stylus。

如果你想快速启动项目并边做边学习CSS，有几个项目可能值得一看。这些将帮助你快速上手，减少需要从头开始创建的CSS数量。 HTML5Boilerplate 这是一个关于HTML的良好起点，包含了稳定的CSS重置。个人认为不需要使用整个重置，可以根据自己的需求进行定制。现在没有理由不使用HTML5。即使您不使用HTML5Boilerplate，仍然应该考虑使用Modernizr和YepNope进行特性检测和polyfill资源加载。 Twitter Bootstrap是一个项目，其中包括各种CSS样板，以使许多常见的布局功能保持一致和美观。请注意，这将使您的应用程序具有“twitterish”的感觉，但当然您可以对其进行调整以使其看起来不同。它使用LESS更轻松地管理CSS。我可能会在某个时候fork并将其转换为stylus。

Semantic.gs

Semantic Grid System提供了一个网格系统，无需在标记中填充.grid_x类。我还没有使用它，但计划很快尝试一下。您可能会发现它有助于创建布局。它还使用LESS。同样，我可能会分叉并转换为stylus。

jQuery UI Layout

这是一个强大的布局插件，我正在我的应用程序中使用它，虽然它相当沉重，但最近我考虑将其删除并使用自定义CSS / javascript。我创建了一个选项卡界面布局和自定义主题并将其贡献给了UI Layout项目的Kevin。也许您会发现它有用。这里是基于jquery的其他布局解决方案列表。

模板预编译器

有许多模板解决方案，包括underscore模板、jquery模板、mustache、jade、coffeekup等等。我目前正在使用Jade，并使用node.js创建了tmpl-precompile项目来编译、合并和压缩/混淆Jade模板为可执行的JavaScript函数，可以服务于客户端。预编译的uglified模板与原始HTML模板相比大小差别不大，而且无需在客户端进行编译。在Backbone中使用这些模板只需要在render方法中调用一个函数即可。

- Tauren

Answer 2

也许microjs对你有用。你可以看看模板库和CSS动画库，甚至可能还有单页应用库。请注意保留HTML标签。

- Alex

---

谢谢Alex，我不知道microjs，这很棒，虽然我不确定模板库是否能帮助解决我的布局问题。 - user445994

Answer 3

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

• http://code.google.com/webtoolkit/
• http://cappuccino.org/
• http://ui.ajax.org/#home

正如评论者所建议的那样，如果我是你，我会咬紧牙关。backbone.js非常接近于底层，对现代css/html组合的扎实理解在我看来非常必要。

我会使用模板和可能是像sass这样的语言使css更易于理解。

模板：

• Mustache：http://mustache.github.com/
• 许多特定于语言的模板，如jade、haml等

CSS元语言：

• sass：http://sass-lang.com/
• less：http://lesscss.org/
• 特定于语言的元语言，如stylus：http://learnboost.github.com/stylus/

Josh

- Josh

---

谢谢Josh，我正要发表评论并表示感谢，但我已经排除了GWT和Cappuccino，因为我已经看过它们并想避免使用庞大的库——我一直在Google关于CSS3边框布局的信息，但没有找到太多——这可能是另一个需要在Stack Overflow上提问的问题。 - user445994

Answer 4

这是最好的JS布局插件： http://masonry.desandro.com

- 34m0

---

真的很好的框架...你能用它实现边框布局吗？ - user445994

不使用边框布局。它构建页面有点像砖墙一样。如果要使用边框布局，请尝试这个：http://layout.jquery-dev.net/ 我以前用过，效果还不错。JQueryUI的人员和作者之间曾经讨论将其纳入JQueryUI中，但不确定何时/是否会发生。它具有您所说的可拖动/可折叠窗格。在这里查看演示：http://layout.jquery-dev.net/demos.cfm - 34m0

Answer 5

一个非常有趣且超轻量级的工具是Tempo JS，它有很好的JSON渲染引擎并且你会找到关于tempo+backbone的文章。

- Necrower