JavaScript デザイン パターン - シングル モード オブジェクト指向の學(xué)習の基礎(chǔ)_js オブジェクト指向
May 16, 2016 pm 06:29 PM
シングルトンは、スクリプトがロードされるときに作成され、一連の関連する変數(shù)とメソッドを論理ユニットに編成でき、論理ユニット內(nèi)のコンテンツは次のようになります。
単一のエンティティは主に 3 つの部分に分かれています
內(nèi)部情報へのアクセスに使用されるエントリ変數(shù) (例: Sky)
屬性 (例:nickName/age/timeInfo)
メソッド (例:sayHello)
基本構(gòu)造
var Sky = {
/*
* 関數(shù) 1 、変數(shù)管理
*/
nickName: "sky"、
age: "26"、
/*
* 関數(shù) 2、ロード中に変數(shù)を初期化
* 読み込み処理中に Sky を?qū)g行して初期化します。 .info
*/
timeInfo: function()
{
var _year = new Date().getFull Year()
; return _year;
}(),
/*
* 関數(shù) 3、関數(shù)管理。関數(shù)が散在しているように見えなくなります。
*/
sayHello: function ()
{
alert("hello, world!");
}
}
//すべての內(nèi)部情報は変數(shù)
alert( Sky.timeInfo);
この記事を読めば、インターネット上に多くの専門家が書いているので、ほぼ理解できると思います。 js であり、シングル モードが非常によく使用されます。
シングルトンは、名前空間を分割し、関連するプロパティとメソッドのグループをまとめて編成するために使用されるオブジェクトです。インスタンス化できる場合、インスタンス化できるのは 1 回だけです。
シングル モードは、JavaScript で最も基本的なモードの 1 つですが、最も便利なモードでもあります。
機能:
。名前空間を分割して、グローバル変數(shù)によって引き起こされる危険性を排除できます。
。ブランチング技術(shù)を使用してブラウザ間の違いをカプセル化します。
。コードをより統(tǒng)合して整理できるため、読みやすく、保守しやすくなります。
モノマーの基本構(gòu)造 (正しい書き方):
/*Basic Singleton*/
var Singleton = ｛
attribute1: true,
attribute2:10,
method1:function( ){}
コードをコピーします
var box = { width:0,
this.width = w;
this.height = h;
}
}//ボックスは名前空間を分割します。名前空間內(nèi) 変數(shù)は空間
內(nèi)でのみ有効です。 上記のモノマー內(nèi)のすべてのメンバーとメソッドはパブリックです。つまり、モノマーの外部で任意に変更できます。シングルトンは名前空間を提供しますか?
続けましょう:
コードをコピーします
コードは次のとおりです:
var box = {
width:0,
var init = box.getArea();
alert(init );
init の幅と高さは初期化されていないため、エラーが報告されます:
コードをコピーします。
コードは次のとおりです:
var box = {
height:0,
getArea:function() {
}
init と getArea で使用される幅と高さはモノマーが所有する変數(shù)ではなく、グローバル変數(shù)であるため、影響を受けることなくモノマーの外部でランダムな呼び出しを行うことができることがわかりました。次のように書くとわかりやすくなります:
height:0,
getArea:function(){
return width*height;//js 內(nèi)のオブジェクトへのアクセスは表示、つまり省略できません
},
init:function(w,h){
width = w;
height = h;
} //ここでの幅、高さは実際には単一のオブジェクトではありません
window.onload = function(){
width = 0;
var width = box.getArea(); >alert (width);
}
このように書くとエラーが報告されます。上記の方法ではグローバル変數(shù)の名前空間が確立されていないことがわかります。また、グローバル変數(shù)は危険をもたらします。 。上の記述は正しいので、確認してみましょう:
コードをコピーします
},
init:function(w,h){
this.width = w;
this.height = h;
}
window.onload = function(){
width = 0;
height = 0;
var width = box.getArea(); ?? >}
シングルトンはシングルトン內(nèi)の幅と高さの名前空間を確立しているため、window.onload の幅と高さには干渉がないことがわかります。
メンバーの屬性:
名前空間について説明した後、単一の変數(shù)とメソッドの屬性を設(shè)定しましょう。他の言語 (java、c、c#...) を?qū)W習したことがある人は、クラス メンバーのパブリックとプライベートについてよく知っているはずですが、
コードをコピー
コードは次のとおりです。
//rとpiの値を変更したい場合は、パブリック関數(shù)を設(shè)定することによってのみ実行できます
init:function(setR){
r = setR;
}
}
})()
window.onload = function( ){
circle.r = 0 ;//プライベートメンバーにアクセスできません。これはサークルのパブリックメンバー r を作成するのと同じです
alert(circle.getArea())
circle.init(0) );//公共ユーティリティ関數(shù)を使用できます。
alert(circle.getArea());
};
パブリック変數(shù)とメソッドは読み取りおよび書き込み可能です
アクセス:
プライベート メンバーの場合は、先頭を変更せずに直接アクセスできます。
パブリック アクセスの場合は、単一スコープ內(nèi)でその前に「this.」を追加する必要があります。単一のスコープ。"circle." (単一の名前。) を先頭に追加する必要があります。
。ブランチ技術(shù)を使用してブラウザ間の違いをカプセル化します注: a インスタント バインディングを?qū)g現(xiàn)するには必ずクロージャを使用してください
b 各ブランチをセミコロンで區(qū)切ります
c を開くと、最終的に名前が返されますブランチの
d. 呼び出すときは、シングルトン名を持つブランチのメソッド名を使用します。
コードは次のとおりです:
//単一分岐テクノロジを使用して XHR (XMLHttpRequest) オブジェクトを定義します。このオブジェクトはクロージャを使用して実裝する必要があります。
var XHR = (function(){
// 3 つの分岐
var標準 = {
cXHR:function(){
return new XMLHttpRequest();
}
};
var activeXNew = {
cXHR:function(){
return new ActiveXObject('Msxml2.XMLHttp');
}
}
var activeXOld = {
cXHR:function(){
return new ActiveXObject('Microsoft.XMLHttp' ); ??>}
};
//ブランチを割り當てるには、失敗しないものをすべて返します。
try{
testObject = standard.cXHR ();
return standard;// エラーがスローされなかった場合はこのブランチを返す
}catch(e){
try{
testObject = activeXNew.cXHR();
}catch(e){
try{
testObject = activeXOld.cXHR();
return activeXOld;
throw new Error( ' XMLHttpRequestObject が失敗しました!');
}
}
}
})();
window.onload = function(){
alert(XHR.cXHR() ;私も初心者なので、指摘するほどの発言力はなく、専門家からのアドバイスを忘れてしまいます。
ホットAIツール
Undress AI Tool
脫衣畫像を無料で
Undresser.AI Undress
リアルなヌード寫真を作成する AI 搭載アプリ
AI Clothes Remover
寫真から衣服を削除するオンライン AI ツール。
Clothoff.io
AI衣類リムーバー
Video Face Swap
完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中國語版
中國語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統(tǒng)合開発環(huán)境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
8638
17
1783
16
1728
56
1579
28
1443
31
Java フレームワークにおけるデザイン パターンとアーキテクチャ パターンの違い
Jun 02, 2024 pm 12:59 PM
Java フレームワークにおけるデザイン パターンとアーキテクチャ パターンの違いは、デザイン パターンがソフトウェア設(shè)計における一般的な問題に対する抽象的な解決策を定義し、ファクトリ パターンなどのクラスとオブジェクト間の相互作用に焦點を當てていることです。アーキテクチャ パターンは、階層化アーキテクチャなどのシステム コンポーネントの編成と相互作用に焦點を當てて、システム構(gòu)造とモジュールの間の関係を定義します。
PHP デザイン パターン: テスト駆動開発の実踐
Jun 03, 2024 pm 02:14 PM
TDD は、高品質(zhì)の PHP コードを作成するために使用されます。その手順には、テスト ケースを作成し、期待される機能を記述し、テスト ケースを失敗させることが含まれます。過度な最適化や詳細な設(shè)計を行わずに、テスト ケースのみが通過するようにコードを記述します。テスト ケースが合格したら、コードを最適化およびリファクタリングして、可読性、保守性、およびスケーラビリティを向上させます。
Guice フレームワークでのデザイン パターンの適用
Jun 02, 2024 pm 10:49 PM
Guice フレームワークは、次のような多くの設(shè)計パターンを適用します。 シングルトン パターン: @Singleton アノテーションによってクラスのインスタンスが 1 つだけであることを保証します。ファクトリ メソッド パターン: @Provides アノテーションを使用してファクトリ メソッドを作成し、依存関係の注入中にオブジェクト インスタンスを取得します。戦略モード: アルゴリズムをさまざまな戦略クラスにカプセル化し、@Named アノテーションを通じて特定の戦略を指定します。
デザインパターンがコードメンテナンスの課題にどのように対処するか
May 09, 2024 pm 12:45 PM
デザイン パターンは、再利用可能で拡張可能なソリューションを提供することで、コード メンテナンスの課題を解決します。 オブザーバー パターン: オブジェクトがイベントをサブスクライブし、イベントが発生したときに通知を受信できるようにします。ファクトリ パターン: 具象クラスに依存せずにオブジェクトを作成するための集中的な方法を提供します。シングルトン パターン: クラスには、グローバルにアクセス可能なオブジェクトの作成に使用されるインスタンスが 1 つだけ存在することが保証されます。
Java デザイン パターンにおけるデコレータ パターンの分析
May 09, 2024 pm 03:12 PM
デコレータ パターンは、元のクラスを変更せずにオブジェクトの機能を動的に追加できる構(gòu)造設(shè)計パターンです。抽象コンポーネント、具象コンポーネント、抽象デコレータ、具象デコレータの連攜によって実裝され、ニーズの変化に合わせてクラス機能を柔軟に拡張できます。この例では、ミルクとモカのデコレーターが総額 2.29 ドルで Espresso に追加されており、オブジェクトの動作を動的に変更するデコレーター パターンの力を示しています。
Java 設(shè)計パターンにおけるアダプター パターンの素晴らしい使用法
May 09, 2024 pm 12:54 PM
アダプター パターンは、互換性のないオブジェクトが連攜できるようにする構(gòu)造設(shè)計パターンであり、オブジェクトがスムーズに対話できるように、あるインターフェイスを別のインターフェイスに変換します。オブジェクト アダプタは、適応されたオブジェクトを含むアダプタ オブジェクトを作成し、ターゲット インターフェイスを?qū)g裝することにより、アダプタ パターンを?qū)g裝します。実際のケースでは、クライアント (MediaPlayer など) はアダプター モードを通じて高度な形式のメディア (VLC など) を再生できますが、クライアント自體は通常のメディア形式 (MP3 など) のみをサポートします。
Spring MVCフレームワークでのデザインパターンの適用
Jun 02, 2024 am 10:35 AM
SpringMVC フレームワークは次の設(shè)計パターンを使用します: 1. シングルトン モード: Spring コンテナーを管理します。 2. ファサード モード: コントローラー、ビュー、およびモデルの対話を調(diào)整します。 3. ストラテジ モード: リクエストに基づいてリクエスト ハンドラーを選択します。 : アプリケーション イベントを公開し、リッスンします。これらの設(shè)計パターンは SpringMVC の機能と柔軟性を強化し、開発者が効率的で保守可能なアプリケーションを作成できるようにします。
Java フレームワークでデザイン パターンを使用する利點と欠點は何ですか?
Jun 01, 2024 pm 02:13 PM
Java フレームワークでデザイン パターンを使用する利點には、コードの可読性、保守性、拡張性の向上が含まれます。欠點としては、複雑さ、パフォーマンスのオーバーヘッド、使いすぎによる學(xué)習曲線の急上昇などが挙げられます。実際のケース: プロキシ モードはオブジェクトの遅延読み込みに使用されます。デザイン パターンを賢く使用して、その利點を活用し、欠點を最小限に抑えます。
