Мне очень нравится, как Wordpress работает с его функциями enqueue и localize , поэтому после этой модели я написал простой класс для размещения скриптов на странице в соответствии с зависимостей сценария и получения дополнительных данных для скрипта.
class mHeader {
private $scripts = array();
/**
* @param string $id unique script identifier
* @param string $src script src attribute
* @param array $deps an array of dependencies ( script identifiers ).
* @param array $data an array, data that will be json_encoded and available to the script.
*/
function enqueue_script( $id, $src, $deps = array(), $data = array() ) {
$this->scripts[$id] = array( 'src' => $src, 'deps' => $deps, 'data' => $data );
}
private function dependencies( $script ) {
if ( $script['deps'] ) {
return array_map( array( $this, 'dependencies' ), array_intersect_key( $this->scripts, array_flip( $script['deps'] ) ) );
}
}
private function _unset( $key, &$deps, &$out ) {
$out[$key] = $this->scripts[$key];
unset( $deps[$key] );
}
private function flattern( &$deps, &$out = array() ) {
foreach( $deps as $key => $value ) {
empty($value) ? $this->_unset( $key, $deps, $out ) : $this->flattern( $deps[$key], $out );
}
}
function print_scripts() {
if ( !$this->scripts ) return;
$deps = array_map( array( $this, 'dependencies' ), $this->scripts );
while ( $deps )
$this->flattern( $deps, $js );
foreach( $js as $key => $script ) {
$script['data'] && printf( "" . PHP_EOL, key( $script['data'] ), json_encode( current( $script['data'] ) ) );
echo "" . PHP_EOL;
}
}
}
Функция enqueue_script()
предназначена для добавления сценария, установки сума и зависимостей в других сценариях и дополнительных данных, необходимых для скрипт.
$header = new mHeader();
$header->enqueue_script( 'jquery-ui', '//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js', array( 'jquery' ) );
$header->enqueue_script( 'jquery', '//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js' );
$header->enqueue_script( 'custom-script', '//custom-script.min.js', array( 'jquery-ui' ), array( 'mydata' => array( 'value' => 20 ) ) );
$header->print_scripts();
И, метод print_scripts()
вышеприведенного примера отправит этот вывод:
Независимо от того, что скрипт jquery находится в очереди после 'jquery-ui', он печатается ранее, потому что он определен в 'jquery-ui', который зависит от `jquery '. Дополнительные данные для «custom-script» находятся внутри нового блока сценариев и размещаются перед ним, он содержит mydata
объект, который содержит дополнительные данные, теперь доступный для «пользовательского сценария».