特定のイベントのグローバル変数を設定するjQuery関数を書く良い方法はありますか？

Question

私はライブラリから利用できるさまざまなキャンバス機能を持ついくつかの図面を実行するためにキャンバスライブラリを使用しています（私はfabric.jsを使用しています）。

私のjavascriptのスキルはあまり良くありませんので、コードを正しく構造化する方法についてアドバイスをいただければ幸いです。これはfabric.jsの問題ではなく、単にjavascript/jQueryであることに注意してください。

私はいくつかのキャンバス機能を持っていますが、オブジェクト/イレーサーツールを削除する必要があるときに問題が発生します。

var isEraserActive = false; 
 

 
    $('#cursorCv').click(function(){ 
 
     canvas.isDrawingMode = false; 
 
     isEraserActive = false; 
 
    }); 
 

 
    $('#eraserCv').click(function(){ 
 
     canvas.isDrawingMode = false; 
 
     canvas.deactivateAll().renderAll(); 
 
     isEraserActive = true; 
 
    }); 
 

 
    canvas.on('object:selected', function(options){ 
 
    \t \t if(isEraserActive){ 
 
     canvas.remove(options.target); 
 
     } 
 
    }); 
 
    
 

 

私はイベントリスナーの条件を満たし内のすべての機能にちょうどそうif(isEraserActive)をisEraserActive = false;を追加することのアイデアを好きではありません。これを達成するためのはるかに効率的な方法が必要です。また、私の関数の実行に時間がかかり、イベントリスナーが起動してもグローバル変数は時間的に変化しないでしょうか？それはちょうど実際には悪いコード構造のように見えます。例えば、私は下にもっと多くのキャンバス機能を持っています。この問題にアプローチするための最良の方法だろう何

$('#squareCv').click(function(){ 
 
    var isEraserActive = false; 
 
}); 
 

 
$('#hollowSquareCv').click(function(){ 
 
    var isEraserActive = false; 
 
}); 
 

 
$('#circleCv').click(function(){ 
 
    var isEraserActive = false;  
 
}); 
 

 
$('#hollowCircleCv').click(function(){ 
 
    var isEraserActive = false; 
 
}); 
 

 
$('#fontTextCv').click(function(){ 
 
    var isEraserActive = false; 
 
});

？

ありがとうございます！

Answer 1

同じ変数の再インスタンス化を中止するためにスクリプト全体にアクセスできるパブリック変数を設定できます。また、委任されたクリックイベントを行うこともできます。この方法では、多くのクリックイベントを作成する必要はなく、特定の要素にイベントリスナーを追加することを避けることができます。

var isEraserActive = true, 
 
    eraserInActiveList = ['squareCv', 'hollowSquareCv', 'circleCv', 'hollowCircleCv', 'fontTextCv']; 
 

 
$('#page-content').on('click', function(e) { 
 
    var targetElement = e.target; 
 
    
 
    if (targetElement && eraserInActiveList.indexOf(targetElement.id) > -1) { 
 
    //For making eraser in active 
 
    isEraserActive = false; 
 
    alert('Eraser active: ' + isEraserActive); 
 
    } else if (targetElement && targetElement.id === 'another-button') { 
 
    //Do something else 
 
    alert('Doing something else'); 
 
    } else if (false) { 
 
     //Update with your own condition to meet your needs. 
 
    } 
 
    
 
});

#canvas-test { 
 
    margin: 16px 12px; 
 
    width: 100%; 
 
    height: 250px; 
 
    border: 1px solid; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<section id="page-content"> 
 
    <button type="button" id="squareCv">Square</button> 
 
    <button type="button" id="hollowSquareCv">Hollow Square</button> 
 
    <button type="button" id="circleCv">Circle</button> 
 
    <button type="button" id="hollowCircleCv">Hollow Circle</button> 
 
    <button type="button" id="fontTextCv">Font Text</button> 
 

 
    <!-- Example content --> 
 
    <canvas id="canvas-test"></canvas> 
 
    <button type="button" id="another-button">Sample Button that do something else</button> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras maximus lacinia ligula, vitae ultrices sem ornare quis. Proin mi arcu, accumsan venenatis ligula eu, molestie laoreet turpis. Proin viverra feugiat dui, sit amet commodo sapien tincidunt 
 
    in. Duis lacus tellus, pulvinar non tellus eget, faucibus aliquam libero. Duis condimentum quam tortor, suscipit molestie magna gravida et. Curabitur vel quam suscipit, condimentum felis ac, scelerisque mauris. Fusce id elit felis. Vestibulum id porta 
 
    eros, efficitur tempus urna. Maecenas pulvinar arcu ut urna scelerisque rhoncus. Donec et ullamcorper dui. Donec non interdum elit. Quisque quis lectus facilisis, ultrices felis ac, rhoncus massa. Sed dictum tempor mi nec consequat. Phasellus pharetra 
 
    ut mi eget pulvinar. Nulla tempor nunc at dolor vestibulum consequat.</p> 
 

 
    <hr /> 
 

 
    <p>Suspendisse quis felis feugiat, aliquam nulla at, lobortis mi. Nulla mattis vitae ante sed vehicula. Quisque dui justo, ultricies quis iaculis suscipit, scelerisque at erat. Proin rhoncus at mauris eget suscipit. Aliquam interdum sollicitudin posuere. 
 
    Pellentesque hendrerit placerat venenatis. Etiam quis euismod ex, at elementum diam.</p> 
 
</section>

Answer 2

私はあなたのコードは、正確にのように見える いますが、すべての関数の前にoutsite VARを宣言することができる方法を知ってはいけません。 各イベントで宣言してください。 またはあなたがそのようなことを行うことができます：あなたのisEraserActiveはオフにし、共通のクラス名をオブジェクトしてから一度だけこれを使用するすべての

$('#hollowCircleCv,#fontTextCv,#circleCv,#hollowSquareCv,#squareCv').click(function(){ 
    var isEraserActive = false; 
}); 

Answer 3

与える：

$(".eraserOff").click(function() { 
    isEraserActive = false; 
}); 

をそれとも、他のいくつかの一般的なセレクタを使用します（何がお勧めするのかわかるようにHTMLを表示する必要があります）、自動的に必要な要素がすべて含まれています。委任されたイベント処理を使用して、単一の親イベントハンドラを使用して、クリックしたオブジェクトのタイプを調べて、消しゴムを変更するかどうかを判断することもできます。複数の要素の共通イベントハンドラには、常に多くのオプションがあります。使用するものは、あなたが公開していない特定のHTMLに大きく依存します。

また、私の関数の実行に時間がかかり、イベントリスナーが起動すると、 グローバル変数は時間的に変化しませんか？

いいえ、これは問題ではありません。関数の実行に時間がかかっている場合、何も実行されていないので、何かが正しくシーケンスされています。

Answer 4

「Revealing Module Pattern」は、変数が名前空間になっているため、追加または実行されている可能性のある他のJSと競合することはありません。

var yourAppName = (function() { 
    var pub = {}; 
    pub.eraser = false; 
    //API 
    return pub; 
}()); 

この変数を設定するか、それを

yourAppName.eraser //false 
yourAppName.eraser = true; 
yourAppName.eraser // true 

をチェックするJavaScript Closureも使用が、もう少し理解することは困難である可能性があります。

Answer 5

複数のHTML DOMイベントに1つのハンドラ関数をバインドできます。たとえば：

function setEraserClickHandler(event){ 
    isEraserActive = false; 
} 
$('#squareCv').click(setEraserClickHandler); 
$('#hollowSquareCv').click(setEraserClickHandler); 
$('#circleCv').click(setEraserClickHandler); 
$('#hollowCircleCv').click(setEraserClickHandler); 
$('#fontTextCv').click(setEraserClickHandler); 

それとも、あまりにもハンドラにパラメータを送信することができます。

function setEraserClickHandler(eraser_active, event){ 
    isEraserActive = eraser_active; 
} 
$('#fontTextCv').click(this.setEraserClickHandler.bind(this, false)); 
$('#hollowSquareCv').click(this.setEraserClickHandler.bind(this, false)); 

など。

それともそして、これらすべてのオブジェクトに共通するクラスを追加し、することをお勧めしますその1つのクラスだけにイベントハンドラをバインドします。