1

私はjavascriptライブラリを書いています。基本的なコードは次のとおりです。

(function(){
        var int,
            method,
            versrionInfo = {
                release : "0.2.1",
                date : "10/22/2013",
                releaseNotes : "Jist has been modified to handle lists of elements."
            },
            Jist = function(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;
                }
            },
            click : function(callback){
                for(var i=0; i<this.elem.length; i++) {
                    this.elem[i].addEventListener("click",callback,false);
                }
            },
            hide : function(){
                for(var i=0; i<elem.length; i++) {
                    elem[i].style.display = 'none';
                }
            },
            show : function(){
                for(var i=0; i<elem.length; i++) {
                    elem[i].style.display = ''; 
                }
            },
            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);
            }
        };
        window.Jist = window.jist = window.Jis = window.jis = window.Jit = window.jit = window._ = Jist;
})();

これをテストするために、ボディセクションにあるものを次に示します。

<div id="fader"></div>
<input type="button" id="inpt" value="click"></input>
<script>
jist("#inpt").click(function(){
    jist("#fader").fadeOut(1000);
});
</script>

これはうまくいきますが、jQueryのような関数を拡張できるようにしたいので、これを行うことができます:

<div id="fader"></div>
<input type="button" id="inpt" value="click"></input>
<script>
jist("#inpt").click(function(){
    jist("#fader").print("hi").fadeOut(1000);
});
</script>

テキスト「こんにちは」がdivに表示され、divがフェードアウトするようにします。

どうすればこれができるか知っている人はいますか？

どうもありがとう！

4

1 に答える 1

0

メソッド.print()は を返すだけthisです。それが のようなメソッド連鎖を可能にするものjist("#fader").print("hi").fadeOut(1000);です。

print メソッドを次のように変更します。

print : function(txt){
            for(var i=0; i<this.elem.length; i++) {
                this.elem[i].innerHTML = txt;
            }
            return this;
        },

したがって、チェーンできるようにしたいメソッドは、 の値を返す必要がありますthis。おそらく、この戻り値を 、 などの多くのメソッドに追加して、すべてがメソッド チェーンをサポートするようにしたいと思うでしょ.hide()う.show()。

于 2013-10-24T21:53:22.037 に答える