背景: 私は自分のオフィス用に、さまざまなことを行う複数のモジュール (eGroupware など) を作成できるフレームワークをカスタム開発しています。私が遭遇した、他の人が遭遇したと確信している問題は、特定の Javascript ライブラリ、特に jQuery、特に CSS を使用する場合、すべてのモジュールがすべてのライブラリをロードする必要があるわけではないということです。動的な方法
- 標準 XML ファイルで CSS または JS ライブラリを定義する (完了)
- 特定の場所に保存されている XML ファイルを読み込む関数を作成する (完了)
- モジュールに必要な各スクリプトの関数を呼び出す配列変数を列挙する
- この方法を改良する
私が定義した XML ファイルは次のようになります。
<?xml version="1.0" encoding="ISO-8859-1"?>
<library>
<name>jQuery UI</name>
<description>jQuery UI is a curated set of user interface interactions, effects, widgets, and themes built on top of the jQuery JavaScript Library. Whether you're building highly interactive web applications or you just need to add a date picker to a form control, jQuery UI is the perfect choice.</description>
<url>http://www.jqueryui.com</url>
<version>1.10.0</version>
<js_location>/wayward/_javascript/_jquery/_ui/{version}</js_location>
<css_location>/wayward/_javascript/_jquery/_ui/{version}</css_location>
<js_files>
<file>{js_location}/ui/jquery-ui.js</file>
</js_files>
<css_files>
<file>{css_location}/themes/redmond/jquery-ui.css</file>
</css_files>
</library>
呼び出されたときにこのファイルを解析する PHP 関数は次のとおりです。
function ww_Script_Loader
(
$_ww_js_library = ''
)
{
$xmlfile = file_get_contents( "http://" . $_SERVER[ "SERVER_NAME" ] . WW_JS_XML_DIR . "/$_ww_js_library.xml" );
$ob = simplexml_load_string( $xmlfile );
$json = json_encode( $ob );
$myArray = json_decode( $json, true );
$myPatterns[ 0 ] = "/{version}/";
$myPatterns[ 1 ] = "/{js_location}/";
$myPatterns[ 2 ] = "/{css_location}/";
$myReplacements[ 0 ] = $myArray[ "version" ];
$myReplacements[ 1 ] = preg_replace( $myPatterns[ 0 ], $myArray[ "version" ], $myArray[ "js_location" ] );
$myReplacements[ 2 ] = preg_replace( $myPatterns[ 0 ], $myArray[ "version" ], $myArray[ "css_location" ] );
if( !is_array( $myArray[ "js_files" ][ "file" ] ) )
{
foreach( $myArray[ "js_files" ] as $thisJSKey => $thisJSVal )
{
if( strlen( trim( $thisJSVal ) ) > 0 )
{
$thisJSFile = preg_replace( $myPatterns, $myReplacements, $thisJSVal );
$thisJSLine = "<script src='$thisJSFile' />\n";
}
}
}
else
{
foreach( $myArray[ "js_files" ][ "file" ] as $thisJSKey => $thisJSVal )
{
if( strlen( trim( $thisJSVal ) ) > 0 )
{
$thisJSFile = preg_replace( $myPatterns, $myReplacements, $thisJSVal );
$thisJSLine .= "<script src='$thisJSFile' />\n";
}
}
}
if( !is_array( $myArray[ "css_files" ][ "file" ] ) )
{
foreach( $myArray[ "css_files" ] as $thisCSSKey => $thisCSSVal )
{
if( strlen( trim( $thisCSSVal ) ) > 0 )
{
$thisCSSFile = preg_replace( $myPatterns, $myReplacements, $thisCSSVal );
$thisCSSLine = "<link rel='stylesheet' type='text/css' href='$thisCSSFile' media='screen' />\n";
}
}
}
else
{
foreach( $myArray[ "css_files" ][ "file" ] as $thisCSSKey => $thisCSSVal )
{
if( strlen( trim( $thisCSSVal ) ) > 0 )
{
$thisCSSFile = preg_replace( $myPatterns, $myReplacements, $thisCSSVal );
$thisCSSLine .= "<link rel='stylesheet' type='text/css' href='$thisCSSFile' media='screen' />\n";
}
}
}
return array( "js" => $thisJSLine, "css" => $thisCSSLine );
}
定数 WW_JS_XML_DIR は、関数が定義される前に別の場所で定義されているため、これをハードコーディングできます。単純に、すべての XML ファイル定義の場所を示します。
ホームページが読み込まれると、必要なモジュールを呼び出すための一種のブートストラップとして機能し、呼び出す XML ファイルも定義します。上記の関数は、テンプレートの前に呼び出されるため、関数の結果の出力を次のように連結できます。変数をテンプレートに送ります:
$wwScriptContainer[] = ww_Script_Loader( "jquery" );
$wwScriptContainer[] = ww_Script_Loader( "jquery_ui" );
$wwScriptContainer[] = ww_Script_Loader( "bubblepopup" );
foreach( $wwScriptContainer as $tmpScriptKey => $tmpScriptVal )
{
$thisScriptBlock .= $tmpScriptVal[ "js" ];
$thisCSSBlock .= $tmpScriptVal[ "css" ];
}
Javascript と CSS を動的にロードするために私が作成したメソッドは非常に機能的です。意図した目的のために必要なことを実行しますが、このメソッドを本当に REFINE する方法があるかどうか、または誰かが既に何かを持っているかどうか疑問に思っています。 、私が行ったことを比較し、他の方法から借りるか、単に私の方法を完全に置き換えることができるように、それを見たいと思います。
任意の支援をいただければ幸いです。