background preloader

JavaScript Module Pattern: In-Depth

JavaScript Module Pattern: In-Depth
The module pattern is a common JavaScript coding pattern. It’s generally well understood, but there are a number of advanced uses that have not gotten a lot of attention. In this article, I’ll review the basics and cover some truly remarkable advanced topics, including one which I think is original. The Basics We’ll start out with a simple overview of the module pattern, which has been well-known since Eric Miraglia (of YUI) first blogged about it three years ago. If you’re already familiar with the module pattern, feel free to skip ahead to “Advanced Patterns”. Anonymous Closures This is the fundamental construct that makes it all possible, and really is the single best feature of JavaScript. (function () { // ... all vars and functions are in this scope only // still maintains access to all globals }()); Notice the () around the anonymous function. Global Import JavaScript has a feature known as implied globals. Luckily, our anonymous function provides an easy alternative. Module Export

Related:  html5 certificationolindgalletJS interesting articlesJavaScript!

dojo.setObject Set a property from a dot-separated string, such as “A.B.C”. In javascript, a dot separated string like obj.parent.child refers to an item called child inside an object called parent inside of obj. setObject will let you set the value of child, creating the intermediate parent object(s) if they don’t exist. Without dojo.setObject, we often see code like this: Introducing smartcrop.js / Image cropping is a common task in many web applications. Usually just cutting out the center of the image works out ok. It's often a compromise and sometimes it fails miserably. Evelyn by AehoHikaruki Can we do better than that?

Understand JavaScript’s “this” With Clarity, and Master It (Also learn all the scenarios when this is most misunderstood.) Prerequisite: A bit of JavaScript.Duration: about 40 minutes. The this keyword in JavaScript confuses new and seasoned JavaScript developers alike. Stop Writing Slow Javascript - I Like Kill Nerds As Alfred Pennyworth once profoundly said in The Dark Knight Rises: Some front-end developers just want to watch the world burn.Alfred Pennyworth, The Dark Knight Rises As developers we are constantly learning, always growing and sometimes whether we realise it at the time or not, we are always making mistakes. Using Objects to Organize Your Code This is a reprint of an article that originally appeared in the March 2009 issue of JSMag. When you move beyond simple snippets of jQuery and start developing more complex user interactions, your code can quickly become unwieldy and difficult to debug. This article shows you how to start thinking about these interactions in terms of the bits of behavior the feature comprises, using the object literal pattern. In the past few years, JavaScript libraries have given beginning developers the ability to add elaborate interactions to their sites.

PSR-2 — Coding Style Guide This guide extends and expands on PSR-1, the basic coding standard. The intent of this guide is to reduce cognitive friction when scanning code from different authors. It does so by enumerating a shared set of rules and expectations about how to format PHP code. The style rules herein are derived from commonalities among the various member projects. Private Members in JavaScript Douglas Crockford JavaScript is the world's most misunderstood programming language. Some believe that it lacks the property of information hiding because objects cannot have private instance variables and methods. But this is a misunderstanding. JavaScript objects can have private members.

Spring-cleaning Unused CSS With Grunt, Gulp, Broccoli or Brunch [caption id="attachment_6609" align="aligncenter" width="640"] The tough economic times on Tatooine hit everyone hard, including the Jawas.[/caption] Delivering a fast experience on the web usually involves reducing server response time, minification of CSS/JS/HTML and an optimisation of images and above-the-fold content. We can further minimize the latency caused by stylesheet loading by removing unused CSS rules delivered to the client. 3 ways to define a JavaScript class Introduction JavaScript is a very flexible object-oriented language when it comes to syntax. In this article you can find three ways of defining and instantiating an object. Even if you have already picked your favorite way of doing it, it helps to know some alternatives in order to read other people's code.

Building Up Perlin Noise Let’s start with the interpolant. The original Perlin noise algorithm used a cubic Hermite spline of the form s(t) = 3t2 − 2t3. This particular function is also sometimes known as smoothstep. It describes an s-shape, ramping smoothly up from 0 to 1 over the range of 0 to 1. It’s also symmetrical around the center of this square; that is, s(t) = 1 − s(1 − t). var The variable statement declares a variable, optionally initializing it to a value. Syntax var varname1 [= value1 [, varname2 [, varname3 ... [, varnameN]]]]; varnameN Variable name.