1.写代码前一定要搞清楚你要解决的问题是什么，你的方案是否能够解决问题。
2.拥有良好的命名规范，注意变量名区分大小写，允许包含字母、数字、美元符号（$）和下划线，但第一个字符不允许是数字，不允许包含空格和其他标点符号。
3.多写代码注释。编写代码时的注释应当尽量全面一些，这便于自己再次浏览代码时好理解。
4.能不使用with语句的时候尽量不要使用with语句，尽量少使用eval ,每次使用eval需要消耗大量时间。
拥有一手好代码的前端开发者，更具有大神风范，所以好代码不仅要精炼，更要易读。
jQuery
jQuery 是一个无需介绍的库。它凭一己之力让跨浏览器网站使用成为现实，同时把 web 带到今天的位置。Web 标准已经被大多数浏览器制造商采纳并真正地尊重，jQuery 是其中的原因之一。jQuery 基金会的使命是“通过开源软件的开发和支持，以及开发社区的合作，改善开放的 web，让每一个人都可以访问它。”
jQuery 是世界上最常用的 JavaScript 库，所有应用程序都应该使用它，除非你不在意程序员的工作效率。它使得 DOM 遍历、事件处理、动画、AJAX 在所有浏览器上变得更简单、更容易。
何时使用 jQuery？一直使用，除非你想使用一个像 Zepto 的轻量级版本。
GitHub:https://github.com/jquery/jquery/jquery
AngularJS
Angular 是流行的企业级框架，许多开发人员都在使用它来构建和维护复杂的 web 应用程序。Angular 的人气非常高，包括 Domino’s Pizza, Ryanair, iTunes Connect, PayPal Checkout, 谷歌等企业都在使用它。Angular 是一个由谷歌支持的开源框架。Angular 自称是 HTML 的一个扩展，用来构建复杂的 web 应用程序。另外如果你熟悉 TypeScript， Angular 2就是用它构建的。
Angular 是一个 MVC 类型的框架。它提供了模型和视图之间的双向数据绑定。该数据绑定允许每当数据改变时，两边自动更新。 它使你能够构建可复用的视图组件。它提供了一个服务框架，使得后端-前端服务通信更容易。最后，它只是普通的 JavaScript。
何时使用 AngularJS？当你正在构建一个复杂的 web 前端应用程序，同时需要一个模块化的框架来处理一切时。
GitHub:https://github.com/angular/angular.js
React
React 是今年最受欢迎的 JavaScript 项目！每个人都似乎在谈论 ReactJS。去年我参加的每一个会议，至少有好几个议题是关于 React 和同家族的其他库（Flux, Redux）的。React 是开源软件，主要由 Facebook 开发，其他大型科技公司也有贡献。React 自称是一个用于构建用户界面的 JavaScript 库。
React 主要是 MVC 中的 V。它的重点完全在 MVC 的 V 部分，忽视应用程序架构的其余部分。它提供了一个组件层，使得创建 UI 元素，组合元素变得更容易。它使用虚拟 DOM，因此优化了渲染，且允许从 node.js 渲染 React。此外，它实现了单向响应的数据流，因此比其他框架更容易理解和使用。
作为 MVC 中的 V，很多项目将 React 结合 Angular 或 Ember 这样的框架使用。
何时使用 React？当你想要一个强大的视图层，但不需要在应用程序的其余部分使用一个复杂的框架，或者你在 Angular、Backbone 或 Ember 应用上需要一个视图层时。当你正试图建立一个同构 web 框架时。
GitHub:https://github.com/facebook/react
Backbone
Backbone 是一个著名的简易框架，适合单个 JavaScript 文件。Backbone 已经存在有一段时间了，是以 CoffeeScript 和 Underscore 闻名的 Jeremy Ashkenas 所开发的。对于一些为小型 web 应用寻找一个结构简单的框架，而不想引入如 Angular 或 Ember 这些大型框架的团队，Backbone 特别受欢迎。
Backbone 提供一个完整的 MVC 框架以及路由。模型允许键-值绑定和数据变化的事件处理。模型（和集合）可以连接到RESTful API。视图具有声明式事件处理，路由在处理 URL 和状态管理上做的很出色。它包含你创建一个单页面应用程序所需要的一切，且没有提供太多东西，没有不必要的复杂度。
何时使用 Backbone？Backbone 是我创建简单 web 应用程序的首选框架。
GitHub:https://github.com/jashkenas/backbone/
Ember
Ember 是一个固执的 web 应用程序框架，关注程序员的工作效率。Ember 比较流行，它的核心团队包括像曾是 Ruby on Rails 和 jQuery 核心团队成员的 Yehuda Katz 的聪明人。Ember 自称是“一个用于创建大规模 web 应用程序的框架”，且不浪费你的时间。它很固执，为你提供了很多选择。
Ember 也是一个 MVC 框架。它包括一个模板和视图引擎，当数据变化时自动更新，就像 Angular，Backbone 和 React 一样。它包含 web组件 的思想，让你使用自己标签扩展 HTML（就像 Angular 一样）。它也有一个知道如何与你的 RESTful API 一起工作的路由和模型引擎。
何时使用 Ember？当你只需要一个可以运行的框架时。当你因为预算紧张或工期很短而不需要灵活性时，请使用 Ember。
GitHub:https://github.com/emberjs/ember.js
Underscore &lodash
有时候 JavaScript 内置的功能导致程序员的效率并不高。总是缺少一个工具函数或一个可以简化代码的函数。Underscore（和 lodash）是一个 JavaScript 库，它提供了一整套工具函数，不需要对内置 JavaScript 对象打补丁。两个库均提供超过 100 个功能助手和其他专用功能，包括 map，filter，invoke，reduce，template, throttle, bind, extend, pick, clone 等更多的函数。
何时使用 Underscore？当你需要一个单独的 JavaScript 文件，来立即提升程序员的工作效率时。
GitHub:https://github.com/jashkenas/underscore
何时使用 lodash？当你需要模块化和性能稍强版本的 Underscore，同时更容易地支持 AMD 和社区插件时。
LodashGitHub:https://github.com/lodash/lodash
D3.js
数据可视化和图表是一种常见的 web 应用程序需求。D3.js 是任何数据操作和可视化的事实标准。它是 GitHub上最受欢迎的项目之一，被数以百计的组织使用。大量的图形，图表和可视化库在 D3 上构建。
D3 允许你操作任何来源的数据文档，转换成 DOM 或/和 SVG 或/和 CSS。D3 关注现代 web 标准，确保你不受任何专有格式的约束，比如 Flash 和 Silverlight。
何时使用 D3.js？在你需要任何形式的可视化的时候。
GitHub:https://github.com/mbostock/d3
Babylon.js
想要构建完全符合现代 web 标准且跨浏览器的视频游戏吗？看看 Babylon.js，它是基于 WebGL 和 JavaScript 的 3d 游戏引擎。你可以创建令人难以置信的包含物理、音频和粒子系统等等的高质量游戏。
何时使用 Babylon.js？无论何时，只要你想做一个视频游戏或任何类型的复杂三维场景，都能用上。
GitHub:https://github.com/BabylonJS/Babylon.js
Three.js
想要构建一个 3D 可视化场景，但不需要一个完整的游戏引擎？three.js 提供了一个轻量级的 3d 库，允许渲染 3d 为 HTML5 画布、SVG 和 WebGL。它是相当简单的库，在 three.js 的展示里有数百个优美的例子。
何时使用Three.js？当你需要一个能输出为 Canvas 的简单的 3D 可视化场景时。
GitHub:https://github.com/mrdoob/three.js/
Mocha&Chai
JavaScript 在很长一段时间内是非常烦人的。测试任何代码通常都被认为是恼人的，但它却是每个开发人员都应该做的事情。每个开发人员似乎总是蔑视和忽略它，而不测试他们的代码。这个恼人的东西有一个解决办法，那就是 Mocha 和 Chai。两个库的名字都来自美味的热饮料，它们都能帮你测试代码，但方式不同。
Mocha 是一个 JavaScript 测试框架，使得你在 node 模块和浏览器 app 中测试异步代码变得更容易。Mocha 测试可以串联运行，可以为正确的测试用例添加异常跟踪的能力。
Chai 是一个行为驱动开发/测试驱动开发的断言库，可以搭配 Mocha 使用。它可以把你需要测试的东西用可读的风格简单地表达出来。
何时使用 Mocha &Chai？总是！请测试你的代码，让世界变得更美好。
Chai GitHub:https://github.com/chaijs/chai
Karma
既然已经把 Mocha 和 Chai 包含在这个列表中了，如果不包含用来运行这些测试或设置持续集成测试的测试运行器，那将是不完整的。Karma 是一款旨在帮助你在不同的浏览器上自动运行测试的工具。它可以帮助你在所有浏览器上运行 Mocha 和 Chai 测试。
不是每个浏览器都运行在所有平台，但幸运的是可以使用一些免费工具来测试其他浏览器，看看 Browser Screenshots。如果你正在 OS X 上运行代码，想测试 Edge 或 IE，可以 免费 使用这个工具。
何时使用 Karma？当你的应用程序有一个完善的测试套件，并希望确保测试在所有浏览器上通过时。
GitHub:https://github.com/karma-runner/karma
PhantomJS
运行完整的浏览器来测试你的代码比较耗内存和 CPU。PhantomJS 允许你运行一个轻量的 WebKit —— Safari 和Chrome（现在是 Blink）后台的渲染引擎。它允许你通过 JavaScript API 运行测试，捕捉截图，监控网络和自动浏览页面。
何时使用 PhantomJS ?当你需要进行更多的测试，操作页面和监视网络请求时。
GitHub:https://github.com/ariya/phantomjs
Grunt &Gulp
为生产环境构建网站，通常涉及到提高性能的任务，比如 JavaScript 和 CSS 的压缩， CoffeeScript/TypeScript 的编译，单元测试，语法检查。也许你已经有一个为网站发布到生产环境的工具链，如果没有，你可以使用任务运行器，比如 Grunt 或Gulp。两者都有大量关于网站的任何转换的插件，为发布到生产环境做好准备。
何时使用 Grunt？当你喜欢写配置文件同时不介意你的任务运行器生成中间文件时。
Grunt GitHub:https://github.com/gruntjs/grunt
何时使用 Gulp？当你喜欢在配置上写代码和利用 node.js 的流功能来加快任务执行时。
Gulp GitHub:https://github.com/gulpjs/gulp
Babel
JavaScript 语言正在迅速发展。ECMAScript2015 于去年夏天发布，它的许多新特性在最新的浏览器上实现了。如果你想看看 ECMAScript 2015 的兼容性，你可以看看来自 @kangax 的这个 表。你会注意到，最新版本的 Edge，Firefox 和 Chrome 已经几乎完全兼容了。
我们并不是生活在一个完美的世界。作为开发人员，我们需要继续支持旧的浏览器，它们没有最新最好的 JavaScript 特性。我们要推进 web 和改善我们的代码库。Babel 是一个 JavaScript 编译器，用于把最新的 JavaScript 标准编译成可在 IE9 等老浏览器上运行的兼容ES5的 JavaScript。它有一些插件，使得 React 开发更容易，甚至可以使用一些不属于该规范的特性（例如ES7）。
何时使用 Babel？当你想使用新的 JavaScript 语言特性，同时还要支持老版本浏览器时。
GitHub:https://github.com/babel/babel
引自：
最佳的 JavaScript 前端框架、库和工具
http://web.jobbole.com/84644/
一、 让代码简洁：一些简略的表达方式也会产生很好的优化eg：x=x+1在不影响功能的情况下可以简写为x++
二、 变量名方法名尽量在不影响语意的情况下简单。（可以选择首字母命名）
eg：定义数组的长度可以取名为：ArrLen而不需要取为ArrayLength。
三、 关于JS的循环，循环是一种常用的流程控制。
JS提供了三种循环：for()、while()、for(in)。在这三种循环中for(in)的效率最差，因为它需要查询Hash键，因此应尽量少用for(in)循环，for()、while()循环的性能基本持平。当然，推荐使用for循环，如果循环变量递增或递减，不要单独对循环变量赋值，而应该使用嵌套的++或–运算符。
四、 如果需要遍历数组，应该先缓存数组长度，将数组长度放入局部变量中，避免多次查询数组长度。
因为我们常常要根据字符串、数组的长度进行循环，而通常这个长度是不变的，比如每次查询a.length，就要额外进行一个操作，而预先把var len=a.length，则就少了一次查询。
五、 尽量选用局部变量而不是全局变量。
局部变量的访问速度要比全局变量的访问速度更快，因为全局变量其实是window对象的成员，而局部变量是放在函数的栈里的。
六、 尽量少使用eval。
每次使用eval需要消耗大量时间，这时候使用JS所支持的闭包可以实现函数模板。
七、 减少对象查找
因为JavaScript的解释性，所以a.b.c.d.e，需要进行至少4次查询操作，先检查a再检查a中的b，再检查b中的c，如此往下。所以如果这样的表达式重复出现，只要可能，应该尽量少出现这样的表达式，可以利用局部变量，把它放入一个临时的地方进行查询。
八、 字符串连接。
如果是追加字符串，最好使用s+=anotherStr操作，而不是要使用s=s+anotherStr。
如果要连接多个字符串，应该少使用+=，如s+=as+=bs+=c应该写成s+=a + b + c；
而如果是收集字符串，比如多次对同一个字符串进行+=操作的话，最好使用一个缓存。怎么用呢？使用JavaScript数组来收集，最后使用join方法连接起来，如下
var buf = new Array()for(var i = 0i <100i++){ buf.push(i.toString())}var all = buf.join("")
九、 类型转换
1. 把数字转换成字符串，应用"" + 1，虽然看起来比较丑一点，但事实上这个效率是最高的，性能上来说：("" +) >String() >.toString() >new String()
尽量使用编译时就能使用的内部操作要比运行时使用的用户操作要快。
String()属于内部函数，所以速度很快，而.toString()要查询原型中的函数，所以速度逊色一些，new String()用于返回一个精确的副本。
2. 浮点数转换成整型，这个更容易出错，很多人喜欢使用parseInt()，其实parseInt()是用于将字符串转换成数字，而不是浮点数和整型之间的转换，我们应该使用Math.floor()或者Math.round()。Math是内部对象，所以Math.floor()其实并没有多少查询方法和调用的时间，速度是最快的。
3. 对于自定义的对象，如果定义了toString()方法来进行类型转换的话，推荐显式调用toString()，因为内部的操作在尝试所有可能性之后，会尝试对象的toString()方法尝试能否转化为String，所以直接调用这个方法效率会更高
十、 尽量作用JSON格式来创建对象，而不是var obj=new Object()方法。
因为前者是直接复制，而后者需要调用构造器，因而前者的性能更好。
十一、 当需要使用数组时，也尽量使用JSON格式的语法，
使用JSON格式的语法即直接使用如下语法定义数组：[parrm,param,param...],而不是采用new Array(parrm,param,param...)这种语法。因为使用JSON格式的语法是引擎直接解释的。而后者则需要调用Array的构造器。
十二、 对字符串进行循环操作，例如替换、查找，就使用正则表达式。
因为JS的循环速度比较慢，而正则表达式的操作是用C写成的API，性能比较好。
十三、 插入HTML
很多人喜欢在JavaScript中使用document.write来给页面生成内容。事实上这样的效率较低，如果需要直接插入HTML，可以找一个容器元素，比如指定一个div或者span，并设置他们的innerHTML来将自己的HTML代码插入到页面中。
十四、 对象查询
使用[“”]查询要比.items()更快
十五、 定时器
如果针对的是不断运行的代码，不应该使用setTimeout，而应该是用setInterval。setTimeout每次要重新设置一个定时器。
十六、 尽量减少DOM调用
在Web开发中，JavaScript的一个很重要的作用就是对DOM进行操作。可是对DOM的操作是非常昂贵的，因为这会导致浏览器执行回流 （reflow）操作。我们应该尽可能的减少DOM操作。
