sea.js同期マジック

しばらく前にも書いてみたかったCMD彼らが理解しやすくするために、テキストモジュールの仕様。今日はほとんど、答えを知っている私にいくつかのインスピレーションを与えたことを見ました。

同期文言がブロックされていませんか?

上の最初のsea.js古典的なモジュールの文言:

// 定义一个模块
define(function(require, exports, module) {
  // 加载jquery模块
  var $ = require('jquery');
  // 直接使用模块里的方法
  $('#header').hide();
});

論理的にモジュールをロードし、その必要性であるjquery.js使用するためにロードは、非同期プロセスであるべきであり、それは同期の形式で書くことができ、なぜ?これは、どのような黒の技術ですか?

私たちの「カンニング」に少しの魔法と原作者ユー・ボー兄。Lubo大きな神はほとんど知っている、ここで直接共有の下、素晴らしい解釈を与えました:

同期書かれた説明sea.js

つまり、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をクリックします。

    ボタンロードモジュールBをクリックします。

概要

けれどもAMDCMDアイデア2いくつかの違いがありますが、大物のためのコールをプレイし、優れたモジュラーアプローチとみなすことができます!

リンクを開始

おすすめ

転載: www.cnblogs.com/wenbinjiang/p/11412132.html