Plugin Test

JavaScript performance comparison

Test case created

Preparation code

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<div id="checkboxen">
<input type="checkbox" />
</div>

Preparation code output

Test runner

Warning! For accurate results, please disable Firebug before running the tests. (Why?)

Java applet disabled.

Testing in unknown unknown
Test Ops/sec
plugin Version 1
(function($){

        var elBox = $.elbox = function(){
                elBox.init;
        };

        $.extend( elBox, {
                version : '0.1b',
                defaults : {
                                $this: this,
                                option: true,
                                arrows: false
                        },
                opts : {},
                eventHolder : function( ){
                        console.log('as');
                        $('.elBox').on({
                                'click': function(){
                                        if( $(this).hasClass('checked') ){
                                                $(this).removeClass('checked');
                                                $(this).find('input').attr('checked', false);
                                        }else{
                                                $(this).addClass('checked');
                                                $(this).find('input').attr('checked', true);
                                        }
                                }
                        });
                },
                init : function( $this, opts ){
                        opts = $.extend(true, {}, elBox.defaults, opts);

                        $this.find('input[type="checkbox"]').each(function(){
                                if( $(this).is('checked') ){
                                        $(this).wrap('<div class="elBox checked"></div>');
                                }else{
                                        $(this).wrap('<div class="elBox"></div>');
                                }
                        });

                        elBox.eventHolder();
                }

        } );

        $.fn.elbox = function( options ){
                var $this = $(this);
                options = options || {};
                elBox.init( $this );
                return this;
        };

})(jQuery);


$('#checkboxen').elbox();
pending…
plugin Version 2
(function($){
        var defaults, internalData, methods;

// Extend
        $.extend({
                elBox: {
                        version: "0.1b"
                }
        });
       
        methods = {
                init: function( el, options ){
                        //opts = $.extend(true, {}, elBox.defaults, opts);
                        return this.each(function(){
                                var $this = $(this);
                               
                                $this.find('input[type="checkbox"]').each(function(){
                                        if( $(this).is('checked') ){
                                                $(this).wrap('<div class="elBox checked"></div>');
                                        }else{
                                                $(this).wrap('<div class="elBox"></div>');
                                        }
                                });

                                methods.eventHolder.apply(self);
                        });
                },
                eventHolder : function(){
                        console.log('as');
                        $('.elBox').on({
                                'click': function(){
                                        if( $(this).hasClass('checked') ){
                                                $(this).removeClass('checked');
                                                $(this).find('input').attr('checked', false);
                                        }else{
                                                $(this).addClass('checked');
                                                $(this).find('input').attr('checked', true);
                                        }
                                }
                        });
                }
        };

// start the plugin
        $.fn.elbox = function(method) {
                if (methods[method]) {
                        return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
                } else if (typeof method === "object" || $.isFunction(method) || !method) {
                        return methods.init.apply(this, arguments);
                } else {
                        $.error("Method " + method + " does not exist for jQuery.elBox.");
                }
        };

})(jQuery);

$('#checkboxen').elbox();
pending…

Compare results of other browsers

Revisions

You can edit these tests or add even more tests to this page by appending /edit to the URL. Here’s a list of current revisions for this page:

0 comments

Add a comment