Javascript Module Pattern

by queryj

HTML

<p>
</p>
<div class="outer-div">outer div</div>
<div class="outer-div">outer div</div>
<div class="outer-div">outer div</div>
<div class="outer-div">outer div</div>
<div class="outer-div">outer div</div>

<span>
    a plain span 
</span>

<input type="button" id="b1" value="go" />

CSS

.outer-div {
    border: solid red 1px;
    height: 100px;
    width: 200px;
}

JavaScript

var blt = (function () {
    var my = {};
    var v = 1;

    function add(x, y) {
        return x + y;
    }

    my.add = add;
    return my;
}());

// Augment blt, for example in a different file.
var blt = (function (my) {
    my.jian = function (x, y) {
        return x - y;
    };

    return my;
}(blt));

$(function () {
    var r = blt.add(2, 3);
    $("div").append("result is " + r);
    $("div").append("result is " + blt.jian(6, 3));
});

function getMinsSecs() {
    var dt = new Date();
    return dt.getMinutes() + ":" + dt.getSeconds();
}

$("input").on("click", function () {
    $("p").append("Start time: " + getMinsSecs() + "<br />");
    $("div").each(function (i) {
        $(this).fadeOut(1000 * (i * 2));
    });
    $("span").promise().done(function () {
        $("p").append("End time: " + getMinsSecs() + "<br />");
    });
});