Take the 2-minute tour ×
Code Review Stack Exchange is a question and answer site for peer programmer code reviews. It's 100% free, no registration required.

I've been reading about jQuery plugins for a while and trying to implement our plugins in a more oop way. my manager is a c# guy and hates the way jQuery UI calls methods. i wanna use the approach bellow and wanna know your opinion about it. tell me the pros and cons of what i'm trying to use plz. ok this is it as a simple sample.it has works to do but for start:

    if(typeof Object.create !== 'function')
{
    Object.create = function(o)
    {
        function F()
        {
        }
        F.prototype = o;
        return new F();
    };
}
var Car = (function()
{
    var openDoor = function(doorNum)
    {
        alert("door #" + doorNum + " opened");
    };
    return {
        openDoor: openDoor
    };
}
)();
(function($, window, document, undefined)
{
    $.fn.car = function(options)
    {
        if(this.length)
        {
            return this.each(function() {

                var myCar = Object.create(Car);
                $.data(this, 'car', myCar);

                for(var prop in Car)
                {
                    if($.fn[prop] == null)
                    {
                        $.fn[prop] = function(params)
                        {
                            return this.each(function () {
                                if($.data(this, "car") == null)
                                {
                                    throw Error("not implemented function");
                                }
                                $.data(this, "car")[prop](params);
                            }
                            );
                        };   
                    }
                }

            });
        }
    };
})(jQuery, window, document);

$("#test").on("click", function()
              {
                $("#test").car().openDoor(1).css({color: 'red'});
              });

here is the fiddle link
http://jsfiddle.net/6zHP7/8/

share|improve this question

1 Answer 1

Well, to start, not sure what you mean by "more OOP manor" as jQuery is pretty much Object driven! However, as far as your code, I don't like the idea of extending on base JS items, like your extension to the Object model. In most cases it's unnecessary for that purpose anyway. Call it personal preference, but I think it always a horrible idea to play with the foundation. Think of it like a house. You can add furnishing, change the paint, even add a new roof, but you never crack the foundation. As for your plugin call, what's in it doesn't matter and when removed, you really don't have much of a plugin example there. It will probably preform as intended, but if you really want a robust, "Object Orientated" plugin, then you need consider name-spacing. I'm going to attach the base layout I follow. I designed it a couple years ago for a job and been using it ever since, works perfect every time! Be nice to it though, it bites!

/*  Example Plug-in Setup   */
(function($) {
    if (!$.myExample) { // check your plugin namespace does not already exist
        $.extend({  //  this will allow you to add your plugin to the jQuery lib
            myExample: function(elm, command, args) {
                //  keep in mind, right here you might want to do a class or data check to determine which direction this call is going
                //  for example, upon init the plugin on an element you may add the plugin name as a class, 
                //      this way, when it's recalled, you can see it alrady has that class and might be calling a command,
                //          thus make an if statemnt to push the process through
                return elm.each(function(index){
                    // do work to each element as its passed through
                    // be sure to use something like
                    //    return elm.each(function(e) { dor work });
                    // as your final statement in order to maintain "chainability"
                });
            }
        });
        $.fn.extend({   //  this gives the chainability functionality seen with $ funcs like: $("#eleID").css("color", "red") <--returns original element object
            myExample: function(command) {
                return $.myExample($(this), command, Array.prototype.slice.call(arguments, 1));
            }
        });
        $.myExample.props = {   //  Here you can establish specific properties to your plugin, prehaps even make them "Over-writable"
            key1: "value",
            key2: "value"
        };
        $.myExample.methods = { //  Here you can establish specific methods/functions for your plguin to carry out and maintain your namespace as well
            key1: function(param) {
                /*  do work */
            },
            key2: function(param) {
                /*  do work */
            }
        };
        //  This next part is not seen in many plugins but useful depending on what you're creating
        $.myExample.init = function(param) {    //  If you have an initialize method to apply, namespace it in here and calll on initializing your plugin
            var key = "value",
                key2 = {
                    subKey: "value"
                };
                /*
                /  run any number of initializing functions here
                /  I prefer to make my param a value that can be a
                /   string with a possible object
                /   the string for holding a base configuration
                /   the object for any change in properties or base values for that config
                */
        };
        $.myExample.defaults = {    //  establish base properties here that can be over-written via .props, but their values should never truly change
            key1: "value",
            key2: {
                prop1: {
                    subKey1: "value",
                    subKey2: "value"
                },
                prop2: {
                    subKey1: "value"
                }
            },
            key3: function(param) {

            }
        };
    }
})(jQuery);

//  Then of course, make use of your plugin like:
$("#eleID").myExample();
//  OR
$.myExample($("#eleID"));
share|improve this answer
    
thanks for your answer. I needed something that could be used like var car = new Car(); and then I can call my functions like this car.init($("test"), {options}); car.openDoor(); and I also needed to have my plugin to act as a jQuery standard plugin. I've come up with a solution that if you'r intrested I'll post it –  Hojat Jafari Nov 21 '12 at 19:51

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.