JavaScriptはこれらのモジュールを取得していませんが、私たちは即興を続けています。
したがって、モジュールの別の実装が
定義者として
生まれました 。
モジュラーシステムがない場合のこのモジュラーシステムの主なアイデア。 アプリケーションのソースコードは、それらの間の依存関係を持つモジュールに便利に分解され、モジュールについて何も知らない1つの自己完結型ファイルにアセンブルされます。
アイデアをよく理解するために、猫の例の下で単純なものから複雑なものまで。
オンラインストアの抽象的な製品ページ
index.htmlご覧ください。
<html> <head> <meta charset="utf-8"/> <title> -</title> <script src="jquery.js"></script> <script src="https://rawgithub.com/tenorok/definer/master/definer.js"></script> <script src="modules/cart.js"></script> <script src="modules/list.js"></script> </head> <body> <ul class="list"> <li class="item"> <span class="name"></span>, <span class="price">250</span> </li> <li class="item"> <span class="name"></span>, <span class="price">100</span> </li> <li class="item"> <span class="name"></span>, <span class="price">300</span> </li> </ul> </body> </html>
jQueryを使用して、モジュールのDOMおよびデファイナーを操作します。
商品を追加し、追加された商品の総コストを取得できるオンラインストアバスケットを実装する
Cartモジュール：
definer('Cart', function() { function Cart() { this.list = []; } Cart.prototype = { add: function(target) { var item = $(target); this.list.push({ name: item.find('.name').text(), price: +item.find('.price').text() }); }, sum: function() { return this.list.reduce(function(sum, item) { return sum + item.price; }, 0); } }; return Cart; });
訪問者とディレクトリとの対話を実装する
Cart依存
listモジュール：
definer('list', function(Cart) { var iCart = new Cart(); $(function() { $('.item').on('click', function(e) { iCart.add(e.currentTarget); console.log(iCart.sum()); }); }); });
結果は、製品をクリックして、追加された製品の合計値をコンソールで確認できるページです。 しかし、同時に、機能を2つの独立したモジュールに分割しました。
この例では、モジュールに移動できるグローバル変数がまだあります。これはjQueryです。
既存のモジュールの前に
modules/clean.jsます：
definer.clean('$');
これで、
$変数はグローバルコンテキストにありません。
console.log($);
モジュールでjQueryを引き続き使用するには、依存関係を追加します。
definer('Cart', function($) { ... }); definer('list', function($, Cart) { ... });
組立
これですべての準備が整い、ソースを1つのファイルに収集できます。
モジュールビルダーをインストールします。
npm install definer
modulesディレクトリからすべてのモジュールを
index.jsファイルに収集します。
./node_modules/.bin/definer -d modules/ index.js
これで、
index.html jQueryとアセンブルされたファイルのみを含めるだけで十分です。
<script src="jquery.js"></script> <script src="index.js"></script>
単調な定義でビルドする
開発を容易にするために、
うなり声のプラグインがあり
ます 。 監視を設定してモジュールファイルを変更し、アセンブリを自動的に実行できます。
助成に必要なすべてをインストールします。
npm install grunt grunt-cli grunt-contrib-watch grunt-definer
Gruntfile.jsファイルをプロジェクトルートに追加します。
module.exports = function(grunt) { grunt.initConfig({ watch: { scripts: { files: ['modules/*.js'], tasks: ['definer:all'] }, }, definer: { all: { target: 'index.js', directory: 'modules/' } } }); grunt.loadNpmTasks('grunt-contrib-watch'); grunt.loadNpmTasks('grunt-definer'); };
監視を開始します。
./node_modules/.bin/grunt watch
これで、アセンブリがバックグラウンドで自動的に実行され、モジュールファイルを変更し、ブラウザーでページを更新して結果を確認できます。
サードパーティのファイルを作成する
これで、jQueryとコンパイル済みモジュールの2つのファイルがページに接続されました。 jQueryをアセンブリに追加して、1つのファイルのみをページに添付できます。
これを行うには、
cleanオプションをgruntターゲットに追加します。
definer: { all: { target: 'index.js', directory: 'modules/', clean: { $: 'jquery.js' } } }
これで、
index.htmlには、アセンブルされたファイルを1つだけ含めるだけで十分です。
<script src="index.js"></script>
Jsdoc
収集されたファイルに関する情報を含むJSDocを作成することができます。
これを行うには、
jsdocオプションをgruntターゲットに追加します。
jsdoc: { "file": " -", "copyright": "2014 Artem Kurbatov, tenorok.ru", "license": "MIT license", "version": "package.json", "date": true }
コレクターが同じ名前のフィールドの値を受け取るJSONファイルへの相対パスを示すことができます。
package.jsonファイルをプロジェクトのルートに配置します。
{ "version": "0.1.0" }
次のJSDocは、アセンブルされたファイルのモジュールの前に表示されます。
合計
Definerが役立ちます：
- 依存関係によってアプリケーション全体をモジュールに分割します
- グローバル変数を取り除く
- gruntプラグインを使用して、すべてのスクリプトを1つのファイルに収集します
定義者と
grunt-definerのドキュメントは、githubにあります。