jQuery with classes

[sgehrig@…]

Dear jQuery community

I spent the last hours writing a jQuery-like class implementation. It's an adaption from the UI Widget functionalities. It would be a great if something like this would be included into the the jQuery base framework. I've attached my code below. Please let me know if it's possible to integrate something like this into the jQuery core.

(function ($) {


    /**
    * @method Extends jQuery with a namespace functionality.
    **/
    $.fn.namespace = function (strNamespace) {
        strNamespace = String(strNamespace);

        var NS_SEPARATOR = '.';
        var parts = strNamespace.split(NS_SEPARATOR);
        var objToExtend = $.fn;
        var fullNamespace = '$.fn.';
        var nsStart = 0;

        if (parts[0] === '$') {
            nsStart = 1;
        }
        if (parts.length > 1 && parts[1] === 'fn') {
            nsStart = 2;
        }

        for (var i = nsStart; i < parts.length; ++i) {
            fullNamespace += parts[i];
            if (!objToExtend[parts[i]]) {
                var newNs = {};
                newNs[parts[i]] = { namespace: parts[i], fullNamespace: fullNamespace };
                $.extend(objToExtend, newNs);
            }
            objToExtend = objToExtend[parts[i]];
            fullNamespace += NS_SEPARATOR;
        }
        return objToExtend;
    };


    /**
    * @method Extends jQuery with public class declarations similar to the widget classes.
    **/
    $.fn.pubClass = function (strNamespace, strName, objBase, fncClass) {
        strNamespace = String(strNamespace);
        strName = String(strName);

        var fullName = strNamespace + '.' + strName;
        var namespaceObj = $.fn.namespace(strNamespace);

        // create selector for plugin
        $.expr[':'][fullName] = function (elem) {
            return !!$.data(elem, strName);
        };

        // apply argument overloading
        if (jQuery.isFunction(objBase)) {
            fncClass = objBase;
        }

        var prototypeInst = new fncClass();
        prototypeInst.options = $.extend({}, prototypeInst.options);

        namespaceObj[strName] = function (options) {
            if (arguments.length) {
                $.fn.proxyInstantiate(this, options);
            }
        }
        namespaceObj[strName].prototype = $.extend(true, objBase || {}, prototypeInst);

        $.fn.proxyPrototype(strName, namespaceObj[strName]);
    };


    /**
    * @method Instantiates a new proxy object and sets the given arguments as options.
    **/
    $.fn.proxyInstantiate = function (objSelf, objOptions) {
        objSelf = Object(objSelf);

        var args = Array.prototype.slice.call(arguments, 1);
        var options = args.length
            ? $.extend.apply(null, [true, objOptions].concat(args))
            : objOptions;

        objSelf.options = $.extend(true, {}, objSelf.options, options);

        if (objSelf._create) {
            objSelf._create();
        }
        if (objSelf._init) {
            objSelf._init();
        }
    };


    /**
    * @method Assigns the given class to the JQuery fn tree.
    **/
    $.fn.proxyPrototype = function (strName, fncClazz) {
        strName = String(strName);
        $.fn.assertIsTrue('fncClazz', typeof (fncClazz) === 'function');

        $.fn[strName] = function (options) {
            return new fncClazz(options);
        };
    };

    /**
    * @method Throws an argument exception if the given flag is false.
    **/
    $.fn.assertIsTrue = function (strArgumentName, blnMustBeTrue) {
        strArgumentName = String(strArgumentName);

        if (!blnMustBeTrue) {
            var errorObj = {
                message: 'The given argument "' + strArgumentName + '" contains a value which value is out of range.',
                argument: strArgumentName,
                toString: function () {
                    return this.message;
                }
            };
            throw errorObj;
        }
    };

})(jQuery);

Thanking you in anticipation.

Best Regards

Silvan

[rwaldron]

See:  https://spreadsheets.google.com/viewform?hl=en&authkey=CPmgicsO&formkey=dG0yTEs2ZTFWQUhDRUp5dzRyc3NwV2c6MA#gid=0

[roger.meier]

I would love to see something like the " jQuery with classes" as a feature of jQuery Core.

Today there ar many similar implementations and concepts (plugins, jQuery UI Widget) available and having a mature OO like class implementation within jQuery core would be great. This will also simplify object oriented development and harmonize architecture across jQuery, jQuery UI and jQuery mobile.

just submitted thia comment as a jQuery 1.7 Roadmap Proposal

-roger

[john]

Nominating ticket for 1.7 discussion.

[rwaldron]

-1, Plugin

[jaubourg]

-1,

[timmywil]

-1, plugin

[dmethvin]

-1, We don't need it internally, so it should be a plugin. See also underscore.js, backbone.js, JavascriptMVC, or SproutCore.

[sgehrig@…]

yep, jQuery doesn't need it. but jQuery widget (and other larger frameworks) would need an implementation like this. it's really recommended that the jQuery core contains a class implementation. your roadmap for Milestone 1.7 contains a point "2.generic subclassing" which may correspond to our suggestion.

[pascal]

Hi I have a question concerning your implementation. Why are you adding your function to the prototype ($.fn) instead of the object ($). I think it would be better to have $.pubClass(...) as with $.widget(...) instead of $.fn.pubClass. And I don't see a reason to have this method in every jQuery object. (For example $("body").pubClass(...) dosn't make sens, or does it?)

Tanks and Best

[sgehrig@…]

i agree, you can also assign the functions to $.pubClass (it's the more convenient way).

but i strongly recommend to assign the classes to $.fn (as the namespace function does) because with this solution the classes are available in all jQuery contexts.

[john]

-1

[addyosmani]

-1

[ajpiano]

-1

[pjand]

+1

[scott.gonzalez]

-1, we don't need a minimal class system, we need stateful plugins to have consistent APIs

[rwaldron]

Closing per 1.7 roadmap meeting resolution