Friday, February 1, 2013

mclib–my personal javascript library

Though there are plenty of libraries that do many things for the average javascript programmer, there’s always things they don’t seem to do.  Or maybe they do the function but not quite the way you want.  Either way, there’s always going to be need for you to write some functions that you use time and again. This is my library of those functions, Michael Cornetto’s library, mclib.  You can find the documentation for it here.


It’s a bit small at the moment because I threw it together specifically to support Process Lists and Pouches but it will be added to in the future.  Currently it contains four namespaces and classes.

  • object: Contains object related functions like merge.
  • Event: A simple generic Event object.
  • pouch: A contained piece of passable storage that can be destroyed once used.
  • ProcessList: A list of processes that will be executed asynchronously but in order . 


Pouches are pieces of storage (an object) that is destroyable once used.  This isn’t strictly necessary when using javascript but when writing a large application in javascript every piece of information you don’t need, that you can clear from memory, is helpful. 

I find pouches useful when using ExtJS windows. Here’s one example of how I would use them.  In this example both the window and the pouch are destroyed when the close button is clicked.

        var pouch = mclib.pouch.get();
pouch.pop =
new Ext.Window({
buttons: [{
function (button, event) {
pouch.destroy({ close: pop });
listeners: {
function (panel) {
if (!pouch.destroying) {


A Process List is a list of processes that will be executed asynchronously but in order.  This is useful if performing involved calculations on each item in an array of objects.   I find pouches useful when using OpenLayers.  Here’s an example that iterates through all the features on a layer and performs calculations on each feature.

        var list = new mclib.ProcessList();

function (argsObj) {
//use argsObj.processed (number processed)
//to update your progress bar.

for (var i = 0, l = layer.features.length; i < l; i++) {
list.add(calculate, { feature: layer.features[i] });

function calculate(argsObj) {
//use argsObj.feature to access the feature
//then calculate away...

Because of IE’s design, Process Lists work better in Chrome than in IE. 

If you do decide to use this library please remember this is a first release.  If you have any problems, let me know.   

No comments:

Post a Comment