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;
})()

そして、ライブラリをテストするために body セクションにあるものは次のとおりです。

<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>

ボタンをクリックすると、div フェーダーではなく、クラス「test」の div がフェードアウトします。これは、ライブラリがフェーダー div をフェードアウトする信号を受信した後、「テスト」div を編集する信号を受信し、変数elemをテスト div に変更するためです。

これを防ぐ方法を知っている人はいますか？たぶん新しいものを返しJist()ますか？

どうもありがとう！

4

1 に答える 1

1

elem 変数を宣言した方法は、一意であり、Jist のすべてのインスタンスにアクセスできます。つまり、Jist を定義するために作成したスコープ内のグローバル変数です。そうすれば、Jist を呼び出して新しいインスタンスを作成するたびに、すべてのインスタンスの変数がリセットされます。

Jist の各インスタンスが独自のものを持つためには、elem をインスタンス変数にする必要があります。そのため、名前空間のルートで elem を宣言する代わりに、次のようにインスタンス変数として宣言する必要があります。

this.elem = obj

それ以外の

elem=obj

その後、操作するたびに、this.elem でアクセスする必要があります。また、フェード関数など、一部のコールバックでアクセスする方法を変更する必要があることも意味することに注意してください。1 つの方法は、(ES5 のみ) のようにコールバックを Jist インスタンスにバインドすることです。

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 に答える