JavaScript オブジェクト指向の静的クラスと非静的クラス_js オブジェクト指向

ある日まで、js で DOM タグを結合し始めましたが、それらを結合し続ける必要があり、コードがますます醜くなり、それがコードの単純さの問題だけでなく、パフォーマンスの問題を引き起こすこともありました。このままでは、3か月も経たないうちに、私が何を書いたかは神には分からないでしょう。この記事の目的は完全に私の経験を記録することです。
まず、私が JavaScript を書く習慣を変えるきっかけとなったゴミコードを見てみましょう。演習、テスト、デバッグ、さらには正式なプロジェクトにおいても、次のような大量のコードが埋め込まれています。

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

Function finduser(userId)
{
}
関数 showmessage(msg)
{
Var message="プロンプト、問題が発生しました、エラーの理由" msg;
Alert(message); append(obj)
{
Var onclick="createdom()"
Var title="Hello";
$(obj).append(""
}


言わないでください上記のコードを見たことがありませんが、正直に言うと、上記のコードは非常に速く書くことができ、呼び出すのも簡単です。最初の 2 つの関数だけでは憤りを感じるほどではない場合、3 番目の関数は作成者に挨拶したくなるはずです。このコードの。はい、3 番目の関数が私がオブジェクト指向を使用する決定を直接引き起こしたのです。

実際には、3 番目の関数を次のように完全に変換できます。

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

function append(obj)

{
var a=document.craeteElement("a");
a.title=”Hello”;
a.href=”javascript:void(0);”; a. タイトル;
a.click=function(){createdom();}
$(obj).append(a);


?何か進歩はありますか? これは私が望んでいるコードですが、十分に簡潔ではありません。 DOM オブジェクトの作成をクラスにカプセル化し、上記の 3 つのメソッドを 1 つのオブジェクトにインストールできればと考えています。この種の作業は、インターネットでコードやサンプルを検索する必要がなく、非常に簡単です。 . C#のオブジェクト指向の考え方をそのまま応用することで完成します。
1 つ目は、上記の 3 つのメソッドをオブジェクトにカプセル化することです。カプセル化は非常に簡単で、コードを直接記述する必要はありません。

3 つのカプセル化された関数




コードをコピー

コードは次のとおりです: User={ Function finduser(userId)

{

},
Function showmessage(msg)
{
Var message="プロンプト、問題が発生しました、エラーの理由" msg;
アラート(メッセージ);
関数 append(obj)
Var a=document.craeteElement(“a”);こんにちは” ;
a.href=”javascript:void(0);”;
a.click=function(){createdom();}; >$ (obj).append(a);
}
}



上記の 3 つのメソッドを格納するための User 変数を宣言し、それを次の間で使用するだけです。カンマで区切られたさまざまなメソッド この時点で User はコンストラクターやプライベート コンストラクター (おそらく) を持たない静的クラスであり、とにかく新しいものにはできないことに注意してください。
次に、DOM オブジェクトの作成をカプセル化する静的クラスを作成します。コードは次のとおりです。

コードをコピー


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

createElement={ element=function(targetName){return document.createElement(targetName);}, a=document.createElement("a ") } 非常に単純なので、上記の CreateElement オブジェクトが適切に動作するかどうかをテストできます。今回のテストは append メソッドで行われます。 append メソッドは再度次のコードに変換されます。

コードをコピー

コードは次のとおりです。

function append(obj) { Var a= createElement .a; a.title=”Hello”; a.href=”javascript:void(0);”; title; a.click=function(){createdom();}; $(obj).append(a);

これまでのところ、かなりうまくいきました。少し変更する必要があります。append 関数で 3 つの a を作成し、obj オブジェクトに順番に追加する必要があります。コードは次のとおりです。

Code




コードをコピーします

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

関数 append(obj)
{
For(i=0;i{
Var a= createElement .a; =”こんにちは”;
a.href=”javascript:void(0);”;
a.innerHTML=a.title;
a.click=function(){createdom();} ;
$(obj).append(a);
}
}

表示される最終結果は、obj オブジェクト内で a が 1 つだけ取得されたことです。分析後、Var a= CreateElement.a を通じて初めて CreateElement.a を呼び出したとき、a は C# の世界に戻ったような気分になります。 ;
、a 属性の document.createElement("a") はすでにメモリ内に a オブジェクトを常駐させています。その後、CreateElement.a をどのように呼び出しても、実際にはメモリ内の a への参照を取得するだけです。オブジェクト、これが静的クラスの特別な点です。ただし、CreateElement.element 関数を呼び出してオブジェクトを取得すると、毎回新しいオブジェクトが得られるだけであり、メソッドは保存しません。オブジェクトへの参照、それは確かです。はい、解決策は、CreateElement.element 関数を呼び出して新しいオブジェクトを作成することですが、この方法はオブジェクト指向ではないため、推奨されます。
もう 1 つのより良い解決策は、非静的クラス、つまりエンティティ クラスを使用することです。非静的クラスを作成する方法も非常に簡単です。

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

createElement=function(){

element=function(targetName){return document.createElement(targetName );};
a=document.createElement("a");


createElement オブジェクトを直接宣言し、コンストラクターを持たせます。メンバーはセミコロンで区切られています。もちろん、必要に応じてこのように直接記述することもできますが、同じ効果はありません。

コードをコピー コードは次のとおりです。 function createElement (){

element =function(targetName){return document.createElement(targetName);};

a=document.createElement(“a”);


上記のステートメントの後, we C# のように append 関数で createElement クラスを使用して DOM オブジェクトを作成できます。

関数

コードをコピー

コードは次のとおりです。 関数の追加(obj) {

for(i=0;i{
var ele=new createElement();
var a=ele.a; a.title =”こんにちは”;
a.href=”javascript:void(0);”;
a.innerHTML=a.title;
a.click=function(){createdom() ;} ;
$(obj).append(a);
}
}


このようにして、 new createElement() が新しいオブジェクトになるたびに、参考問題なし。
実際、上で述べたのは Javascript の静的クラスと非静的クラスの違いです。もちろん、静的クラスと非静的クラスの使用効率には依然として多少の違いがあることもわかります。参照の競合を気にしない場合は、静的クラスを選択する方が便利です。