2
\$\begingroup\$

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.

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);
};
\$\endgroup\$
  • \$\begingroup\$ Why is your API identical to jQuery. Why not sit down and think what you need for this javascript library. \$\endgroup\$ – Raynos Oct 12 '11 at 21:19
  • \$\begingroup\$ 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 \$\endgroup\$ – rlemon Oct 12 '11 at 22:01
  • \$\begingroup\$ @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. \$\endgroup\$ – James Khoury Oct 12 '11 at 23:06
2
\$\begingroup\$

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.

\$\endgroup\$
  • \$\begingroup\$ 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 :) \$\endgroup\$ – rlemon Oct 14 '11 at 18:08
  • \$\begingroup\$ I'm glad to help you... Keep up the good work! \$\endgroup\$ – Luc125 Oct 15 '11 at 11:17

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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