|
|
| (41 intermediate revisions by 5 users not shown) |
| Line 1: |
Line 1: |
| =UI Development Style Guide=
| | The content on this page has moved to https://documentation.open-xchange.com/7.10.2/ui/ |
|
| |
|
| There lots of stuff we don't need to talk about because JSHint will bug you! (white space, formatting, undefined variables, globals, etc.)
| | Note: Open-Xchange is in the process of migrating all its technical documentation to a new and improved documentation system (documentation.open-xchange.com). Please note as the migration takes place more information will be available on the new system and less on this system. Thank you for your understanding during this period of transition. |
| | |
| '''Indentation is 4 spaces'''
| |
| No tabs! And there's no need for two consecutive empty lines. If possible turn on "show white-spaces" in your editor.
| |
| | |
| ''Eclipse seems to have a bug on MacOS that makes the editor really slow when showing white-spaces. However, as long as you configure Eclipse properly to use spaces instead of tabs and remove all trailing white-space on save (yep, there's a flag for that), you can leave that option turned off.''
| |
| | |
| '''Use underscore's high-level functions (e.g. each, filter, map)'''
| |
| Because it's nice to read and it uses native code if available. For example, iterating an array via .each() is faster than a classic for-loop (in Chrome at least). Don't use jQuery's each (except for DOM nodes). If you need "break" you have to use a classic for-loop.
| |
| | |
| '''Don't make functions within a loop'''
| |
| For most cases, JSHint will bug you. But when using .each(), for example, it won't. However, you might still create functions over and over again - so avoid that. And if there no good reason, try to avoid creating nested sub functions (bit slower; might leak memory).
| |
| | |
| '''Require modules only when they're required!'''
| |
| Review your code if your module really needs all required modules upfront. Check if some dependencies can be resolved at runtime, e.g. event handlers or functions that are working asynchronously.
| |
| | |
| ''Hint: We patched require.js, so require() returns a deferred object.''
| |
| | |
| '''Use jQuery's .on() and .off() instead of .bind() .unbind() .delegate()'''
| |
| Because the new event system of jQuery 1.7 was completely redesigned and bind/unbind are now marked as deprecated.
| |
| | |
| '''Use delegated event handlers if possible'''
| |
| Instead of adding tons of click handlers for each element, use one (!) delegate on the parent element (VGrid uses that technique for example).
| |
| | |
| '''Don't create global code'''
| |
| underscore.js is an exception. There some basic jQuery plugin that extend jQuery.fn (that's global as well). Even for rarely used jQuery plugins create AMDs (Asynchronous Module Definition) and load them via require().
| |
| | |
| '''Naming'''
| |
| Use camelCase for variables (e.g. variableName). Use upper-case/underscores for constants (e.g. MAX_WIDTH). Use camel-case with upper-case first char for class names (e.g. ClassDefinition). Don't use special notations for jQuery-Objects: var node = $(…) is better than var $node = $(…);
| |
| | |
| '''Try to define all variables at the beginning of a function'''
| |
| And please just use one (!) "var" statement.
| |