⊗jsPmMCLb 505 of 505 menu

JavaScriptにおけるクロージャーを使ったライブラリ

JavaScriptでは、他のプログラマーが利用するための関数の集合体であるライブラリがよく作成されます。

このようなライブラリは通常、クロージャーを介してモジュールにラップされます。これは、ライブラリを接続したときに外部の世界に現れる関数をできるだけ少なくするためです。

一般に、各ライブラリは外部の世界に作成する変数を、ライブラリの関数を持つオブジェクトという1つの変数だけに抑えようとします。このとき、ライブラリのコード内では、一部の関数は主要なものであり、一部は補助的なものです。明らかに、外部の世界には補助的な関数でエクスポートするオブジェクトを散らかさずに、必要な関数だけをエクスポートしたいのです。

例を見てみましょう。以下の関数のセットがあり、これをライブラリにしたいとします:

function square(num) { return num ** 2; } function cube(num) { return num ** 3; } function avg(arr) { return sum(arr, 1) / arr.length; } function digitsSum(num) { return sum(String(num).split('')); } // 補助関数 function sum(arr) { let res = 0; for (let elem of arr) { res += +elem; } return res; }

これらの関数をモジュールとして構成してみましょう:

;(function() { function square(num) { return num ** 2; } function cube(num) { return num ** 3; } function avg(arr) { return sum(arr, 1) / arr.length; } function digitsSum(num) { return sum(String(num).split('')); } // 補助関数 function sum(arr) { let res = 0; for (let elem of arr) { res += +elem; } return res; } })();

では、補助関数を除くすべての関数をエクスポートしましょう:

;(function() { function square(num) { return num ** 2; } function cube(num) { return num ** 3; } function avg(arr) { return sum(arr, 1) / arr.length; } function digitsSum(num) { return sum(String(num).split('')); } // 補助関数 function sum(arr) { let res = 0; for (let elem of arr) { res += +elem; } return res; } window.math = {square, cube, avg, digitsSum}; })();

HTMLページindex.htmlがあるとします:

<html> <head> <script> </script> </head> </html>

このページにライブラリを接続しましょう:

<html> <head> <script src="math.js"></script> <script> </script> </head> </html>

ライブラリの関数を使ってみましょう:

<html> <head> <script src="math.js"></script> <script> alert(math.avg([1, 2, 3]) + math.square()); </script> </head> </html>

次のコードが与えられています:

function avg1(arr) { return sum(arr, 1) / arr.length; } function avg2(arr) { return sum(arr, 2) / arr.length; } function avg3(arr) { return sum(arr, 3) / arr.length; } // 補助関数 function sum(arr, pow) { let res = 0; for (let elem of arr) { res += elem ** pow; } return res; }

このコードをモジュールとして構成してください。補助関数を除くすべての関数を外部にエクスポートしてください。

underscoreライブラリを学んでください。オリジナルライブラリの関数を5から10個繰り返して、独自の類似ライブラリを作成してください。

日本語
AfrikaansAzərbaycanБългарскиবাংলাБеларускаяČeštinaDanskDeutschΕλληνικάEnglishEspañolEestiSuomiFrançaisहिन्दीMagyarՀայերենIndonesiaItalianoქართულიҚазақ한국어КыргызчаLietuviųLatviešuМакедонскиMelayuမြန်မာNederlandsNorskPolskiPortuguêsRomânăРусскийසිංහලSlovenčinaSlovenščinaShqipСрпскиSrpskiSvenskaKiswahiliТоҷикӣไทยTürkmenTürkçeЎзбекOʻzbekTiếng Việt
当サイトでは、サイトの動作、分析、パーソナライゼーションのためにクッキーを使用しています。 データ処理はプライバシーポリシーに従って行われます。
すべて受け入れる 設定 拒否