web-dev-qa-db-ja.com

com_ajaxを使用して別のモジュールをロードおよびアンロードする方法（アダプティブデザインの場合）

これは質問のフォローアップです モバイルデバイスのパフォーマンスを最適化するために、Joomla 3のデバイスまたはビューポートサイズに基づいてモジュールを無効にするにはどうすればよいですか？

Com_ajaxを使用してモジュールをロードおよびアンロードするにはどうすればよいですか？呼び出しは、純粋なjavascriptまたはjqueryのいずれかを使用して行うことができ、ビューポートサイズに基づいて行われます（そのためにmediacheck.jsを使用しています： https://github.com/sparkbox/mediaCheck ）。

この答えがどこに行くかに応じて、この種の動的ロードを可能にするためにコンポーネントを組み合わせることもできます（ブレークポイントを選択し、ロード/アンロードするモジュールを選択します）。

正当化：レスポンシブ/アダプティブ（フレーバーを選択する）は今日では不可欠であり、モバイルの負荷サイズを削減しています（良好な受信エリアでは、ここではブラジルの3Gの速度が遅い）。 10〜15kのjQuery/Javascriptを使用して20〜200kのモジュールのロードを回避できる場合（モジュールには画像を含めることができるため、かなり大きなサイズに達する可能性があります）、私はそれで十分です。画面の乱雑さを減らすことも、優れたモバイルデザインでは必須です。モジュールなしで設計しているため、これを「モバイルファースト」であると主張することもでき、画面サイズが許す限りロードします。

ajax
7
Jonathan Roza - Zott Online Ag

com_ajaxは、モジュールのデータがサポートされている場合（JSONベース）にのみ実際に使用されますが、他の機能もあります。モジュールを「単に」ロードする最も簡単な方法は、新しいテンプレートファイルを作成することです。これは、テンプレートディレクトリに「module.php」のようなものを作成することで実行できます。次に、このようなものを内部で使用します。

_<?php
$jinput = JFactory::getApplication()->input;
$module = $jinput->get('module_pos', 'default_value', 'get');
?>
<jdoc:include type="modules" name="<?php echo $module; ?>"/>
_

これにより、ページ内のモジュールのみが読み込まれるはずです。ajaxリクエストで_index.php?tmpl=module&module_pos=foo_のようなURLを使用すると、モジュールデータを「そのまま」取得できるはずです。これにより、module_posで指定された位置に割り当てられたすべてのモジュールがロードされます。

ただし、これには1つの問題、JavaScriptがあります。モジュールは、JoomlaのAPIを介してヘッドタグにJavaScriptを追加します。これに対抗するには、head.tagにあるもの、現在のページにまだないものを見つけるためにmodule.phpファイルにさらに追加する必要があり、実際には必要なものを見つけて追加します。このプロセスはかなり困難ですが、これを行うモジュールがわかっている場合は、モジュールに応じてこれを自動的に行うためにajax呼び出しにさらに追加することができます。

これは、モジュールを「ロード」するのに役立ちます。ajaxを介してロードした後、jqueryを使用してHTMLを必要なページに追加し、「アンロード」してDOMから削除します。

削除はjQuery(ROOT_ELEMENT_OF_MODULE).remove();で、削除はjQuery(PARENT_ELEMENT_TO_INSERT_MODULE).html(MODULE_HTML);で行うことができます。もちろん、実行できるバリエーションがありますが、それは簡単な説明です。

5
Jordan Ramstad