javascript庫變量正在改變

Question

我正在開發一個javascript庫，這里是代碼：

    (function(){
        var elem,
            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;
                        elem = this[0];
                    }
                    return this;
                }
            },
        }
        Jist.fn.init.prototype = Jist.fn;
        Jist.fn.init.prototype = {
            print : function(txt){
                for(var i=0; i<elem.length; i++) {
                    elem[i].innerHTML = txt;
                }
            },
            click : function(callback){
                for(var i=0; i<elem.length; i++) {
                    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 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>
<div class="test">Test</div>
<div class="test">Test</div>
<script>
jist("#inpt").click(function(){
    //escape(txt)
    //btoa()
    //atob()
    jist("#fader").fadeOut(1000);
    jist(".test").print("hello world");
    window.setTimeout(function(){jist(".test").print("nata");},2000);

});

</script>

當我單擊按鈕時，帶有“test”類的div淡出而不是我的div推子。 這是因為庫接收淡​​出衰減器div的信號，然后接收信號以編輯“test”div並將變量elem更改為測試div。

有誰知道我怎么能阻止這個？ 也許回來一個新的Jist() ？

非常感謝！

Answer 1

您聲明elem變量的方式，它是唯一的，可供所有Jist實例訪問。 換句話說，它是您為定義Jist創建的范圍中的全局變量。 這樣，每次調用Jist創建新實例時，都會為所有實例重置該變量。

為了讓Jist的每個實例都有自己的實例，elem應該是一個實例變量。 因此，不應將elem聲明為命名空間的根，而應將其聲明為實例變量，例如：

this.elem = obj

代替

elem=obj

然后，每次想要操作它時，都需要使用this.elem訪問它。 請注意，這也意味着您必須在某些回調中更改訪問它的方式，例如淡入淡出功能。 一種方法是將回調綁定到您的Jist實例，如（僅限ES5）：

fadeOut : function(ms) {
    //snip
    var fadeCallback = function(){
        //manipulations on this.elem
    }.bind(this);
    //snip
}

或創建一個閉包

fadeOut : function(ms) {
    //snip
    //note that this variable's scope is limited to this call to fadeOut
    var elem = this.elem;
    var fadeCallback = function(){
        //manipulations on elem
    };
    //snip
}