你推荐使用哪些Javascript/Css/HTML框架和库的组合？

Question

我希望通过一些很酷的库来现代化我的网站开发，但是有很多工具可以做不同的事情，常常有重叠，很难决定。

我对一个框架不感兴趣，更多地是想要不同工具的结合，能够良好地协同工作。我看过重置和规范化、样板文件、HTML框架、网格框架、CSS编写框架、CSS框架、JavaScript框架、DOM操作、AJAX、资源加载、特性检测和UI库、JavaScript工具箱、服务器端预处理器和客户端预处理器以及框架生成器。这真是美丽的混沌。

我还期待使用SASS和Coffeescript或类似的东西，所以其中包含这些内容的组合会很不错。

更新：我已经决定使用JQuery进行DOM操纵，同时也希望有某种启动/快速启动工具。

- Eli Sakobo

Answer 1

这取决于什么。 用你最擅长的技能！

然而，以下是一些建议...

轻量级工具

对于快速、简单的开发，我建议使用：

• Underscore 用于普通的JavaScript开发
• BackBone 用于客户端/服务器通信（使用jQuery或Zepto.js进行AJAX调用）和设计模型和事件总线
• Jasmine 用于JS测试
• SASS 用于更酷的CSS
• HTML框架是什么？ :)

CoffeeScript确实很棒，如果你想走这条路。如果你对CoffeeScript感兴趣，你可能也想看看谷歌的Dart，但它相对较新。

重量级选手（内含电池）

如果你正在构建一个相当复杂的 web 应用程序（这里说的更多是数千行代码），你需要提高它的水平，在这种情况下，我建议你看看：

• Dojo 工具包
• Sencha 的 ExtJS
• 整个 Google Closure Tools 堆栈

Dojo 和 Closure 可以集成在复杂的构建系统中，它们的编译器可以很好地模块化您的代码库，并使生成强烈优化的交付包容易。它们还都包含自己的模块加载系统，因此您不需要像Require.JS这样的其他库，如果您使用自定义构建，则只会加载您明确告诉它们要加载的部分。但请注意，它们肯定需要更多的实践经验，并有一个更陡峭的学习曲线。

Google Closure Tools 确实非常全面，就像内置电池一样，但它们未必能让您轻松开发：它们赋予您权力，但您需要知道自己在做什么。

引导程序 / 启动器

一些解决方案提供“启动器”来为您预打包一些上述工具的集合，有时甚至提供一些自定义选项，以便您可以轻松入手，而无需维护自己的启动器以更新新版本:

• Bootstrap
• Foundation
• HTML5Boilerplate
• Kickstart
• Skeleton

警告：我自己并没有详细尝试这些启动器。

- haylem

Answer 2

很明显，这里的答案取决于你正在构建什么。如果你真的涉足前端工程和制作单页Web应用程序，我建议阅读Addy Osmani的博客。最近，他一直在写博客并发表了许多关于javascript MVC / MVP / MVVM系统以及扩展javascript应用程序的演讲。

如果你想要一个清单，请阅读这篇文章，他在其中提供了他的理想堆栈：

• Backbone.js是轻量级MV*框架
• Require.js + AMD + RequireJS text add-on（用于辅助管理外部模板）
• Backbone.js LayoutManager（如果您需要更智能的布局管理）
• jQuery用于DOM操作
• Handlebars.js用于模板化，除非您正在做一些简单的事情，否则请选择Underscore's Micro-templating
• r.js用于处理脚本优化
• Jasmine + Jenkins用于测试和CI
• Node.js + Express（说到Node，Miller Medeiros对如何将其用作构建脚本进行了出色的写作）
• MongoDB作为noSQL数据存储

这与我自己使用的东西非常接近，我可以证明这些库以及整个堆栈解决方案的质量。

- nickf

---

不错的愿望清单。尽管在服务器端需要JS代码（我猜你并不一定要使用整个列表）。 - haylem

Answer 3

1. Angular JS - 太棒了。MVC框架，非常适合快速创建SPA应用程序

2. jQuery - DOM操作 - 适用于效果（淡入淡出、切换等）

   但不要过度依赖它。

3. Angular JS，jQuery - 有人认为它们很好地配合使用。

4. Backbone.js

5. Ember.js

6. React.js - 使用JSX而不是JS，但基本上是相同的东西

<script type='text/jsx'>
    //JSX
</script>

- Oliver

Answer 4

jQuery是JavaScript的一个库，它提供了许多强大的UI插件来控制网页的外观和行为，并通过代码封装浏览器之间的DOM差异，使开发更加方便。

- Doug Domeny

---

不过这并不是 OP 所问的。那只是 Eli 想要的堆栈的一部分。 - haylem