|
30 | 30 | 1. [Testing](#testing) |
31 | 31 | 1. [Performance](#performance) |
32 | 32 | 1. [Resources](#resources) |
33 | | - 1. [In the Wild](#in-the-wild) |
34 | | - 1. [Translation](#translation) |
35 | | - 1. [The JavaScript Style Guide Guide](#the-javascript-style-guide-guide) |
36 | 33 | 1. [Contributors](#contributors) |
37 | 34 | 1. [License](#license) |
38 | 35 |
|
|
1109 | 1106 | ## Accessors |
1110 | 1107 |
|
1111 | 1108 | - Accessor functions for properties are not required |
1112 | | - - If you do make accessor functions use getVal() and setVal('hello') |
| 1109 | + - If you do make accessor functions use val() and val('hello') |
1113 | 1110 |
|
1114 | 1111 | ```javascript |
1115 | 1112 | // bad |
1116 | | - dragon.age(); |
| 1113 | + dragon.getAge(); |
1117 | 1114 |
|
1118 | 1115 | // good |
1119 | | - dragon.getAge(); |
| 1116 | + dragon.age(); |
1120 | 1117 |
|
1121 | 1118 | // bad |
1122 | | - dragon.age(25); |
| 1119 | + dragon.setAge(25); |
1123 | 1120 |
|
1124 | 1121 | // good |
1125 | | - dragon.setAge(25); |
| 1122 | + dragon.age(25); |
1126 | 1123 | ``` |
1127 | 1124 |
|
1128 | 1125 | - If the property is a boolean, use isVal() or hasVal() |
|
1139 | 1136 | } |
1140 | 1137 | ``` |
1141 | 1138 |
|
1142 | | - - It's okay to create get() and set() functions, but be consistent. |
1143 | | -
|
1144 | | - ```javascript |
1145 | | - function Jedi(options) { |
1146 | | - options || (options = {}); |
1147 | | - var lightsaber = options.lightsaber || 'blue'; |
1148 | | - this.set('lightsaber', lightsaber); |
1149 | | - } |
1150 | | -
|
1151 | | - Jedi.prototype.set = function(key, val) { |
1152 | | - this[key] = val; |
1153 | | - }; |
1154 | | -
|
1155 | | - Jedi.prototype.get = function(key) { |
1156 | | - return this[key]; |
1157 | | - }; |
1158 | | - ``` |
1159 | | -
|
1160 | 1139 | **[⬆ back to top](#table-of-contents)** |
1161 | 1140 |
|
1162 | 1141 |
|
|
1247 | 1226 |
|
1248 | 1227 | ## Events |
1249 | 1228 |
|
1250 | | - - When attaching data payloads to events (whether DOM events or something more proprietary like Backbone events), pass a hash instead of a raw value. This allows a subsequent contributor to add more data to the event payload without finding and updating every handler for the event. For example, instead of: |
| 1229 | + - When attaching data payloads to events (whether DOM events, TokBox trigger or node.js EventEmitter), pass a hash instead of a raw value. This allows a subsequent contributor to add more data to the event payload without finding and updating every handler for the event. For example, instead of: |
1251 | 1230 |
|
1252 | 1231 | ```js |
1253 | 1232 | // bad |
|
1275 | 1254 |
|
1276 | 1255 | **[⬆ back to top](#table-of-contents)** |
1277 | 1256 |
|
1278 | | -
|
1279 | 1257 | ## Modules |
1280 | 1258 |
|
1281 | 1259 | - The module should start with a `!`. This ensures that if a malformed module forgets to include a final semicolon there aren't errors in production when the scripts get concatenated. [Explanation](https://github.com/airbnb/javascript/issues/44#issuecomment-13063933) |
1282 | | - - The file should be named with camelCase, live in a folder with the same name, and match the name of the single export. |
1283 | | - - Add a method called noConflict() that sets the exported module to the previous version and returns this one. |
| 1260 | + - If your module is adding to the global scope, add a method called noConflict() that sets the exported module to the previous version and returns this one. |
1284 | 1261 | - Always declare `'use strict';` at the top of the module. |
1285 | 1262 |
|
1286 | 1263 | ```javascript |
|
1309 | 1286 |
|
1310 | 1287 | ## jQuery |
1311 | 1288 |
|
1312 | | - - Prefix jQuery object variables with a `$`. |
1313 | | - |
1314 | | - ```javascript |
1315 | | - // bad |
1316 | | - var sidebar = $('.sidebar'); |
1317 | | -
|
1318 | | - // good |
1319 | | - var $sidebar = $('.sidebar'); |
1320 | | - ``` |
1321 | | - |
1322 | | - - Cache jQuery lookups. |
1323 | | - |
1324 | | - ```javascript |
1325 | | - // bad |
1326 | | - function setSidebar() { |
1327 | | - $('.sidebar').hide(); |
1328 | | -
|
1329 | | - // ...stuff... |
1330 | | -
|
1331 | | - $('.sidebar').css({ |
1332 | | - 'background-color': 'pink' |
1333 | | - }); |
1334 | | - } |
1335 | | -
|
1336 | | - // good |
1337 | | - function setSidebar() { |
1338 | | - var $sidebar = $('.sidebar'); |
1339 | | - $sidebar.hide(); |
1340 | | -
|
1341 | | - // ...stuff... |
1342 | | -
|
1343 | | - $sidebar.css({ |
1344 | | - 'background-color': 'pink' |
1345 | | - }); |
1346 | | - } |
1347 | | - ``` |
1348 | | - |
1349 | | - - For DOM queries use Cascading `$('.sidebar ul')` or parent > child `$('.sidebar > ul')`. [jsPerf](http://jsperf.com/jquery-find-vs-context-sel/16) |
1350 | | - - Use `find` with scoped jQuery object queries. |
1351 | | - |
1352 | | - ```javascript |
1353 | | - // bad |
1354 | | - $('ul', '.sidebar').hide(); |
1355 | | -
|
1356 | | - // bad |
1357 | | - $('.sidebar').find('ul').hide(); |
1358 | | -
|
1359 | | - // good |
1360 | | - $('.sidebar ul').hide(); |
1361 | | -
|
1362 | | - // good |
1363 | | - $('.sidebar > ul').hide(); |
1364 | | -
|
1365 | | - // good |
1366 | | - $sidebar.find('ul').hide(); |
1367 | | - ``` |
1368 | | - |
1369 | | -**[⬆ back to top](#table-of-contents)** |
1370 | | - |
| 1289 | + See [You Might Not Need jQuery](http://youmightnotneedjquery.com/). |
1371 | 1290 |
|
1372 | 1291 | ## ECMAScript 5 Compatibility |
1373 | 1292 |
|
|
1395 | 1314 | - [String vs Array Concat](http://jsperf.com/string-vs-array-concat/2) |
1396 | 1315 | - [Try/Catch Cost In a Loop](http://jsperf.com/try-catch-in-loop-cost) |
1397 | 1316 | - [Bang Function](http://jsperf.com/bang-function) |
1398 | | - - [jQuery Find vs Context, Selector](http://jsperf.com/jquery-find-vs-context-sel/13) |
1399 | 1317 | - [innerHTML vs textContent for script text](http://jsperf.com/innerhtml-vs-textcontent-for-script-text) |
1400 | 1318 | - [Long String Concatenation](http://jsperf.com/ya-string-concat) |
1401 | 1319 | - Loading... |
|
1413 | 1331 | **Other Styleguides** |
1414 | 1332 |
|
1415 | 1333 | - [Google JavaScript Style Guide](http://google-styleguide.googlecode.com/svn/trunk/javascriptguide.xml) |
1416 | | - - [jQuery Core Style Guidelines](http://docs.jquery.com/JQuery_Core_Style_Guidelines) |
1417 | 1334 | - [Principles of Writing Consistent, Idiomatic JavaScript](https://github.com/rwldrn/idiomatic.js/) |
1418 | 1335 |
|
1419 | 1336 | **Other Styles** |
|
1463 | 1380 |
|
1464 | 1381 | ## In the Wild |
1465 | 1382 |
|
1466 | | - This is a list of organizations that are using this style guide. Send us a pull request or open an issue and we'll add you to the list. |
1467 | | -
|
1468 | | - - **Aan Zee**: [AanZee/javascript](https://github.com/AanZee/javascript) |
1469 | | - - **Airbnb**: [airbnb/javascript](https://github.com/airbnb/javascript) |
1470 | | - - **American Insitutes for Research**: [AIRAST/javascript](https://github.com/AIRAST/javascript) |
1471 | | - - **Compass Learning**: [compasslearning/javascript-style-guide](https://github.com/compasslearning/javascript-style-guide) |
1472 | | - - **Digitpaint** [digitpaint/javascript](https://github.com/digitpaint/javascript) |
1473 | | - - **ExactTarget**: [ExactTarget/javascript](https://github.com/ExactTarget/javascript) |
1474 | | - - **Gawker Media**: [gawkermedia/javascript](https://github.com/gawkermedia/javascript) |
1475 | | - - **GeneralElectric**: [GeneralElectric/javascript](https://github.com/GeneralElectric/javascript) |
1476 | | - - **GoodData**: [gooddata/gdc-js-style](https://github.com/gooddata/gdc-js-style) |
1477 | | - - **Grooveshark**: [grooveshark/javascript](https://github.com/grooveshark/javascript) |
1478 | | - - **How About We**: [howaboutwe/javascript](https://github.com/howaboutwe/javascript) |
1479 | | - - **Mighty Spring**: [mightyspring/javascript](https://github.com/mightyspring/javascript) |
1480 | | - - **MinnPost**: [MinnPost/javascript](https://github.com/MinnPost/javascript) |
1481 | | - - **ModCloth**: [modcloth/javascript](https://github.com/modcloth/javascript) |
1482 | | - - **Money Advice Service**: [moneyadviceservice/javascript](https://github.com/moneyadviceservice/javascript) |
1483 | | - - **National Geographic**: [natgeo/javascript](https://github.com/natgeo/javascript) |
1484 | | - - **National Park Service**: [nationalparkservice/javascript](https://github.com/nationalparkservice/javascript) |
1485 | | - - **Peerby**: [Peerby/javascript](https://github.com/Peerby/javascript) |
1486 | | - - **Razorfish**: [razorfish/javascript-style-guide](https://github.com/razorfish/javascript-style-guide) |
1487 | | - - **SeekingAlpha**: [seekingalpha/javascript-style-guide](https://github.com/seekingalpha/javascript-style-guide) |
1488 | | - - **REI**: [reidev/js-style-guide](https://github.com/reidev/js-style-guide) |
1489 | | - - **Ripple**: [ripple/javascript-style-guide](https://github.com/ripple/javascript-style-guide) |
1490 | | - - **Shutterfly**: [shutterfly/javascript](https://github.com/shutterfly/javascript) |
1491 | | - - **Userify**: [userify/javascript](https://github.com/userify/javascript) |
1492 | | - - **Zillow**: [zillow/javascript](https://github.com/zillow/javascript) |
1493 | | - - **ZocDoc**: [ZocDoc/javascript](https://github.com/ZocDoc/javascript) |
1494 | | -
|
1495 | | -## Translation |
1496 | | -
|
1497 | | - This style guide is also available in other languages: |
1498 | | -
|
1499 | | - - :de: **German**: [timofurrer/javascript-style-guide](https://github.com/timofurrer/javascript-style-guide) |
1500 | | - - :jp: **Japanese**: [mitsuruog/javacript-style-guide](https://github.com/mitsuruog/javacript-style-guide) |
1501 | | - - :br: **Portuguese**: [armoucar/javascript-style-guide](https://github.com/armoucar/javascript-style-guide) |
1502 | | - - :cn: **Chinese**: [adamlu/javascript-style-guide](https://github.com/adamlu/javascript-style-guide) |
1503 | | - - :es: **Spanish**: [paolocarrasco/javascript-style-guide](https://github.com/paolocarrasco/javascript-style-guide) |
1504 | | - - :kr: **Korean**: [tipjs/javascript-style-guide](https://github.com/tipjs/javascript-style-guide) |
1505 | | - - :fr: **French**: [nmussy/javascript-style-guide](https://github.com/nmussy/javascript-style-guide) |
1506 | | - - :ru: **Russian**: [uprock/javascript](https://github.com/uprock/javascript) |
1507 | | - - :bg: **Bulgarian**: [borislavvv/javascript](https://github.com/borislavvv/javascript) |
1508 | | -
|
1509 | | -## The JavaScript Style Guide Guide |
1510 | | -
|
1511 | | - - [Reference](https://github.com/airbnb/javascript/wiki/The-JavaScript-Style-Guide-Guide) |
| 1383 | + The list of organizations using similar style guides (including translations) can be found at |
| 1384 | + the original from [Airbnb](https://github.com/airbnb/javascript). |
1512 | 1385 |
|
1513 | 1386 | ## Contributors |
1514 | 1387 |
|
1515 | | - - [View Contributors](https://github.com/airbnb/javascript/graphs/contributors) |
| 1388 | + - [View Contributors](https://github.com/opentok/javascript/graphs/contributors) |
1516 | 1389 |
|
1517 | 1390 |
|
1518 | 1391 | ## License |
1519 | 1392 |
|
1520 | 1393 | (The MIT License) |
1521 | 1394 |
|
| 1395 | +Copyright (c) 2014 Tokbox Inc. |
1522 | 1396 | Copyright (c) 2014 Airbnb |
1523 | 1397 |
|
1524 | 1398 | Permission is hereby granted, free of charge, to any person obtaining |
|
0 commit comments