3

我正在开发一个 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 的信号，但随后接收到编辑“测试”div 并将变量更改elem为测试 div 的信号。

有谁知道我可以如何防止这种情况？也许返回一个新的Jist()？

太感谢了！

4

1 回答 1

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
}
于 2013-10-24T15:11:43.940 回答