patternjavascriptMinor

Decoupling JavaScript and Html

Submitted by: @import:stackexchange-codereview·Mar 10, 2026·

Viewed 0 times

javascriptdecouplingandhtml

Problem

In response to my own question on Stack Overflow, I'm attempting a solution to decouple JavaScript and html. I'd appreciate any comments, proposed refactoring, or criticism.

I have a fiddle of it in use here

Here's the code:

(function (window, $, undefined) {
    "use strict";
    var ab = window.ab = window.autoBinder = {},
        elements;

    ab.exportSymbol = function (publicPath, object) {
        var tokens = publicPath.split("."),
            target = window,
            i;

        for (i = 0; i " + value + "");
};
// #endregion

Solution

Update here: http://jsfiddle.net/5ej8G/3/ (code is also pasted below)

Main suggestions:

your exportSymbol function can be refactored to handle an array of publicPaths and Objects.

The subscribe conditions can be consolidated since they throw the same message.

check your parameters before using. typeOf checks don't work well with all objects, but there are techniques to have them work with all objects. One from Angus Croll(http://javascriptweblog.wordpress.com/2011/08/08/fixing-the-javascript-typeof-operator/) is included in the link above.

Explicitly state which elements you want your code to act on, maybe by passing in a parameter object. doing a $("*"), on medium to large pages (with lots of dom elements) can be a performance hit.

(function (window, $, undefined) {
    "use strict";
    var ab = window.ab = window.autoBinder = {},
        elements,

        toType = function(obj) {
      return ({}).toString.call(obj).match(/\s([a-zA-Z]+)/)[1].toLowerCase()
    };
    //can handle an array of publicPaths and objects
    ab.exportSymbols = function (paramArray) {
        var tokens,
            target = window,
            i,
            index,
            len,
            limit,
            exportSymbol;
        if(toType(paramArray) !== 'array') { 
            throw "You must pass an array into this function.";            
        }

        //Export Symbol now becomes a inner helper function
        exportSymbol = function(pubPath, obj) {
            tokens = pubPath.split(".");
            lastIndex = tokens.Length;

            for (i = 0; i " + value + "");
};

Code Snippets

(function (window, $, undefined) {
    "use strict";
    var ab = window.ab = window.autoBinder = {},
        elements,

        toType = function(obj) {
      return ({}).toString.call(obj).match(/\s([a-zA-Z]+)/)[1].toLowerCase()
    };
    //can handle an array of publicPaths and objects
    ab.exportSymbols = function (paramArray) {
        var tokens,
            target = window,
            i,
            index,
            len,
            limit,
            exportSymbol;
        if(toType(paramArray) !== 'array') { 
            throw "You must pass an array into this function.";            
        }

        //Export Symbol now becomes a inner helper function
        exportSymbol = function(pubPath, obj) {
            tokens = pubPath.split(".");
            lastIndex = tokens.Length;

            for (i = 0; i < lastIndex ; i++) {
                target = target[tokens[i]];
            }
            target[tokens[lastIndex]] = obj;
        };

        //validate and run helper function on each object in array
        for(index= 0, len=paramArray.length; i < len; i++) {
            if(toType(paramArray.publicPath) !== 'string' 
               || toType(paramArray.publicPath) !== 'object') {
                    continue;
            }
            exportSymbol(paramArray[index].publicPath, paramArray[index].obj);            
        }
    };

    ab.exportProperty = function (owner, publicName, object) {
        owner[publicName] = object;
    };

    ab.extensions = function () {
        return {
            datePicker: function (element) {
                var params = {
                    minDate: 0,
                    showButtonPanel: false
                },
            e = $(element);

                if (e.data("mindate") !== undefined) {
                    params.minDate = e.data("mindate");
                }

                if (e.data("showpanel") !== undefined) {
                    params.showButtonPanel = e.data("showpanel");
                }

                e.datepicker(params);
            }
        };
    }();

    ab.hookups = (function () {
        return {
            make: function (value, element) {

                if (ab.extensions[value]) {
                    ab.extensions[value](element);
                }
            },
            publish: function (value, $element) {

                if (!value) {
                    return;
                }

                $element.change(function () {
                    $element.trigger(value, $element);
                });
            },
            subscribe: function (value, $element) {
                var trigger = $element.data("trigger");

               //Conditions can be consolidate since they trow the same message
                if ((trigger === undefined) || !ab.extensions[trigger]) {
                    throw "Found Subscribe without Trigger.";
                }                

                $(document).bind(value, function (event, htmlElement) {

Context

StackExchange Code Review Q#3328, answer score: 3

Revisions (0)

No revisions yet.