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 have been working on a jquery like library here is the code:

(function(){
        var int,
            method;
        function Jist(s){
            return new Jist.fn.init(s);
        };
        Jist.fn = Jist.prototype ={
            init : function(s){
                if(!s){
                    return this;
                }
                else{
                    this.length = 1;
                    if (typeof s === "object"){
                        this[0] = s;
                    }
                    else if(typeof s === "string"){
                        var obj;
                        obj = document.querySelectorAll(s);
                        this[0] = obj;
                        this.elem = this[0];
                    }
                    return this;
                }
            },
        }
        Jist.fn.init.prototype = Jist.fn;
        Jist.fn.init.prototype = {
            print : function(txt){
                for(var i=0; i<this.elem.length; i++) {
                    this.elem[i].innerHTML = txt;
                }
                return this;
            },
            pop : function(msg){
                alert(msg);
                return this;
            },
            click : function(callback){
                for(var i=0; i<this.elem.length; i++) {
                    this.elem[i].addEventListener("click",callback,false);
                }
                return this;
            },
            fadeOut : function(ms) {
                var elem = this.elem;
                var opacity = 1,
                    interval = 50,
                    gap = interval / ms;
                function func() { 
                    opacity -= gap;
                    for(var i=0; i<elem.length; i++) {
                        elem[i].style.opacity = opacity;
                    }
                    if(opacity <= 0) {
                        window.clearInterval(fading); 
                        for(var i=0; i<elem.length; i++){
                            elem[i].style.display = 'none';
                        }
                    }
                }
                var fading = window.setInterval(func, interval);
                return this;
            },
            fadeIn : function(ms) {
                var opacity = 0,
                    interval = 50,
                    gap = interval / ms,

                    elem = this.elem;
                    for(var i=0; i<elem.length; i++){
                        elem[i].style.display = 'block';
                        elem[i].style.opacity = opacity;
                    }
                function func() { 
                    opacity += gap;
                    for(var i=0; i<elem.length; i++){
                        elem[i].style.opacity = opacity;
                    }
                    if(opacity >= 1) {
                        window.clearInterval(fading);
                    }
                }
                var fading = window.setInterval(func, interval);
                return this;
            }
        };
        window.Jist = window._ = Jist;
})(); 

In jquery you can write al line of code like this: $("#logo").fadeOut(1000).fadeIn(1000);. I would like to be able to have my library function like that but I cant figure out how to do that.

I would really like it if someone could show me how to do this.

Thanks.

share|improve this question
add comment

closed as off-topic by Joseph the Dreamer, Jamal, palacsint, Jeff Gohlke, Gareth Rees Oct 28 '13 at 17:55

This question appears to be off-topic. The users who voted to close gave this specific reason:

  • "Questions must contain working code for us to review it here. For questions regarding specific problems encountered while coding, try Stack Overflow. After your code is working you can edit this question for reviewing your working code." – Joseph the Dreamer, palacsint, Jeff Gohlke, Gareth Rees
If this question can be reworded to fit the rules in the help center, please edit the question.

1 Answer

This behavior is called a fluent interface.

To achieve this, all your method calls must return the object on which the method is called (usually this) - that's what "self-referentiality" stands for.

In JQuery, it is recommended when you create plugins to return this.each() for this very reason (See this StackOverflow post for more information).

EDIT:

If what you mean is "how to implement a fluent interface that handles collections" :

this.each() in the context of a JQuery object returns a JQuery object. The JQuery object is designed to work on a collection of elements, may it be empty, with only one element, or many.

share|improve this answer
add comment

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