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 am attempting to build a small Javascript Library (similar to jQuery)

The purpose behind this is mostly a learning exercise, so asking why I don't just use an existing library is moot.

So far I have just got my basic constructor, a 'caller' function to invoke a new object, and some basic functions for an example.

Here is the code

var lemon = function() {
    var prop = {
        collection: []
    };
    var fn = {
        init: function(selector, context) {
            context = context || document;
            if (!selector) {
                return;
            } else if (typeof selector == "string") {
                prop.collection = fn.toArray(context.querySelectorAll(selector));
            } else if (selector instanceof Array || selector instanceof NodeList) {
                fn.toArray(selector).forEach(function(obj) {
                    prop.collection.push(obj);
                });
            } else if (selector instanceof Element) {
                prop.collection.push(selector);
            }
            prop.length = prop.collection.length;
            fn.extend.apply(this, [this, prop, fn]);
        },
        toArray: function(target) {
            var array = [];
            for (var i = target.length >>> 0; i--;) {
                array[i] = target[i];
            }
            return array;
        },
        extend: function(target) {
            var objects = Array.prototype.slice.call(arguments, 1);
            objects.forEach(function(obj) {
                var props = Object.getOwnPropertyNames(obj);
                props.forEach(function(key) {
                    target[key] = obj[key];
                });
            });
            return target;
        },
        addClass: function(klass) {
            for (var i = 0, l = this.length; i < l; i++) {
                this.collection[i].className += " " + klass;
            }
            return this;
        }
    };
    fn.init.apply(this, fn.toArray(arguments));
};
var $ = function(selector, context) {
    return new lemon(selector, context);
};
share|improve this question
 
Why is your API identical to jQuery. Why not sit down and think what you need for this javascript library. –  Raynos Oct 12 '11 at 21:19
 
I have sat down and thought of what i need, and it's 1/8th of jQuery. so i'm basically building the functionality I need and basing it off of jQuery user-end look and feel. without all of the bloat, or trying –  rlemon Oct 12 '11 at 22:01
 
@rlemon There is a reason for the jQuery Bloat/'try'-ing It would be good to first find out why this is such a bloat to you. If you use the minified files jQuery is quite small and then just put good expires headers when you serve them or link to a CDN. Otherwise things like you are doing can get quite tricky. –  James Khoury Oct 12 '11 at 23:06
add comment

1 Answer

up vote 2 down vote accepted

There is quite a performance problem with your code: it will rebuild the fn object and all its methods every time the lemon(selector, context) constructor gets called. You can avoid that behavior by using the module design pattern:

this.lemon = (function () {

    var fn = {
    /* The code for the fn object here
        init: function (selector, context) {
            var prop = this.prop;
            ...
    */

    return function lemon() {
        this.prop = {
            collection: []
        };
        fn.init.apply(this, fn.toArray(arguments));
    };

 })();

However, you will have to add a line var prop = this.prop; in the beginning of every method of the fn object that requires prop.

Also, when introducing a new global variable, it is better for the readability of your code to use this.myVar = myValue; or window.myVar = myValue;. In fact, the var keyword should only be used for local variables.

Finally, it is often recommended to put a space between the function keyword and the following parenthesis, but that's not mandatory.

share|improve this answer
 
that spacing was due to jsfiddle 'tidyup' function ;) and I noticed that performance improvement. So I have actually implemented a version of what you have noted :) –  rlemon Oct 14 '11 at 18:08
 
I'm glad to help you... Keep up the good work! –  Luc125 Oct 15 '11 at 11:17
add comment

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.