タイトル通り。
★ 2016/11/01 : 微修正
■ index.php
メインとなるページです。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="content-language" content="ja">
<?php
include_once('./index/init_html.php') ;
?>
<title>動作確認用</title>
</head>
<body>
</body>
</html>
■ include_file_class.php
実際に html タグを作ってる処理です。
<?php
abstract class include_file_class
{
const CN_REP_STR = '%path%' ;
public function __construct()
{
/** コンストラクタ */
}
/**
* 外部ファイル読み込み処理：抽象メソッド
* @param $read_urls => 読み込むファイルの url を格納した配列
*/
protected abstract function include_file(array $read_urls) ;
/**
* 外部ファイル読み込み用 html タグ生成
* @param $read_urls => 読み込むファイルの url を格納した配列
* @param $rep_tag => html タグの形式
* @return $return_tags => 生成された html タグ
*/
protected function create_tag(array $read_urls, $rep_tag)
{
$return_tags = '' ;
foreach($read_urls AS $key => $val)
{
if(!empty($val) && is_file($val) !== false)
{
/** キャッシュ無効化 */
$val .= '?ver='.filemtime($val) ;
/** $rep_tag の該当箇所を置換する */
$return_tags .= str_replace(self::CN_REP_STR, $val, $rep_tag).PHP_EOL ;
}
}
return $return_tags ;
}
}
final class include_css extends include_file_class
{
/** css の読み込み */
const CN_REP_TAG = '<link rel="stylesheet" href="'.self::CN_REP_STR.'" />' ;
public function __construct()
{
parent::__construct() ;
}
/**
* css ファイル読み込みタグ生成
* @param $read_urls => 読み込む css の url を格納した配列
* @return => 生成された html タグ
* @override
*/
public function include_file(array $read_urls)
{
return $this->create_tag($read_urls, self::CN_REP_TAG) ;
}
}
final class include_js extends include_file_class
{
/** javascript の読み込み */
const CN_REP_TAG = '<script type="text/javascript" src="'.self::CN_REP_STR.'" charset="UTF-8"></script>' ;
public function __construct()
{
parent::__construct() ;
}
/**
* js ファイル読み込みタグ生成
* @param $read_urls => 読み込む js の url を格納した配列
* @return => 生成された html タグ
* @override
*/
public function include_file(array $read_urls)
{
return $this->create_tag($read_urls, self::CN_REP_TAG) ;
}
}
■ init_html.php
index.php から呼ばれて include_file_class.php を実際に読み込んでる処理です。
<?php
include_once('include_file_class.php') ;
$include_css = new include_css() ;
$include_js = new include_js() ;
/** 読み込むファイルもここで設定 */
$css_urls = [
'./css/common.css'
] ;
$js_urls = [
'./js/library/jquery/3.1.1/jquery.min.js'
, './js/self/common.js'
] ;
/** 出力 */
echo $include_css->include_file($css_urls) ;
echo $include_js->include_file($js_urls) ;
■ common.css
css 動作確認用。文字色を変えるだけの css かよ!!
@charset "UTF-8" ;
#font_red
{
color : #FF0000 ;
}
#font_blue
{
color : #0000FF ;
}
#font_green
{
color : #00FF00 ;
}
■ common.js
js 動作確認用。文字出すだけ。
$(function()
{
var body_append = '<div id="font_red">red</div>'
+ '<div id="font_blue">blue</div>'
+ '<div id="font_green">green</div>'
;
$('body').append(body_append) ;
}) ;
他に jquery (3.1.1) も読み込んでます。
実際に生成された結果は下の通りです(見やすく整形してます)。
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="content-language" content="ja">
<link rel="stylesheet" href="./css/common.css?ver=1477661698">
<script type="text/javascript" src="./js/library/jquery/3.1.1/jquery.min.js?ver=1477661698" charset="UTF-8"></script>
<script type="text/javascript" src="./js/self/common.js?ver=1477661698" charset="UTF-8"></script>
<title>動作確認用</title>
</head>
<body>
<div id="font_red">red</div>
<div id="font_blue">blue</div>
<div id="font_green">green</div>
</body>
</html>
普通に一つずつ読み込んだほうが楽ですね。。。
