jsのモジュール化

common.js
モジュール化の過程を参考にする
モジュール化はどんな問題がありますか?

モジュールのコードをどのように安全に包装しますか?(モジュール外のコードを汚染しない)

どのように唯一のモジュールを識別しますか?

モジュールのAPIをいかに優雅に暴き出すか?(グローバル変数を追加できません)

は、依存するモジュールをどのように使いやすいですか?これらの問題をめぐって、jsモジュール化は苦しくて紆余曲折する道を始めました.

2009年、nodejsはcomon.jsの発展を促しました.
1、Common JS定義のモジュールは、{モジュール参照}{モジュール定義(export)}{モジュール識別(module)}require()に分けて外部モジュールを導入する.exportオブジェクトは、現在のモジュールの方法または変数を導出するために使用され、唯一の出口です.moduleオブジェクトはモジュール自体を表します.
規範

モジュールの識別に準拠すべき規則(表記規則)

は、グローバル関数requireを定義し、着信モジュール識別によって他のモジュールを導入し、実行の結果、すなわち他のモジュールから漏れたAPI

を実行する.

フレキシブル関数によって導入されたモジュールにも依存が含まれている場合、これらの依存性は順次負荷される

.

モジュールの導入に失敗した場合、require関数は異常

を報告すべきである.

モジュールは、変数exportsを通じて、暴落したAPIに憧れています.exportsは一つの対象しかなく、暴落したAPIはこの対象となる属性が必要です.

//math.js exports.add = function() { var sum = 0, i = 0, args = arguments, l = args.length; while (i < l) { sum += args[i++]; } return sum; };//increment.js var add = require('math').add; exports.increment = function(val) { return add(val, 1); };//program.js var inc = require('increment').increment; var a = 1; inc(a); // 2サービスは先端に向かってAMD/RequireJsの立ち上がりと妥協に進出します.
AMDの思想はその名の通り、必要なモジュールを非同期的にロードし、その後、コールバック関数で主論理を実行します.これはまさに私達がブラウザの端で開発した習慣的な方式で、その作者は自らAMD規格に合ったrequirejsを実現しました.AMD/RequireJsは急速に多くの開発者に受け入れられました.AMD仕様には以下の内容が含まれています.

はグローバル関数defineでモジュールを定義します.使い方は:define(id?dependencies?factory)です.

idはモジュール標識で、Common JS Module Identifers規格に従います.

dependenciesは依存するモジュール配列であり、factoryでは着信型参加の1つが

に対応する必要がある.

dependenciesの値に「require」、「export」または「module」があれば、comonjsにおける実現と一致する

.

dependenciesが省略して書かないと、デフォルトは「require」、「export」、「module」、factoryもデフォルトでrequire、exports、module

に伝えられます.

factoryが関数である場合、モジュールのAPI漏れの方法は3つあります.returnの任意のタイプのデータ、exports.xxx=xxx、module.exports=xxx

factoryが対象であれば、そのオブジェクトはモジュールの戻り値

である./a.js define(function(){ console.log('a.js '); return { hello: function(){ console.log('hello, a.js'); } } });//b.js define(function(){ console.log('b.js '); return { hello: function(){ console.log('hello, b.js'); } } });//main.js require(['a', 'b'], function(a, b){ console.log('main.js '); a.hello(); $('#b').click(function(){ b.hello(); }); })