这样组织CSS、JS等文件好不好

phoenixg · 发表于 2012-5-1 11:40:16

本帖最后由 phoenixg 于 2012-5-1 11:43 编辑

看见群里有人讨论CSS、JS文件的组织问题，我之前是这么解决的（见下），想听听大家的建议。
目录结构:（使用了modules）
assets/
  - css/
- global.css
- module_name1/
   - controller1_view1.css
   - controller1_view2.css
  - js/
  - jqueryplugins/
  - img/
  - icon/
application/
  - library/Asset.php 自定义一个assets处理类（代码见下）
  - modules/
- module_name1/
   - controllers/
   - views/
      - controller1_view1.php （代码见下）
      - controller2_view2.php
  - views/
   - wholesite/
   - header.php （代码见下）
   - footer.php （代码类似header.php）

PHP复制代码

<?php if (!defined('BASEPATH')) exit('No direct script access allowed');
/**
* 加载Asset的类
*
* 用于加载各自页面自己的css、js、icon等等
* 用于处理跟asset有关的操作
* @author
*
*/

class CI_Asset {

private $_CI;
private $_assets_url;

function __construct()
{
$this->_CI = & get_instance();
$this->_assets_url = $this->_CI->config->item('assets_url');

log_message('debug','CI Asset class loaded');
}

/**
* add asset
*
* eg. $this->asset->add_asset(basename(dirname(dirname(__FILE__))), 'controller_view', 'css')
*
* @param module name
* @param file name
* @param asset type
*/
public function add_asset($module_name, $file_name, $asset_type)
{
return $this->_assets_url . $asset_type . '/' . $module_name . '/' . $file_name . '.' . $asset_type;
}
}

复制代码

PHP复制代码

<?php
$data['header_asset'] = array(
'css' => array(
$this->asset->add_asset(basename(dirname(dirname(__FILE__))), 'controller1_view1', 'css')
)
);
$this->load->view('wholesite/header', $data);
?>

<?php
$data['footer_asset'] = array(
'js' => array(
$this->asset->add_asset(basename(dirname(dirname(__FILE__))), 'controller1_view1', 'js'),
)
);
$this->load->view('wholesite/footer', $data);
?>

复制代码

PHP复制代码

<html>
<head>
<title><?php echo isset($title)? $title : '';?></title>


<link rel="stylesheet" href="<?php echo $this->config->item('assets_url');?>css/global.css" type="text/css">
<link rel="stylesheet" href="<?php echo $this->config->item('assets_url');?>jqueryplugins/jbreadcrumb/Styles/BreadCrumb.css" type="text/css">


<?php if (isset($header_asset) && is_array($header_asset)):?>
<?php foreach ($header_asset as $type => $addrs):?>
<?php if($type == 'css'):?>
<?php foreach ($addrs as $addr):?>
<link rel="stylesheet" href="<?php echo $addr;?>" type="text/css">
<?php endforeach;?>
<?php elseif($type == 'js'):?>
<?php foreach ($addrs as $addr):?>
<script type="text/javascript" src="<?php echo $addr;?>"></script>
<?php endforeach;?>
<?php endif; ?>
<?php endforeach;?>
<?php endif;?>

</head>

复制代码

Hex · 发表于 2012-5-1 12:11:43

我觉得这样很不错。
我基本上也是这么弄的。

phoenixg · 发表于 2012-5-1 16:41:04

有两处我还不满意：
- 视图里循环加载css和js，由于区分了header加载和在footer加载，所以要在header.php和footer.php里分别写两遍几乎一样的循环遍历代码
- asset扩展类的add_asset方法有没有更好的改进方法，我觉得给的参数太多

		自动登录	找回密码
密码			入住 CI 中国社区

[讨论/交流] 这样组织CSS、JS等文件好不好