ホームページ > 記事 > ウェブフロントエンド > js カプセル化とscope_javascript スキルの簡単な分析
js カプセル化とscope_javascript スキルの簡単な分析
- WBOYオリジナル
- 2016-05-16 17:29:161016ブラウズ
基本的なコードは次のとおりです
コードをコピーします コードは次のとおりです。
< html xmlns="http://www.w3.org/1999/xhtml">
保存をクリックしますが、この最も一般的に使用される 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;"
のようなバインディングのみを使用できます。したがって、次のようなテストがあります:
変更
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);
}); function functionTest(text)
{
varalertText=text
alertTestInnert();
});
this.AlertTest= 関数 (テキスト)
{ アラート(テキスト);
}
関数 alterTestInnert()
{
アラート(アラートテキスト);
}
}
関数alertTestOuter()
{
アラート(テキスト);
}
対応する HTML の変更は次のとおりです。
をクリックして、パラメータが正しく渡されているかどうかを確認します。すべて正常に完了しているようです。
最後に js コードを整理します。
共通の js コードを js ファイルに配置します。ここでは common.js に配置し、別のコードを htm に配置します。変更されたコードはすべて次のようになります。
{
varalertText=text
alertTestInnert();
});
this.AlertTest= 関数 (テキスト)
{ アラート(テキスト);
}
関数 alterTestInnert()
{
アラート(アラートテキスト);
}
}
関数alertTestOuter()
{
アラート(テキスト);
}
対応する HTML の変更は次のとおりです。
コードをコピーします コードは次のとおりです。
をクリックして、パラメータが正しく渡されているかどうかを確認します。すべて正常に完了しているようです。
最後に js コードを整理します。
共通の js コードを js ファイルに配置します。ここでは common.js に配置し、別のコードを htm に配置します。変更されたコードはすべて次のようになります。
コードをコピー コードは次のとおりです: