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
}

javascript库变量正在改变

1 个答案: