Bestpractices nl

Javascript“the worlds most misunderstood language”

the big book

The good book

JavaScript !== Java

Global namespaceDon’t touch!

x = global;var x = global;// if not inside a functionfunction foo(){ x = global; // without var. var y = notglobal; // yeah, var}

Creëer je eigen namespace

;var sancus = function(){ var x = notglobal;};

Patterns anybody?

Private variables

Priveledged variables

Public variables

Closures

Revealing module pattern‘christian heilman’

;var sancus = function(){}();// self invoking function :)

;var sancus = (function(){ // private variables var config = { foo:bar, html5:cool }, init = function(){ // doStuff }; return{ init:init };}();

;var sancus = (function(){ var config = { foo:bar, html5:cool // no trailing , }, init = function(){ // doStuff }; return{ init:init };}();

;var sancus = (function(){ var config = { foo:bar, html5:cool }, init = function(){ // doStuff }; // return init to global namespace return{ init:init };}();

;var sancus = (function(){ var config = { foo:bar, html5:cool }, init = function(){ // doStuff }; return{ init:init };}();sancus.init();// call init

// ; is just when someone else messed up...;var sancus = (function(){ var config = { foo:bar, html5:cool }, init = function(){ // doStuff }; return{ init:init };}();sancus.init();

;var sancus = (function(){ var config = { foo:bar, html5:cool }, init = function(){ // doStuff }; return{ init:init };}();sancus.init();alert(config.foo);// won’t work

;var sancus = (function(){ var config = { foo:bar, html5:cool }, init = function(){ // doStuff }; return{ init:init };}();sancus.init();alert(sancus.config.foo);// won’t work

;var sancus = (function(){ var config = { foo:bar, html5:cool }, init = function(){ alert(config.foo); // will work }; return{ init:init };}();sancus.init();

Niet typesafe(of toch wel?)

var x = 5; // number var y = ‘5’;// stringif ( x == y ){ // true}

var x = 5; // numbervar y = ‘5’; // stringif ( x === y ){ // false}

Best practices

HTMLStructuur

<table>NOT FOR LAYOUT

<table> for tabular data

don’t code for presentation

code for content

tell a story

http://html5boilerplate.com/

Javascript is blocking

<a href=”#” onClick=”alert(‘hello world’);”> inline alert</a>

<a href=”#” onClick=”doStuff();”>inline alert</a><a href=”#” onClick=”doStuff();”>inline alert</a><a href=”#” onClick=”doStuff();”>inline alert</a><a href=”#” onClick=”doStuff();”>inline alert</a><a href=”#” onClick=”doStuff();”>inline alert</a><a href=”#” onClick=”doStuff();”>inline alert</a><a href=”#” onClick=”doStuff();”>inline alert</a><a href=”#” onClick=”doStuff();”>inline alert</a><a href=”#” onClick=”doStuff();”>inline alert</a><a href=”#” onClick=”doStuff();”>inline alert</a><a href=”#” onClick=”doStuff();”>inline alert</a><a href=”#” onClick=”doStuff();”>inline alert</a><a href=”#” onClick=”doStuff();”>inline alert</a><a href=”#” onClick=”doStuff();”>inline alert</a><a href=”#” onClick=”doStuff();”>inline alert</a><a href=”#” onClick=”doStuff();”>inline alert</a>

<!DOCTYPE HTML><html lang="nl"><head> <meta charset="UTF-8"> <title></title> <script src=”script.js”></script> <script src=”script2.js”></script> <script src=”script3.js”></script></head><body> foo</body></html>

(Inline) scripts are blockingeverytime they are encountered.

<!DOCTYPE HTML><html lang="nl"><head> <meta charset="UTF-8"> <title></title></head><body>  <script src=”script.js”></script></body></html>

CSSStyling

Start bigend small

base.css

beware of classisitus

Fontface

h1 {font-family:FrescoStdNormalRegular,arial;}

@font-face { font-family:FrescoStdNormalRegular; src: url(fonts/FrescoStd-Normal.eot); src: local(☺) url(fonts/FrescoStd-Normal.woff) format(woff), url(fonts/FrescoStd-Normal.otf) format(opentype), url(fonts/FrescoStd-Normal.svg#FrescoStd-Normal)format(svg);}

http://www.fontsquirrel.com/

css2.1 and css3

e[att^=”val”]

http://www.456bereastreet.com/archive/200601/ css_3_selectors_explained/

JavaScriptgedrag

put javascript at the bottom

one exception

(css).js-on .foo { display:none;}.foo { // what does it look like without js?}

combine multiple scripts

use unobtrusive javascript

$(‘a’).click(function(){ // do stuff});

Better:Event delegation

$("body").delegate("a", "click", function(){ // do stuff});

http://wnas.nl/hidden-advantage-of-event-delegation

Touch the dom as little as possible

Never ever mix

Inline scriptsare EVIL

Inline stylesare EVIL

Never ever mix

Write small functions

var hideStuff = function(tar){ $(tar).addClass(conf.cn.hide);};

Beware of the semicolon insertion

var a = bvar c = d

// broken :(var a = bvar c = d

var a = b;var c = d;

// still worksvar a = b;var c = d;

Dynamically load scripts

if($.foo.length !== 0){ $.getScript(‘bar.js’,doStuff());}

Write for NO javascript

Use hijax, not ajax.

html is a pretty accessible medium...

node.js

Vragen?(of wil je voorbeelden)

Bestpractices nl

by Wilfred Nas

Accessibility

Categories

Upload Details

Usage Rights

1 Embed 66

Statistics

Bestpractices nl Presentation Transcript