[解決済み] JavaScriptモジュールパターン(例)【終了しました
2022-05-25 03:22:15
質問
2つ(またはそれ以上)の異なるモジュールがどのように接続されて動作するかを示すアクセス可能な例が見当たりません。
そこで、どなたか、モジュールがどのように一緒に動作するかを説明する例を書く時間があるかどうかをお聞きしたいのです。
どのように解決するのですか?
Modularデザインパターンにアプローチするためには、まずこれらの概念を理解する必要があります。
即時呼び出し型関数式(IIFE)。
(function() {
// Your code goes here
}());
関数の使い方は2通りあります。1. 関数宣言 2. 関数式。
ここでは、関数式を使っています。
名前空間とは? ここで、上記のコードに名前空間を追加すると
var anoyn = (function() {
}());
JSにおけるクロージャとは?
JSでは関数の中に関数を宣言することができます!)すると、その関数は常にスコープにカウントされます。つまり、外側の関数の変数が常に読み込まれることになります。 同じ名前のグローバル変数があれば、それは読み込まれません。これは、名前の衝突を避けるために、モジュラーデザインパターンを使用する目的の一つでもあります。
var scope = "I am global";
function whatismyscope() {
var scope = "I am just a local";
function func() {return scope;}
return func;
}
whatismyscope()()
では、上で述べた3つのコンセプトを適用して、最初のモジュラーデザインパターンを定義してみましょう。
var modularpattern = (function() {
// your module code goes here
var sum = 0 ;
return {
add:function() {
sum = sum + 1;
return sum;
},
reset:function() {
return sum = 0;
}
}
}());
alert(modularpattern.add()); // alerts: 1
alert(modularpattern.add()); // alerts: 2
alert(modularpattern.reset()); // alerts: 0
目的は、変数のアクセシビリティを外部から見えないようにすることです。
お役に立てれば幸いです。幸運を祈ります。
関連
-
Vueのイベント処理とイベントモディファイアの解説
-
[解決済み】JavaScriptで「無効な日付」のDateインスタンスを検出する
-
JavaScriptのgetElementById()メソッド入門
-
[解決済み] JavaScriptで "use strict "は何をするのか、その根拠は?
-
[解決済み] JavaScriptで文字列が部分文字列を含むかどうかを確認する方法は?
-
[解決済み] あるJavaScriptファイルを他のJavaScriptファイルにインクルードするにはどうすればよいですか?
-
[解決済み] JavaScriptで現在のURLを取得する?
-
[解決済み] ループ内のJavaScriptクロージャ - シンプルな実用例
-
[解決済み】JavaScriptの比較では、どちらの等号演算子(== vs ===)を使うべきですか?
-
[解決済み】オブジェクトからプロパティを削除する(JavaScript)
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
Vue Element-uiは、アイコンを追加するためのツリーコントロールノードを詳細に実装しています。
-
HTML+CSS+JavaScriptで簡単な三目並べゲームを作成する。
-
Vueの「データを聴く」原則を解説
-
[解決済み】Node.js getaddrinfo ENOTFOUND
-
[解決済み】Node.js Error: Cannot find module express
-
nodejs unhandledPromiseRejectionWarning メッセージ
-
HTML5 LocalStorage ローカルストレージとセッションストレージの使用法
-
JavaScriptのgetElementById()メソッド入門
-
jq は html ページとデータを動的に分割する。
-
[解決済み] Javascriptのファイル全体を「(function(){ ... })()」のような無名関数で囲むのは何のためでしょうか?