mhulse/js-patterns

Some of my favorite JavaScript plugin design patterns: The Facade Pattern, The Revealing Module Pattern, Immediately-invoked Function Expressions (IIFE)s, The Module Pattern imports and exports …

js-patterns's Issues

Add this pattern

https://www.sitepoint.com/mvc-design-pattern-javascript/#commentsSection

demo here https://codepen.io/SitePoint/pen/zzyoXw

Dissect this pattern

https://gist.github.com/mhulse/48bc5011e52aa79e6ff9

Error Propagation in JavaScript with Error Translation Pattern

https://medium.com/front-end-weekly/error-propagation-in-javascript-with-error-translation-pattern-78cf7178fe92 #

A few more

https://scotch.io/bar-talk/4-javascript-design-patterns-you-should-know

Dissect

https://www.sitepoint.com/javascript-design-patterns-observer-pattern/

async/await

https://davidwalsh.name/async-await

Parse out the goods from there.

Add pattern from grunt repo

https://github.com/mhulse/grunt-html-boiler/tree/gh-pages/build/files/scripts

Move these to here

https://gist.github.com/mhulse/2abd5ffd828e0fae45cbeec86317b97d

Clean them up too. Maybe add demos.

Article on writing maintainable patterns

https://www.javascriptjanuary.com/blog/writing-maintainable-and-readable-javascript-design-patterns

jquery pub sub

http://johnpolacek.github.io/jquery-databinding/

Constructor pattern

Via @caseydedore:

var models = {
  Course: function () {
    this.id = 0;
    this.title = '';
    this.itemCode = '';
    this.type = 0;
    this.ccYear = 0;
    this.credits = 0;
    this.lessons = [];
    this.prerequisites = [];
    this.prerequisiteGroups = [];
    this.prerequisiteMaterials = [];
    this.prerequisiteOthers = [];
    this.comments = '';
    this.isCore = false;
    this.isPrint = false;
    this.getIsLocal = function () {
      return this.itemCode.indexOf('.LC') >= 0;
    };
    this.getIsApplication = function () {
      return this.type === 4;
    };
    this.isAdvanced = function () {
      return this.type !== 4 &&
        !this.getIsLocal() &&
        !this.isCore;
    };
    this.isPrint = function () {
      return this.type !== 2;
    };
    this.application = {
      id: '',
      title: '',
      number: ''
    };
  },
  Worksheet: function () {
    this.id = 0;
    this.comments = '';
    this.title = '';
    this.type = 'roadmap';
    this.author = '';
    this.tooltips = [];
    this.trackDefaults = '';
    this.ccID = '';
    this.comment = '';
    this.lastUpdated = '';
    this.createDate = '';
    this.programId = 0;
    this.curriculumStartDate = '';
    this.clcsSelectable = 0;
    this.programDefault = 0;
    this.sortOrder = 0;
    this.getWorksheetType = function() {
      if (uiConfig.adminMode.getIsAdmin()) {
        return $('input[type=radio][name=worksheet_type]:checked').val();
      } else if ($defaultViewSelector.find('option:selected').attr('data-snapshot') == '1' ||
        $('#radio_snapshot').prop('checked')) {
        return 'snapshot';
      }
      return this.type;
    };
  }
};
// var course = new models.Course();
// var worksheet = new models.Worksheet();

http://www.samselikoff.com/blog/some-Javascript-constructor-patterns/

What about this one?

https://gist.github.com/carldanley/9187f369adcfc5c25e4f

Java design patterns

This looks like a cool way to organize:

https://github.com/iluwatar/java-design-patterns

'nother … AMD/Node/CommonJS/Browser boilerplate pattern

(function( factory ){
    if ( typeof define === 'function' && define.amd ) {
        // AMD
        define( ['jquery', 'datatables', 'datatables-editor'], factory );
    }
    else if ( typeof exports === 'object' ) {
        // Node / CommonJS
        module.exports = function ($, dt) {
            if ( ! $ ) { $ = require('jquery'); }
            factory( $, dt || $.fn.dataTable || require('datatables') );
        };
    }
    else if ( jQuery ) {
        // Browser standard
        factory( jQuery, jQuery.fn.dataTable );
    }
}(function( $, DataTable ) {
'use strict';
 
 


var
 
    create: function ( conf ) {
    },
 
    get: function ( conf ) {
    
    },
 
    set: function ( conf, val ) {
    },
 
    enable: function ( conf ) {
    },
 
    disable: function ( conf ) {
    },
 
    inst: function ( conf ) {
    },
    update: function ( conf, data ) {
    },
 
    focus: function ( conf ) {
    }
};
 
 
}));

Node.js design patterns

https://blog.logrocket.com/design-patterns-in-node-js/

Might be some good stuff in there.

JavaScript operations that are blocking

Unfortunately, some JavaScript operations will always be synchronous, including:

running calculations
updating the DOM
using localStorage or IndexedDB to store and retrieve data.

https://www.sitepoint.com/avoiding-dom-blocking/

Dissect this pattern

https://gist.github.com/mhulse/1c290fd61319c7a4c7d8