js カプセル化とscope_javascript スキルの簡単な分析-jsチュートリアル-php.cn

基本的なコードは次のとおりです

< html xmlns="http://www.w3.org/1999/xhtml">
<br>

もう一度保存をクリックします。キャンセルする場合は特定の操作が必要です. まず今回のコードは上記の通りです:
保存をクリックしますが、この最も一般的に使用される jquery バインディングイベントが動作しないのは不思議です。比較した結果、バインディングを $(document).ready(function () {}) で行う必要があることを忘れていたことがわかりました。

js は次のように変更されました。 >

コードをコピーしますコードは次のとおりです。 var text="test"; (document).ready(function () {

var t=new functionTest(text);

 }); 
 function functionTest(text)
 {
 varalertText=text 
 $("#btnSave") .click(function (e) { 
 alertTestInnert(); );
 } 
 function alterTestInnert()
 {
アラートテキスト);
 } } 
 } 
 } functionalertTestOuter()
 {
alert(text);
 }
 

変更後、[保存] をクリックするとパラメータが渡されますこれにより、異なるパラメータを異なるポイントで渡すことができます。 
しかし、ページがいくつかのタグを動的に生成し、これらのタグのクリック イベントも処理する必要があるという別の状況もあります。もう一度キャンセルボタンを例に挙げます。キャンセルボタンは動的に生成されるため、保存と同じ方法は使用できません。 

onclick="javascript:t.AlertTest;"
 のようなバインディングのみを使用できます。したがって、次のようなテストがあります: 
変更

コードをコピー
コードは次のとおりです:

クリックしても反応がありません。次のように変更してください

コードをコピーコードは次のとおりです:

まだ応答がありません次のように変更します:

コードをコピーコードは次のとおりです:

応答があります今度はブラケットが欠けているようです。カプセル化への変更方法は次のとおりです。

コードをコピーコードは次のとおりです:

クリックしても反応せず、プロンプト Uncaught ReferenceError: t is not generated
変数 t が定義されておらず、スコープが有効になっているようです。そこで、js を次のように変更しました。つまり、次のように、変数 t を外側に、代入を内側に置きます。

コードをコピーコードは次のとおりです:

 var t;
 var text="test"; 
 $(document).ready(function () {
 t=new functionTest (テキスト); 
 }); 
 関数 functionTest(text)
 {
 varalertText=text 
 $("#btnSave").click(function (e) { 
 alertTestInnert(); 
 {
 アラート(alertText);
 } 
 } 
 関数alertTestOuter()
 {
 アラート(テキスト);
 }
 


最後のステップは、パラメータを渡すメソッドの呼び出しをキャンセルする方法です。 

最初のステップは、js を次のように変更することです。つまり、パラメーターを渡す必要があるメソッドへの呼び出しをキャンセルする関数を変更します。コードは次のとおりです。 

コードをコピーします

コードは次のとおりです: var t; var text="test"; $( document).ready(function () { t =new functionTest(text);

});

コードをコピーしますコードは次のとおりです。

をクリックして、パラメータが正しく渡されているかどうかを確認します。すべて正常に完了しているようです。
最後に js コードを整理します。
共通の js コードを js ファイルに配置します。ここでは common.js に配置し、別のコードを htm に配置します。変更されたコードはすべて次のようになります。

コードをコピーコードは次のとおりです:

<br>

人気のチュートリアル

詳細>