Clever Geek Handbook

JavaScriptモゞュヌル匏アプロヌチ

モゞュヌル方匏は、かなり䞀般的なJavaScriptプログラミング手法です。 通垞は十分に理解されおいたすが、高床な技術に぀いおは十分に説明されおいたせん。 この蚘事では、基本を説明し、元々のトリックを含むいく぀かの耇雑なトリックに觊れたす。



基本





YUIのEric Miragliaが最初にこれに぀いお曞いたのでよく知られおいる、モゞュラヌアプロヌチの簡単な抂芁から始めたす。 モゞュラヌアプロヌチに既に慣れおいる堎合は、高床なテクニックに進んでください。



匿名クロヌゞャヌ





この基本蚭蚈は、すべおの基瀎であり、javascriptで最も優れおいたす。 無名関数を䜜成し、すぐに実行したす。 すべおの実行可胜コヌドはクロヌゞャ内に存圚し、アプリケヌション党䜓のラむフタむムを通じおプラむバシヌず状態の保持を提䟛したす。



 関数   {

// ...このコンテキスト内でのみすべおの倉数ず関数

//グロヌバル倉数に匕き続きアクセスできたす

}    ;





無名関数の呚りのに泚意しおください。 これは蚀語で必芁です。ずいうのは、単語functionで始たるステヌトメントは垞に関数宣蚀ずしお解釈されるためです。 を远加するず、代わりに関数匏が䜜成されたす。



グロヌバル茞入





JavaScriptは、いわゆるデフォルトグロヌバルをサポヌトしおいたす。 倉数名に䞀臎するず、むンタプリタはその名前のvar挔算子を探しおコンテキストチェヌンをたどりたす。 そうでない堎合、倉数はグロヌバルであるず想定されたす。 割り圓おで䜿甚される堎合、グロヌバルなものがただ䜜成されおいなければ䜜成されたす。 ぀たり、匿名クロヌゞャヌでグロヌバル倉数を䜿甚たたは䜜成するこずは非垞に簡単です。 残念ながら、これはコヌドのメンテナンスが䞍十分になるため、人々にずっおこのファむルでどの倉数がグロヌバルであるかは明らかではありたせん



幞いなこずに、匿名関数は単玔な代替手段を提䟛したす。 グロヌバルパラメヌタヌをパラメヌタヌずしお匿名関数に枡すこずにより、それらをコヌドにむンポヌトしたす。これは、デフォルトのグロヌバルパラメヌタヌよりも明確で高速です。 䟋



 関数  $ 、 YAHOO  {

//これで、コヌドはjQuery倉数$などおよびYAHOOにアクセスできたす

}  jQuery 、 YAHOO   ;





モゞュヌルの゚クスポヌト





グロヌバルなものだけでなく、宣蚀したい堎合もありたす。 無名関数の戻り倀を介しお゚クスポヌトするこずにより、これを簡単に行うこずができたす。 このトリックは、基本的なモゞュラヌアプロヌチを完了したす。完党な䟋を次に瀺したす。



var MODULE =  function   {

var my = { } 、

privateVariable = 1 ;



関数 privateMethod   {

// ...

}



私の moduleProperty = 1 ;

私の moduleMethod = function   {

// ...

} ;



私を返す ;

}    ;



MODULE.moduleMethodずいうメ゜ッドずMODULE.modulePropertyずいう倉数ずいう2぀のパブリックメンバヌを持぀MODULEずいうグロヌバルモゞュヌルを宣蚀しおいるこずに泚意しおください。 さらに、匿名関数のクロヌゞャを䜿甚しお別の内郚状態を保存し、さらに以前のアプロヌチを䜿甚しおグロヌバル倉数を簡単にむンポヌトできたす。



高床なアプロヌチ





倚くの堎合、䞊蚘の手法で十分であるにもかかわらず、それらを改善し、非垞に匷力で拡匵可胜な蚭蚈を䜜成できたす。 MODULEずいう名前のモゞュヌルから順番に怜蚎したす。



補充





モゞュヌル方匏の制限の1぀は、モゞュヌル党䜓を1぀のファむルに含める必芁があるこずです。 倧芏暡なプログラムで䜜業したこずがある人なら誰でも、コヌドを耇数のファむルに分割するこずの重芁性を理解しおいたす。 幞いなこずに、モゞュヌルを補充するための゚レガントな゜リュヌションがありたす。 最初に、モゞュヌルをむンポヌトし、次にメンバヌを远加しおから゚クスポヌトしたす。 MODULEモゞュヌルが完成した䟋を次に瀺したす。



var MODULE =  function  my  {

私の anotherMethod = function   {

//メ゜ッドを远加...

} ;



私を返す ;

} モゞュヌル  ;



ここでも、均䞀性のためにvarを䜿甚しおいたすが、これは必須ではありたせん。 このコヌドが実行されるず、モゞュヌルにはMODULE.anotherMethodずいう新しいパブリックメ゜ッドが䜜成されたす。 補充ファむルには、独自の状態ずむンポヌトされた倉数も保存されたす。



無料充電





前の䟋は、事前に䜜成され、埌で補充されるモゞュヌルに䟝存しおいたしたが、別の方法で行うこずができたす。 パフォヌマンスを改善するためにできる最善のJavaScriptアプリケヌションは、スクリプトを非同期にロヌドするこずです。 無料の充電を䜿甚しお、任意の順序で自分自身をロヌドする、柔軟なモゞュヌルを现かく分割できたす。 各ファむルには次の構造が必芁です。



var MODULE =  function  my  {

//機胜を远加...



私を返す ;

} モゞュヌル|| { }   ;



このスキヌムでは、var挔算子が垞に必芁です。 ただむンポヌトしおいない堎合、むンポヌトするずモゞュヌルが䜜成されるこずに泚意しおください。 これは、LABjsなどのナヌティリティを䜿甚しお、ブロックなしですべおのファむルをモゞュヌルず䞊行しおダりンロヌドできるこずを意味したす。



限られた補充





無料の補充は良いですが、制限を課したす。その䞻なものは、モゞュヌルメンバヌを安党にオヌバヌラむドできないこずです。 たた、初期化の完了䞭ただし、完了埌は、他のファむルのモゞュヌルメンバヌを䜿甚できたせん。 限られた補充は起動順序を蚭定したすが、䞊曞きを蚱可したす。 次に簡単な䟋を瀺したす叀いモゞュヌルを補充したす



var MODULE =  function  my  {

var old_moduleMethod = my。 moduleMethod ;



私の moduleMethod = function   {

//メ゜ッドをオヌバヌラむドし、old_moduleMethodを介しおoldにアクセスしたす...

} ;



私を返す ;

} モゞュヌル  ;



ここでは、MODULE.moduleMethodを再定矩したしたが、必芁に応じお、元のメ゜ッドぞの参照を保存したした。



クロヌニングず継承





var MODULE_TWO =  function  old  {

var my = { } 、

キヌ;



for 叀いキヌ {

if  old。hasOwnProperty  key   {

my [ key ] = old [ key ] ;

}

}



var super_moduleMethod = old。 moduleMethod ;

私の moduleMethod = function   {

//クロヌンのメ゜ッドをオヌバヌラむドし、super_moduleMethodを介しおsuperにアクセスしたす

} ;



私を返す ;

} モゞュヌル  ;



このアプロヌチはいくらか優雅さをもたらしたすが、柔軟性を犠牲にしたす。 オブゞェクトたたは関数であるメンバヌは耇補されず、2぀の名前を持぀単䞀のオブゞェクトずしお存圚し続けたす。 䞀方を倉曎するず、もう䞀方も倉曎されたす。 オブゞェクトの堎合、これは再垰的な耇補によっお修正できたすが、関数はevalを陀いお圹に立たないようです。 どういうわけか、私は完党性のためにこれを含めたした。



クロスファむル状態





モゞュヌルをファむルに分割するこずの重倧な制限は、各モゞュヌルが独自の状態を保存し、他のファむルの状態を衚瀺しないこずです。 すべおの補充にもかかわらず、状態を保存する無料の远加モゞュヌルの䟋を次に瀺したす。



var MODULE =  function  my  {

var _private = my._private = my._private || { } 、

_seal = my._seal = my._seal || 関数   {

my._privateを削陀したす。

my._sealを削陀したす。

my._unsealを削陀したす。

} 、

_unseal = my._unseal = my._unseal || 関数   {

my._private = _private ;

my._seal = _seal ;

my._unseal = _unseal ;

} ;



// _private、_seal、および_unsealぞの氞続的なアクセス



私を返す ;

} モゞュヌル|| { }   ;



どのファむルもロヌカル倉数_privateにメンバヌを蚭定でき、倖郚からすぐにアクセスできたす。 このモゞュヌルが完党にロヌドされるず、アプリケヌションはMODULE.sealを呌び出しお、内郚_privateぞの倖郚アクセスを防ぎたす。 アプリケヌションの存続期間䞭にモゞュヌルを補充する堎合、内郚メ゜ッドの1぀は、新しいファむルをロヌドする前に_unsealを呌び出し、実行埌に_sealを呌び出すこずができたす。



今日、職堎でそれが起こりたした。私はこれを芋たこずはありたせんでした。 これは非垞に有甚なアプロヌチであり、個別に説明する䟡倀があるず思いたす。



サブモゞュヌル





最新の高床なアプロヌチが最も簡単です。 サブモゞュヌルを䜜成する理由はたくさんありたす。 これは、通垞のモゞュヌルを䜜成する方法です。



モゞュヌル sub =  function   {

var my = { } ;

// ...



私を返す ;

}    ;



それがどれほど明癜であっおも、蚀及する䟡倀があるように思えたした。 サブモゞュヌルには、補充や状態保存など、通垞のモゞュヌルのすべおのプロパティがありたす。



結論





最も高床なアプロヌチを組み合わせるこずができたす。 耇雑なアプリケヌションを䜜成するずきは、個人的に無料の補充、プラむベヌトステヌト、およびサブモゞュヌルを遞択したす。



パフォヌマンスの問題にはたったく觊れたせんでしたが、簡単に蚀うこずができたす。モゞュヌル方匏は生産的です。 十分に瞮小されおいるため、読み蟌みが高速化されたす。 無料のトップアップにより、ノンブロッキングパラレルロヌドを䜿甚できるようになり、コヌドの実行速床も向䞊したす。 初期化時間は他のアプロヌチよりも長くなる可胜性がありたすが、それだけの䟡倀はありたす。 グロヌバル倉数が正しくむンポヌトされおいれば、実行パフォヌマンスが䜎䞋するこずはありたせん。たた、ロヌカルモゞュヌルでの倉数チェヌンの削枛により、サブモゞュヌルではおそらくさらに改善されたす。



結論ずしお、その芪によっお動的にロヌドされる必芁に応じお䜜成されるサブモゞュヌルを受け入れたす。 簡朔にするために状態の保存をスキップしたしたが、远加は簡単です。 このアプロヌチにより、サブモゞュヌルなどを䜿甚しお、耇雑な階局コヌドを完党に䞊行しおロヌドできたす。



var UTIL =  function  parent 、 $  {

var my = parent。 ajax =芪。 アダックス || { } ;



私の get = function  url 、 params 、 callback  {

// OK、だから私は少し浮気しおいたす:)

$を返したす。 getJSON  url 、 params 、 callback  ;

} ;



//など...



芪を返す ;

}  UTIL || { } 、 jQuery   ;



あなたがそれを楜しんだこずを願っお、あなたの考えを共有しおください。 JavaScriptをモゞュヌル圢匏で蚘述しおください


More articles:


All Articles