pls explain this construction....

[maya90]

please explain this construction.....

localStorage = (function () {
	return {
		setItem: function (key, value) {
		createCookie(key, value, 3000) 
	},	//	setItem
	getItem: function (key) {
		return(readCookie(key));
	}	//	getItem
};	//	return

}	//	function closed here )	//	why is this fn inside parens?

();	//	 what is this for?

why is the function after "localStorage =" enclosed in parens?

and what is the " (); " at the end for?

thank you...

[AussieJohn]

Hi Maya90,

This is called the Module Pattern

Basically the function is enclosed in parens to enclose it and turn it into a function expression (if it didn't have the parens it would be a function statement).

The extra set of parens at the end execute the expression so that the return statement will pass it's returned value to the variable on the outside of the expression.

I could go on explaining, but if you read the links I posted below, you'll get a much more in-depth explanation than I could possibly put in this post

• JavaScript Module Pattern: In-Depth
• Learning JavaScript Design Patterns
• My Favorite JavaScript Design Pattern
• Immediately-Invoked Function Expression (IIFE)
• Javascript module pattern: When to use it and why

[paul_wilkins]

Due to confusion such as this, it is better for the function parenthesis to be inside of the enclosing parenthesis, which helps to make it clearer what is happening.

localStorage = (function () {
    ...
}());

[maya90]

thank you for both replies....

AussieJohn, I love Australia, I've been there.. wish I were there now.. wish I lived there....

I love your "details" object... ;-) last night I clicked to your "psa" and downloaded Chrome and Opera for my iPhone.. (found out just recently can run browsers other than Safari on the iPhone...) to my horror discovered Opera is not good at all... doesn't support rounded corners... drop shadows look abysmal...

thanks again...

[AussieJohn]

Maya: Australia is pretty sweet (I hear New Zealand is pretty rad too, never been thuogh. Paul might be able to tell us )

Browsers on the iPhone other than Safari run with less privileges than the native browser I think, though I suppose they would give a decent enough browsing experience. (Though like you said, drop shadows don't look good, so maybe it doesn't get access to hardware rendering.)

I think one of the issues with a lot of newer sites is that people tend to only use the -webkit- CSS prefix and the no-prefix version of CSS properties, which results in some browsers like older Mozilla, Opera, Opera Mini, etc to not show the property properly. We had a discussion about it in the CSS forum a while back.

[maya90]

thank you Aussie... a bit off-topic, but since you responded to my Opera comment...

this is what I use for rounded corners, to cover all my bases, is this correct? it looks like it doesn't cover Opera...

-moz-box-shadow: 6px 6px 6px #6E3804; -webkit-box-shadow: 8px 8px 8px #6E3804; box-shadow: 2px 2px 2px #AB8159;

thank you...


Edit: PS: here, http://www.css3.info/preview/rounded-border/
that gray box that it says it's supposed to have rounded corners also on Opera, on Opera in my iPhone the corners are not rounded... :-(
oh well... for another thread, I suppose.....

[paul_wilkins]

this is what I use for rounded corners, to cover all my bases, is this correct? it looks like it doesn't cover Opera...

That's fine, Opera supports box-shadow too. See http://peter.sh/experiments/vendor-p...erty-overview/

This prefixing tool can help to simplify some of work that needs to be done too - http://cssprefixer.appspot.com/

[AussieJohn]

thank you Aussie... a bit off-topic, but since you responded to my Opera comment...

this is what I use for rounded corners, to cover all my bases, is this correct? it looks like it doesn't cover Opera...

I just had a quick look and it doesn't look like Opera Mini supports those properties, the main Opera browser does however. (http://caniuse.com/#search=border-radius)

If you want to truly make sure that you capture the majority of browsers you'll have to include all the prefixes.

-webkit-border-radius:4px;
-moz-border-radius:4px;
-ms-border-radius:4px;
-o-border-radius:4px;
border-radius:4px;