Bestpractices nl

Javascript
“the worlds most misunderstood language”

Global namespace
Don’t touch!

x = global;

var x = global;
// if not inside a function

function foo(){

x = global;

// without var.

var y = notglobal;

// yeah, var
}

;var sancus = function(){

var x = notglobal;
};

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 config = {

foo:bar,

html5:cool

// no trailing ,

},
init = function(){

// doStuff

};

return{

init:init

};
}();


var config = {

foo:bar,

html5:cool

},
init = function(){

// doStuff

};

// return init to global namespace

return{

init:init

};
}();


var config = {

foo:bar,

html5:cool

},
init = function(){

// doStuff

};

return{

init:init

};
}();
sancus.init();
// call init

// ; is just when someone else messed up...

var config = {

foo:bar,

html5:cool

},
init = function(){

// doStuff

};

return{

init:init

};
}();
sancus.init();


var config = {

foo:bar,

html5:cool

},
init = function(){

// doStuff

};

return{

init:init

};
}();
sancus.init();

alert(config.foo);
// won’t work


var config = {

foo:bar,

html5:cool

},
init = function(){

// doStuff

};

return{

init:init

};
}();
sancus.init();

alert(sancus.config.foo);
// won’t work


var config = {

foo:bar,

html5:cool

},
init = function(){

alert(config.foo);

// will work

};

return{

init:init

};
}();
sancus.init();

var x = 5;
// number

var y = ‘5’;
// string

if ( x == y ){

// true
}

var x = 5;
// number
var y = ‘5’; // string

if ( x === y ){

// false
}

<a

href=”#”

onClick=”alert(‘hello world’);”>

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 blocking
everytime they are encountered.

<!DOCTYPE HTML>
<html lang="nl">
<head>

<meta charset="UTF-8">

<title></title>
</head>
<body>



<script src=”script.js”></script>
</body>
</html>

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.456bereastreet.com/archive/200601/
css_3_selectors_explained/

(css)
.js-on .foo {

display:none;
}
.foo {

// what does it look like without js?
}

$(‘a’).click(function(){

// do stuff
});

$("body").delegate("a", "click", function(){

// do stuff
});

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

Touch the dom as little as possible

var hideStuff = function(tar){

$(tar).addClass(conf.cn.hide);
};

Beware of the semicolon insertion

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

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

if($.foo.length !== 0){

$.getScript(‘bar.js’,doStuff());
}

html is a pretty accessible medium...

Vragen?
(of wil je voorbeelden)

Bestpractices nl

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

En vedette

En vedette (7)

Similaire à Bestpractices nl

Similaire à Bestpractices nl (20)

Dernier

Dernier (20)

Bestpractices nl

Notes de l'éditeur