背景:我正在为我的办公室定制开发一个框架,让我可以创建多个模块来做不同的事情(比如 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 这个方法,或者是否有人已经有了一些东西,我想看看它,这样我就可以比较我所做的事情,也许可以借鉴其他方法,或者干脆完全替换我的方法。
任何援助将不胜感激。