しばらく前にも書いてみたかったCMD
彼らが理解しやすくするために、テキストモジュールの仕様。今日はほとんど、答えを知っている私にいくつかのインスピレーションを与えたことを見ました。
同期文言がブロックされていませんか?
上の最初のsea.js
古典的なモジュールの文言:
// 定义一个模块
define(function(require, exports, module) {
// 加载jquery模块
var $ = require('jquery');
// 直接使用模块里的方法
$('#header').hide();
});
論理的にモジュールをロードし、その必要性であるjquery.js
使用するためにロードは、非同期プロセスであるべきであり、それは同期の形式で書くことができ、なぜ?これは、どのような黒の技術ですか?
私たちの「カンニング」に少しの魔法と原作者ユー・ボー兄。Lubo大きな神はほとんど知っている、ここで直接共有の下、素晴らしい解釈を与えました:
つまり、require.js
そしてsea.js
モジュール依存モジュールを実行する前にあらかじめロードされず、以下でrequire.js
より「遅延ロード」に見えるが、コードモジュールは、異なるタイミングを行う依存します。require.js
実行が読み込まれ、sea.js
使用の実装。
実際には、コードから見ることができた文言require.js
依存関係モジュールは結果の後にロードされ、実際のコールバック関数のパラメータを渡すようにされています。
reuiqre.js
執筆:
// 加载完jquery.js后,得到的执行结果$作为参数传入了回调函数
define(['jquery'], function($) {
$('#header').hide();
});
sea.js
執筆:
// 预加载了jquery.js
define(function(require, exports, module) {
// 执行jquery.js模块,并得到结果赋值给$
var $ = require('jquery');
// 调用jquery.js模块提供的方法
$('#header').hide();
});
この観点から、双方のパフォーマンスのと大差はありません。ほとんどは、ページのレンダリングの速度に影響を与えるので、当然のことながら、プリロードされているとして、それは、リソースの読み込み速度ですので、時間のかかるリソースモジュールをロードするためには、同じ(同じネットワーク条件)です。
実行タイミングモジュールのコードは今(あなたもブロックしない限り)パフォーマンスに影響を与える、とされていないjs
などのエンジンをV8
十分に強いエンジン、無加圧。
レイジーロードがある場合は?
レイジーローディングが存在しています。私は言ったsea.js
、と比べてこれ以上require.js
多くの「遅延ロード」となっていますが、タイミングモジュールのロードが同じであるの両方を意味しない、事前にロードされているが、それは遅延ロードすることはできませんと言うことではありません。
モジュールがある場合に、ページがレンダリングされるときに、例えば、私は使用をロードする必要はありませんが、(そのようなドットボタンなど)の相互作用のいくつかの種類を行う際に、唯一の「遅延ロード」この時間を使用するためにロードする必要がある役割の現れです。以下にするrequire.js
例を与えます:
require.config({
baseUrl: './assets/js/',
paths: {
modulea: 'module-a',
moduleb: 'module-b'
}
})
require(["modulea"], function(modulea) {
var btnNode = document.querySelector('#btn-load');
var node1 = document.createElement('span');
node1.innerText = '模块A已经加载!'
btnNode.insertAdjacentElement('beforebegin', node1)
btnNode.addEventListener('click', function() {
require(["moduleb"], function(moduleb) {
var node2 = document.createElement('span');
node2.innerText = '模块B已经加载!'
btnNode.insertAdjacentElement('afterend', node2)
});
})
});
モジュールは、ページがレンダリングされている場合にのみロードされます
ボタンロードモジュールBをクリックします。
概要
けれどもAMD
とCMD
アイデア2いくつかの違いがありますが、大物のためのコールをプレイし、優れたモジュラーアプローチとみなすことができます!