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

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

Andere mochten auch

Andere mochten auch (7)

Ähnlich wie Bestpractices nl

Ähnlich wie Bestpractices nl (20)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

Bestpractices nl

Hinweis der Redaktion