有没有一个现代/轻量级的javascript布局库可以与backbone.js等一起使用

Is there a modern / lightweight layout library for javascript for use with backbone.js or the like?

本文关键字：backbone js 一起 布局 有一个 javascript 轻量级      更新时间：2023-09-26

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

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

似乎很多人都在使用JQuery（JQueryUIPlugin？）或类似的"传统"库，但随着现代js库的激增，我很惊讶没有一个独立的库能与backbone.js这样的库很好地匹配。我看到了jLayout(http://www.bramstein.com/projects/jlayout/)但它缺少我需要的功能（边框布局中的可拖动/可折叠窗格等）。

那么，我应该只使用传统的框架，比如JQuery+UI插件或Mootools MochaUI吗？ExtJS由于许可证问题而退出，UKI看起来很有希望，但似乎文档严重不足。有人对这些有很好的经验吗？或者还有其他选择吗？或者我应该重新考虑CSS布局的痛苦可能性？

更新：

谢谢大家。除非我遗漏了什么，否则所有的模板解决方案都只是模板解决方案，而不是可以做我想做的事情的布局框架（带有固定区域的边界布局等）。共识似乎是我应该坚持使用CSS，可能使用Compass+Sass之类的东西吗？我的理解和经验是，很难在移动设备上实现跨浏览器工作且不会失败的固定区域边界布局，但我可能还远远不够。我也不确定我是否理解模板在这里的作用，它是自动渲染区域和模型，对吧？

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

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

如果你想启动你的项目，边做边学CSS，有几个项目你可能想看看。这些项目将帮助你快速启动和运行，并减少你需要从头开始创建的CSS数量。

HTML5浏览器板

这是HTML的一个很好的起点，包括一个坚实的CSS重置。我个人不会使用整个重置并根据我的需要进行自定义。在这一点上确实没有理由不使用HTML5。即使你不使用HTML5浏览器板，仍然可以考虑使用Modernizr和YepNope进行功能检测和polyfill资源加载。

Twitter引导程序

这个项目包括各种各样的CSS样板，以使许多常见的布局功能一致且有吸引力地工作。请注意，这将使您的应用程序具有"；推特式的"；感觉，但你当然可以调整它，使其看起来不同。它使用LESS来更容易地管理CSS。我可能会在某个时候分叉并将其转换为手写笔。

语义.gs

语义网格系统提供了一个没有用.Grid_x类填充标记的网格系统。我还没用过，但我计划很快就用它。您可能会发现它对创建布局很有帮助。它也使用更少。同样，我可能会分叉并转换为手写笔。

jQuery UI布局

这是我在应用程序中使用的一个强大的布局插件，尽管它很重，我最近一直在考虑删除它并使用自定义CSS/javascript。我创建了一个选项卡式界面布局和自定义主题，并将其贡献给UI布局项目的Kevin。也许你会觉得它有用。以下是基于jquery的其他布局解决方案列表。

模板预编译器

有很多模板，包括下划线模板、jquery模板、胡子、翡翠、coffekup等等。我目前正在使用Jade，并使用node.js创建了tmpl预编译项目，以将/uglify-ejade模板编译、组合和压缩为可执行的javascript函数，这些函数可以提供给客户端。未经编译的预编译模板并不比原始HTML模板大多少，而且它们不需要在客户端上编译。在Backbone中使用这些模板就像调用render方法中的函数一样简单。

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

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

正如一位评论者所建议的那样，如果我是你，我会咬紧牙关。backbone.js非常接近金属，对现代css/html组合的扎实理解是必不可少的

我会使用模板和可能的类似sass的语言来让css更容易接受。

模板：

  • 芥末：http://mustache.github.com/
  • 一堆特定语言的东西，比如玉、哈姆等等

CSS元语言：

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

Josh

也许microjs对你有用。您可以查看模板库和css动画库，甚至可能是单页应用程序库。

最好的js布局插件：

http://masonry.desandro.com

Tempo JS是一款非常有趣且超轻的产品。非常好的json渲染引擎，你会发现关于tempo+主干网的文章。

相关文章：