来源：阮一峰

Douglas Crockford是Javascript权威，Json格式就是他的发明。

去年11月他有一个演讲（Youtube），谈到了好的Javascript编程风格是什么。
 
我非常推荐这个演讲，它不仅有助于学习Javascript，而且能让你心情舒畅，因为Crockford讲得很幽默，时不时让听众会心一笑。

下面，我根据这个演讲和Crockford编写的代码规范，总结一下”Javascript编程风格”。
 
所谓”编程风格”（programming style），指的是编写代码的样式规则。不同的程序员，往往有不同的编程风格。

有人说，编译器的规范叫做”语法规则”（grammar），这是程序员必须遵守的；而编译器忽略的部分，就叫”编程风格”（programming style），这是程序员可以自由选择的。这种说法不完全正确，程序员固然可以自由选择编程风格，但是好的编程风格有助于写出质量更高、错误更少、更易于维护的程序。

所以，有一点应该明确，”编程风格”的选择不应该基于个人爱好、熟悉程度、打字工作量等因素，而要考虑如何尽量使代码清晰易读、减少出错。你选择的，不是你喜欢的风格，而是一种能够清晰表达你的意图的风格。这一点，对于Javascript这种语法自由度很高、设计不完全成熟的语言尤其重要。
 
一、大括号的位置

绝大多数的编程语言，都用大括号（{}）表示区块（block）。起首的大括号的位置，有许多不同的写法。

最流行的有两种。一种是起首的大括号另起一行：
block
{
…
}
另一种是起首的大括号跟在关键字的后面：
block {
…
}
一般来说，这两种写法都可以接受。但是，Javascript要使用后一种，因为Javascript会自动添加句末的分号，导致一些难以察觉的错误。
　return
{
key:value;
};
上面的代码的原意，是要返回一个对象，但实际上返回的是undefined，因为Javascript自动在return语句后面添加了分号。为了避免这一类错误，需要写成下面这样：
return {
key …

英文原文 How to Write Maintainable OO JavaScript Code，翻译：Yao Xiao

能够写出可维护的面向对象JavaScript代码不仅可以节约金钱，还能让你很受欢迎。不信？有可能你自己或者其他什么人有一天会回来重用你的代码。如果能尽量让这个经历不那么痛苦，就可以节省不少时间。地球人都知道，时间就是金钱。同样的，你也会因为帮某人省去了头疼的过程而获得他的偏爱。但是，在开始探索如何编写可维护的面向对象JavaScript代码之前，我们先来快速看看什么是面向对象。如果已经了解面向对象的概念了，就可以直接跳过下一节。

什么是面向对象？

面向对象编程主要通过代码代表现实世界中的实质对象。要创建对象，首先需要写一个“类”来定义。 类几乎可以代表所有的东西：账户，员工，导航菜单，汽车，植物，广告，饮料，等等。而每次要创建对象的时候，就从类实例化一个对象。换句话说，就是创建类的实例做为对象。事实上，通常处理一个以上的同类事物时就会使用到对象。另外，只需要简单的函数式程序就可以做的很好。对象实质上是数据的容器。因此在一个employee对象中，你可能要储存员工号，姓名，入职日期，职称，工资，资历，等等。对象也包括处理数据的函数（也叫做“方法”）。方法被用作媒介来确保数据的完整性，以及在储存之前对数据进行转换。例如，方法可以接收任意格式的日期然后在储存之前将其转化成标准化格式。最后，类还可以继承其他的类。继承可以让你在不同类中重复使用相同代码。例如，银行账户和音像店账户都可以继承一个基本的账户类，里面包括个人信息，开户日期，分部信息，等等。然后每个都可以定义自己的交易或者借款处理等数据结构和方法。

警告：JavaScript面向对象是不一样的

在上一节中，概述了经典的面向对象编程的基本知识。说经典是因为JavaScript并不遵循这些规则。相反地，JavaScript的类是写成函数的样子，而继承则是通过原型实现的。原型继承基本上意味着使用原型属性来实现对象的继承，而不是从类继承类。

———————————————–

【2012-4-25 11:11:35 更新】：根据微博网友@高翌翔 的反馈，前文中有关“JS 面向对象”的内容不够细。现推荐《Javascript 面向对象编程》《再谈javascript面向对象编程》两篇文章。

———————————————–

对象的实例化

以下是JavaScript中对象实例化的例子：
// 定义Employee类
　　function Employee(num, fname …

在享受了6年的全职软件工程师生涯之后，我决定换个活法。接下来的5年里我进修了MBA课程，并尝试了各种管理和投资类型的角色。我依旧关注技术，但在此期间并没有积极参与软件开发，也许配置一个wordpress主题或插件可以除外——当然这不能和软件开发相提并论。

对开发者非常有用的16个 JavaScript 库

网络技术一直在发展并提高，人们期望Web应用程序能提高桌面程序那样的性能和用户体验。而数据表格又是企业级Web应用最为重要的部分，我们已经用了大量的数据（行数和列数）来测试流行的 JavaScript 表格的页面加载速度。

我们测试了四种表格组件：

● Dojo grid

● jqGrid

● Ext JS grid

● dhtmlxGrid

在我们的测试中，我们针对每种表格组件创建了一个示例，在页面中用不同的行数和列数初始化表格。如果你想完全确保测试结果客观，可自行查看加载速度（示例下载链接）。

一、表格行数测试

首先，针对每种表格，我们均建立了一个示例，均有 10列和不同的行数（从1oo行到10000行）。在 IE9 浏览器和最新的Chrome中测试。下表展示了表格初始化所用时间。

在 IE9 浏览器中的结果：

Dojo
jqGrid
Ext JS
dhtmlxGrid

100 行
308 ms
60 ms
265 ms
51 …

Web开发行业是一个快节奏的行业。新趋势、技术和API不时出现，我们必须去学习。作为一名Web开发人员，我常认为这是我们责任的一部分，或者说我们需要把这个作为一种习惯，以坚持学习或给自我 升级，不能满足现状。我们是为了探索和发现更多的解决方案。

英文原文：Why Javascript is a Joy，翻译：oschina

作为一名前端工程师，我承认我可能是有偏见的，但是我真的非常享受编写 JavaScript 程序。JavaScript 代码可以非常的优雅，也可以让人崩溃。在很长一段时间内 JS 在开发者社区中都是一个笑话。但是现在 JS 是一门聚光灯下的明星语言，越来越多的开发者加入到这个阵营。这篇文章例举了几个我喜欢 JS 的理由。

速度

Google 的 V8 JS 引擎让我们可以在客户端和服务端更好的执行 JS 代码，这就给复杂的 JS 程序提供了基础。我们现在可以发送几百KB的压缩后的 JS 代码到客户端，并且可以预期客户端可以流畅的执行这些代码。

除此以外，JS 也是非常容易编写和测试的。编写-保存-刷新，简单三个步骤就可以看到效果，这比任何其他开发环境都要快速。我们现在也有 webkit 控制台和调试器，可以帮助我们方便的调试代码。我最近也在尝试使用 Jasmine 来做单元测试。

简单

JS 是一门非常轻量级的语言，没有大量复杂的保留字，没有各种复杂的数据类型。JSON已经成为了流行的数据传输格式。JS 也是 Web 浏览器的本地语言，还有很多工具支持，几乎不用任何安装工作。

自由

也 许是 JS 框架的作者希望把代码尽量精简，或者他们只是默认事情就应该保持简单，我发现所有JS的框架都没有很强的侵入性，不像 Rails，Rjango，CakePHP …

原文：Jean-Baptiste Jung   编译：伯乐在线 – 翦丹

近年来，JavaScript因为其有效地强化网络，而并非仅仅提供一些类似闪烁文字等廉价效果而备受重视。在这篇文章中，我已经选择了JavaScript开发的10个非同凡响的的工具和脚本。

0. MicroJS

需要够快的代码吗？ MicroJS是一个全新的网站，旨在提供常用的JavaScript代码片段：AJAX、JSON、DOM，OO JavaScript等等。

访问：http://microjs.com/

1. Diva.js

DIVA是集查阅文档、设计工作与数字图书馆为一体的连续性项目。用于呈现多页码文件。它与IIPImage服务器同时运行，这将是那些图书馆或书店运作网站的福音。如果您想看看，这里提供演示。

访问：http://ddmal.music.mcgill.ca/diva …

来源：阿当

这事从Franky的一则招聘说起。昨天Franky发了一则招聘前端的微博，招聘条件写得比较实在，不是那种一看就是从别的地方复制过来的那种：

招聘条件写得看似很低，所以一下子引起了很多关注，微博和QQ群里很多人在讨论。关于这则招聘，我也有些话想说。

在新浪和腾讯，前端都是分 CSS 方向和 JS 方向的。在淘宝和百度是不分的。不同的公司岗位设置不同，都有各自的道理。

我在淘宝时觉得 CSS 和 JS 应该一个人来做，因为这两样是紧密合作的， CSS 如何设置和 JS 是关联很大的，这个分开两个人做，在对接的时候一定有很多隐患。当时我认为设置 CSS 工程师这个岗位，是因为合格的前端（既精 CSS 又精 JS ）很少，但市场需求大，所以拉了些只会 CSS 的工程师回来设一个 CSS 工程师的职位来凑数，其实是为了起一个过渡作用，等到合格的前端多起来的时候，这些 CSS 工程师岗位一定会给撤掉的。但当时我在淘宝大部分时间都在做一些毫无技术含量的专题页，一两个小时出一个页面的那种，占了我工作时间80%以上，其实对我本人来说很痛苦，没什么可提高的。

后来去了新浪，我是专职做 JS ，不用切页面的，后来我发现 CSS 和 JS 分开来其实比我想像中隐患小很得多——如果 CSS 工程师靠谱的话（事实上 CSS 工程师们也在学一些 JS ，大部分人都会借助jQuery自己完成一些功能，所以其实他们对 JS 和 CSS 如何协同工作是了解的）。我在新浪时，和 CSS 工程师配合得很好，很多问题其实事先说明一下我的思路， CSS 工程师们一点就透。我个人可以有更多的时间关注一些别的东西，以自我提升。在新浪时，无论从工作量上，还是从专注程度上，都比之前我 CSS 、 JS 全包时要好上很多。有非常多的知识是我在新浪工作期间学会的，比如ror …

来源：酷壳

前言：虽有陈皓《Javascript 面向对象编程》珠玉在前，但是我还是忍不住再画蛇添足的补上一篇文章，主要是因为javascript这门语言魅力。另外这篇文章是一篇入门文章，我也是才开始学习Javascript，有一点心得，才想写一篇这样文章，文章中难免有错误的地方，还请各位不吝吐槽指正

吐槽Javascript

初次接触Javascript，这门语言的确会让很多正规军感到诸多的不适，这种不适来自于Javascript的语法的简练和不严谨，这种不适也 来自Javascript这个悲催的名称，我在想网景公司的Javascript设计者在给他起名称那天一定是脑壳进水了，让Javascript这么多 年来受了这么多不白之冤，人们都认为他是Java的附属物，一个WEB玩具语言。因此才会有些人会对Javascript不屑，认为Javascript 不是一门真正的语言，但是这此他们真的错了。Javascript不仅是一门语言，是一门真真正正的语言，而且他还是一门里程碑式的语言，他独创多种新的编程模式原型继承，闭包，对后来的动态语言产生了巨大的影响。做为当今最流行的语言（没有之一），看看git上提交的最多的语言类型就能明白。随着 HTML5的登场，浏览器将在个人电脑上将大显身手，完全有替换OS的趋势的时候，Javascript做为浏览器上的一门唯一真真的语言，如同C之于 unix/linux，java之于JVM，Cobol之于MainFrame，我们也需要来重新的认真地认识和审视这门语言。另外Javascript 的正式名称是：ECMAScript，这个名字明显比Javascript帅太多了！

言归正传，我们切入主题——Javascript的面向对象编程。要谈Javascript …

现在网络上又有越来越多的免费的（JS 图表）JavaScript图表图形绘制插件。我之前给一家网站做过复杂的图形，我们用的是 highchart。在那段时间，没有很多可供选择的插件。但现在不同了，很容易就可以找到很多功能非常不错的图表库。

今天的教程来自天才的Cody Lindley的新书：《JavaScript启蒙教程 / JavaScript Enlightenment》。他讨论了令人迷惑的关键字this，以及确定和设置this的值的方法。

概念性的概述this

当一个函数创建后，一个关键字this就随之(在后台)创建，它链接到一个对象，而函数正是在这个对象中进行操作。换句话说，关键字this可在函数中使用，是对一个对象的引用，而函数正是该对象的属性或方法。

让我们来看这个对象：
<!DOCTYPE html><html lang="en"><body><script>
var cody = {
living …

英文出自：yehudakatz.com，编译：CSDN赵红

常常会遇到有人将Ruby的区块（Blocks）看作相当于JavaScript的“first class functions ”的误解。由于传递功能，尤其是当你可以创建匿名的传递功能，这是非常强大的。事实上，JavaScript和Ruby有一个机制使其自然会认为等值。

人们在谈到为什么Ruby的区块不同于Python的函数时，通常会讲到一些关于Ruby和JavaScript的匿名分享，但Python没有。初看之下，一个Ruby区块就是一个“匿名函数”（或俗称一个“封装”），正如JavaScript函数就是其中之一。

作为一个早期的Ruby/JavaScript开发者，无可否认我也有过这样的观点分享。错过一个重要的细节，对结果会产生较大影响。这个原理常被称为“Tennent’s Correspondence Principle”，这条原理说：“For a given expression expr, lambda …

英文原文：10 Super JavaScript Animation Frameworks，编译：iteye

使用JavaScript可以做出一些引人注目的动画效果，但通常不太容易实现。本文为你整理了10个非常优秀的JavaScript动画框架，使用它们你可以轻松实现动画效果。

1. Raphaël

Raphaël是一个小型JavaScript库，用于简化你的Web矢量图形工作。如果你想创建独特的图表或图形的裁剪和旋转部件，你可以使用这个简单方便的库来实现。

源码 + 演示

2. Processing.js

该框架主要针对不想使用Flash或Java applets进行图片编程以及Web交互的开发者。Processing.js使用JavaScript在HTML5的Canvas元素上绘制形状以及操作图像。

源码 + 演示

3. script …

来源：陈皓
Javascript是一个类C的语言，它的面向对象的东西相对于C++/Java比较奇怪，但是其的确相当的强大，在Todd 同学的“对象的消息模型”一文中我们已经可以看到一些端倪了。这两天有个前同事总在问我Javascript面向对象的东西，所以，索性写篇文章让他看去吧，这里这篇文章主要想从一个整体的解度来说明一下Javascript的面向对象的编程。（成文比较仓促，应该有不准确或是有误的地方，请大家批评指正）

另，这篇文章主要基于 ECMAScript 5， 旨在介绍新技术。关于兼容性的东西，请看最后一节。
初探
我们知道Javascript中的变量定义基本如下：
var name = 'Chen Hao';;
var email = 'haoel(@)hotmail.com';
var website = 'http://coolshell.cn&#039 …

W3techs网站评出了2011年十大使用增速最快的Web技术，本文对其进行编译供各位参考。注意，该评选结果是在针对前100万流行网站（根据Alexa值统计）进行调查统计出的，点击这里查看详细统计信息。

英文原文：2011 in review: 20 sites thatpushed JavaScript to the limit，编译：webapptrend

对于浏览器上的开发者来说，2011年又是相当精彩的一年。web开发者Phil Hawksworth在这篇文章中总结了web 上经典的JavaScript用法。

那些喜欢冒险体验前沿技术的开发者现在应该会非常开心。浏览器正变得越来越强大，上面有各种丰富的功能可以供开发者选择，一些在几年前几乎难以想象的功能都已经一一实现。有了这些新功能，开发者现在能够开发出更精细、更复杂、更有想象力的用户界面了。这为网站开发扫清了障碍，网站能够拥有让人惊喜的用户界面了。

有时候，这种技术的运用是非常精妙的，它无声无息地改变了应用的用户体验。有时结果就像是加入樱桃可乐中的跳跳糖，悄悄地给人们带来惊喜。

这里有20个特别突出的网站，它们在定位、技巧或者是JavaScript的使用上有各自的独到之处。

演示网站

先看一些有趣的东西。这些网站利用JavaScript将Canvas，WebGL，CSS3和HTML5元素这些浏览器技术融合在了一起。通常这些技术只是用来取悦用户，或是在现代的浏览器中显示一些新的功能。虽然大多数的功能都很不错，但有些会占用大量的处理器或是显卡，所以笔记本电脑用户常常需要关注他们的笔记本温度，以免温度过高而出现异常。

1. Baroque.me

Baroque.me是一个简单，但是能够催眠的网站，它就用到了HTML5 …

英文原文：10 jQuery and JavaScript Christmas Effects，编译：iteye

圣诞节快到了，赶快为你的网站打扮一番，换上节日的盛装吧！本文为你整理了10款使用jQuery和 JavaScript打造的圣诞主题效果，希望能给你带来些许惊喜。（PS：经过小编测试，下面的部分效果仅支持IE浏览器）

1.倒计时数字钟

设计一个JavaScript圣诞倒计时数字时钟，这个数字钟利用网站访问者的计算机上的时间来进行倒计时，因此这个脚本非常灵活，可以根据不同的时区设置对应的时间。

源码 / 演示

2.闪烁的彩灯

在网页中展示彩灯效果，你只需要把下面链接中的代码粘贴到网页的HTML中即可。

源码/演示

3.谷歌的圣诞涂鸦

随着圣诞节的临近，我们应将精力从丰盛的晚餐转移到一些更有意义的事情上，这样才能保持好身材。因此，让我们试试用jQuery和CSS创建谷歌的动画logo！

源码 / 演示

4.雪花效果

用这个超棒的动画效果装饰你的网站吧！雪花在页面中轻轻飘下，直至消失。雪花只是这个脚本支持的图案之一，你也可以使用其他图案。

源码/演示

5.暴风雪效果

暴风雪是一个基于JavaScript的雪花效果，很容易添加到网页上，且免费使用、易于设置。一段JavaScript代码就包含了所需功能，不需要任何图片。

源码/演示

6.jQuery飘雪效果升级版（添加了雪堆积效果）

添加雪堆积效果插件后，你可以通过jQuery选择器来把雪收集到顶部。其使用了canvas标签，只支持IE8以上的浏览器。

源码 / 演示

7 …

导读：在很长一段时间内，网页动画是有GIF和Flash主导的，他们会有一个独立于页面其他元素的板块，而不是像文字和图像那样自然地呈现。这个直到HTML5 Convas(画布)出现，一切都改变了。 canvas 把动画和手绘自然地融入到网页设计中。你可以把动画和文字结合起来并让他们互动。动画的效果变好了，编译是否也能简化？

这里介绍一种简单的编译达到同样的强大效果的动画制作：Paper.js   。这篇文章将介绍结合使用 canvas 和 paper.js 来制作自然唯美的动画效果：蒲公英在风中飘逸。分享所有的代码，并且进行逐行解析，最后有动画效果演示。

看似简单，行亦难

计算机喜欢干净简洁。不管是报表，统计，或者函数曲线，他们总是使用简洁明了的线条；而现实是，所有物理世界的物体是混沌的。树叶离开枝丫，水珠四溅 ，花朵迎风摇曳 － 所有这些物理世界的互动感觉简单，因为我们已经习惯这些。但是实际上哪怕是那一霎那的风，都是混沌的，她的算法非常复杂。这篇文章里面，我们要制作蒲公英种子微风舞动的动画。

(Image: Arnoldius)
动画制作的蒲公英没有办法模拟物理的复杂性，实际上她看上去更加自然如果我们不试图去模拟。我们将要制作一朵给你同样感觉的花朵但是省略了很多细节。

Paper.js

使用 canvas 标签 制作简单图形. 创建你的canvas:（宽：300，高：300）
<canvas id="canvas" width="300" height=&quot …

几年前，很难找到一个合适的颜色选择器。正好看到很多不错的JavaScript颜色选择器插件，故而把这些编译汇总。在本文，Web设计师和开发人员 Kevin Liew 选取了11个相应插件，有些会比较复杂，其他比较简单，相信应该会有适合你的。

1. ExColor

ExColor是一个类似Photoshop样式的jQuery颜色拾取插件，其定制性非常高，通过参数设置可生成各种样式和效果的颜色拾取器。它可以附加到任意的input输入框，通过简单地调用一行函数即可。

2. JScolor

JSColor是一个简单、易于使用的JavaScript库，可以将任何给定input框转化为颜色选择器。该选择器是隐藏层，没有使用任何弹出窗口，可以出现在input框的任意一端。

3. Advanced Javascript ColorPicker

ColorPicker是个高度可定制的高级JavaScript颜色拾取器，并不依赖于任何JS框架。它可以6种不同的颜色模式来显示整个调色板（~16.78 mil. 颜色）。

4. Farbtastic …