JavaScript Patterns snippets

Snippets for Sublime Text with good solutions for regular problems in JavaScript.

In software engineering, a design pattern is a general reusable solution to a commonly occurring problem within a given context in software design.

– Wikipedia

To install through Package Control, search for JavaScript Patterns. If you still don't have Package Control in Sublime Text, go get it. If you insist to not install it, you can download the package and put it manually inside your Pacakages directory. It should work but will not update automatically.

Snippets

Some JS Patterns snippets in the wild.

Immediate function

trigger: ifun⇥

To keep the global scope clean and to use strict mode in a controlled enviroment, without triggering it in the global scope.

;(function() {
    'use strict';
    // closure scope
}());

Reference: - StackOverflow: Immediate functions JavaScript

For in

trigger: forin⇥

For-in loops in JavaScript will iterate over new properties added to the prototype chain of the object we are iterating. To loop through only in the object's properties, we have to use .hasOwnProperty('propertyName'). Like below.

for (var prop in obj) {
  if ({}.hasOwnProperty.call(obj, prop)) {
    obj[prop];
  }
}

Reference: - JavaScript Patterns, by Stoyan Stefanov - The Essentials of Writing High Quality JavaScript

Object.keys loop

trigger: okl⇥

If your enviroment supports that method, prefer this over for in.

Object.keys(obj).forEach(function(key) {
  // inside loop
});

Improved for loop

trigger: ifor⇥

A faster way to write a for loop. It caches the array size, so we don't need to recalculate the size at every iteration.

for (i = 0, len = arr.length; i < len; i++) {
  // array length is calculated only 1 time and then stored
}

Reference: - Browser Diet

Constructor pattern

trigger: constructor⇥

That constructor pattern enforces the use of new, even if you call the constructor like a function. In JavaScript, if the new keyword is forgotten, this will reference the global object inside the constructor, and that's never a desirable situation.

That approach is like $() and $.Deferred() in jQuery, where you can call it in the same way with new $() and new $.Deferred.

var ConstructorName = (function() {
  'use strict';

  function ConstructorName(arg1, arg2) {
    // enforces new
    if (!(this instanceof ConstructorName)) {
        return new ConstructorName();
    }

    // constructor body
  }

  ConstructorName.prototype.someMethod = function(arg) {
    // method body
  }

  return ConstructorName;
}());

Reference: - Object Creation patterns

Singleton pattern

trigger: singleton⇥

With the Singleton pattern there will be only one instance of a constructor function. If you try to instantiate another one, the first instance that was created at first will be returned.

var singletonName = (function() {
  'use strict';

  var instance;

  singletonName = function() {
    if (instance) {
      return instance;
    }

    instance = this;

    // your code goes here
  };

  return singletonName;
}());

Reference: - Singleton Pattern - Simples Ideias

Module

trigger: module⇥

A simple module pattern. Uses strict mode and suggest the use of a init function for kickoff. Also possible to define some “private” methods and variables. Only the variable with the module's name is returned and therefore made public outside the closure.

var moduleName = (function() {
  'use strict';

  var privateVar = '';

  var moduleName = {
    init: {
      // kickoff
    }
  }

  return moduleName;
}());

Reference: - JavaScript Module Pattern: In-Depth

Revealing module

trigger: rmodule⇥

Some might say it's a less verbose and more organized way to define a module. It declares all the variables and functions in the private scope and returns an object with references to what is going to be public.

var revealingModule = (function() {
  'use strict';

  var privateVar = 'foo';
  var publicVar = 'bar';

  function privateFunction() {

  }

  function publicFunction() {

  }

  return {
    publicVar: publicVar,
    publicFunction: publicFunction
  };
}());

AMD

trigger: amdmod⇥

The Asynchronous Module Definition (AMD) API specifies a mechanism for defining modules such that the module and its dependencies can be asynchronously loaded. This is particularly well suited for the browser environment where synchronous loading of modules incurs performance, usability, debugging, and cross-domain access problems.

define([
    "module1"
], function(module1) {
    "use strict";

    // static public property
    myModule.prop;

    var myModule = function() {

        // public var
        this.b = null;

        // pseudo-protected var
        this._c = null;

    };

    function privateMethod(args) {
    };

    myModule.staticMethod = function(args) {
    };

    myModule.prototype.publicMethod = function(args) {
    };

    return myModule;
});

Reference: - AMD API

Memoization

Caches the return value of function. Useful for repetitive calls for a computationally expensive function.

var expensiveFunction = (function() {
  'use strict';

  var funcMemoized = function() {
    var cacheKey = JSON.stringify(Array.prototype.slice.call(arguments));
    var result;

    if (!funcMemoized.cache.hasOwnProperty(cacheKey)) {
        // your expensive computation goes here

        funcMemoized.cache[cacheKey] = result;
    }

    return funcMemoized.cache[cacheKey];
  }

  funcMemoized.cache = {};

  return funcMemoized;
}());

Throttle

The function will be called no more than one time every X seconds, even if you call it repeatedly. Useful for some DOM events like the resize event on the window.

var onResize = (function() {
  'use strict';

  var timeWindow = 200; // time in ms
  var lastExecution = new Date((new Date()).getTime() - timeWindow);

  var onResize = function(args) {
    // your code goes here
  };

  return function() {
    if ((lastExecution.getTime() + timeWindow) <= (new Date()).getTime()) {
      lastExecution = new Date();
      return onResize.apply(this, arguments);
    }
  };
}());

Reference: - Underscore.js

Debounce

The function will postpone its execution until X miliseconds have elapsed since the last call. Useful for some events that you want to happen after some time after the last interaction, like an autocomplete or a double-click in a submit button.

var autocomplete = (function() {
  'use strict';

  var timeWindow = 500; // time in ms
  var timeout;

  var autocomplete = function(arg1, arg2) {
    // your code goes here
  };

  return function() {
    var context = this;
    var args = arguments;
    clearTimeout(timeout);
    timeout = setTimeout(function() {
      autocomplete.apply(context, args);
    }, timeWindow);
  };
}());

Reference: - Underscore.js - David Walsh

Namespace

trigger: namespace⇥

Namespacing is a technique employed to avoid collisions with other objects or variables in the global namespace. They're also extremely useful for helping organize blocks of functionality in your application into easily manageable groups that can be uniquely identified. Extensibility is of course key to any scalable namespacing pattern and IIFEs can be used to achieve this quite easily.

;(function(namespace) {
  'use strict';

  // your code goes here
  // namespace.method = function(){};
})(window.namespace = window.namespace || {});

Reference: - Addy Osmani - Essential JS Namespacing

Once

trigger: once⇥

Creates a function that can only be executed one time.

var once = (function() {
  var didRun = false;

  // This function will be executed only once, no matter how many times
  // it is called.
  function once() {
    // ...
  }

  return function() {
    if (didRun) {
      return;
    }

    didRun = true;

    return foo.apply(this, arguments);
  }
})();

Contributors

59  Caio Gondim
01  Arne Schlüter
01  Breno Calazans
01  Philip Blyth
01  gaboesquivel

Donating

If you found this project useful and are willing to donate, transfer some bitcoins to 1BqqKiZA8Tq43CdukdBEwCdDD42jxuX9UY or through the URL https://www.coinbase.com/caiogondim

Or via PayPal.me https://www.paypal.me/caiogondim.

License

The MIT License (MIT)

Copyright © 2014 Caio Gondim

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.