JavaScript-如何整合管理项目中大量的CSS和JS文件?

JavaScript-如何整合管理项目中大量的CSS和JS文件?

灵芸 发布于 2017-07-14 字数 81 浏览 1253 回复 7

在开发中大型的web项目时,会有很多的CSS和JS文件,这些文件该如何整合管理呢?

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(7

瑾兮 2017-10-26 7 楼

可以综合的放到主目录(入口文件目录)下,然后,如果多了,综合的进行分类。

CSS和JS合并优化工具-minify

http://www.cnblogs.com/younggun/archive/2010/09/15/1827434.html

清晨说ぺ晚安 2017-10-21 6 楼

JS和CSS最好还是按需加载的比较好.对于常常一起被加载的文件,可以考虑合并成一个临时文件再输出.

最优方法为: 对于同一个来源服务器,只有一个JS和(或)只有一个CSS文件的请求.这样子对于减轻服务器负荷会有很大的好处.

当然,这个需要有合理的页面组织方式,缓存技术以及全面的项目管理才可以做得好. 比如需要有一个很好的MVC来支持.

甜柠檬 2017-09-09 5 楼

使用web标准对于创建易维护,可访问,易证明的站点是很关键,使用现代网络标准将内容(HTML),样式(CSS)和行为(JavaScript)分离。
换句话说,还是"MVC"(Model/View/Controller)设计模式起作用。
把HTML(实为DOM)当作module,CSS作为view,JavaScript作为controller。这种分离会使代码更高效,更利于维护,也使得很多管理优化的应用更为可行。

瑾兮 2017-08-28 4 楼

我觉得应该做成按需加载和按需合并
把通用的合并在global.css global.js里,其它的有需要用到的页面再单独加载,比如game.css game.js

夜无邪 2017-08-20 3 楼

css尽量用id选择符,少用class和子选择符。js有必要进行压缩。把整个网站的js分成单独的几个js类,少耦合,按需加载js文件中类里面的方法。

归属感 2017-07-29 2 楼

可以参考下淘宝的做法,大致就是开发时模块话,上线合并,合并的工作一种是通过编译成.min.css等,一种是有web服务器模块来合并,nginx有这个模块。这些工作由集成工具自动部署就最完美了。

http://docs.kissyui.com/docs/html/tutorials/tools/module-compiler/index.html

想挽留 2017-07-22 1 楼

可使用程序合并,此处提供一个PHP脚本

<?php

/**
* 类 WebPuts 用于向浏览器直接输出数据(例如下载文件)
* */
class WebPuts
{
/**
* 所有要输出的内容
*
* @var array
*/
protected $_output = array();

/**
* 输出文件名
*
* @var string
*/
protected $_output_filename;

/**
* 输出类型
*
* @var string
*/
protected $_mime_type;

/**
* 输出文件名的字符集
*
* @var string
*/
protected $_filename_charset = 'utf-8';

/**
* 允许客户端缓存输出的文件
*
* @var boolean
*/
protected $_enabled_client_cache = true;

/**
* 构造函数
*
* @param string $output_filename
* @param string $mime_type
* @param string $content
*/
function __construct($output_filename, $mime_type = 'application/octet-stream', $content = null)
{
$this->_output_filename = $output_filename;
$this->_mime_type = $mime_type;
if ($content) { $this->appendData($content); }
}

/**
* 添加一个要输出的文件
*
* @param string $filename
*
* @return WebPuts
*/
function addFile($filename)
{
$this->_output[] = array('file', $filename);
return $this;
}

/**
* 追加要输出的数据
*
* @param string $content
*
* @return WebPuts
*/
function appendData($content)
{
$this->_output[] = array('raw', $content);
return $this;
}

/**
* 设置输出文件名
*
* @param string $output_filename
*
* @return WebPuts
*/
function setOutputFilename($output_filename)
{
$this->_output_filename = $output_filename;
return $this;
}

/**
* 设置输出文件名的编码
*
* @param string $charset
*
* @return WebPuts
*/
function setOutputFilenameCharset($charset)
{
$this->_filename_charset = $charset;
return $this;
}

/**
* 设置是否允许客户端缓存输出的文件
*
* @param boolean $enabled
*
* @return WebPuts
*/
function enableClientCache($enabled = true)
{
$this->_enabled_client_cache = $enabled;
return $this;
}

/**
* 设置输出类型
*
* @param string $mime_type
*
* @return WebPuts
*/
function setMimeType($mime_type)
{
$this->_mime_type = $mime_type;
return $this;
}

/**
* 执行响应
*/
function execute()
{
header("Content-Type: {$this->_mime_type}");
$filename = '"' . htmlspecialchars($this->_output_filename) . '"';

$filesize = 0;
foreach ($this->_output as $output)
{
list($type, $data) = $output;
if ($type == 'file')
{
$filesize += filesize($data);
}
else
{
$filesize += strlen($data);
}
}

header("Content-Disposition: attachment; filename={$filename}; charset={$this->_filename_charset}");
if ($this->_enabled_client_cache)
{
header('Pragma: cache');
}
header('Cache-Control: public, must-revalidate, max-age=0');
header("Content-Length: {$filesize}");

foreach ($this->_output as $output) {
list($type, $data) = $output;
if ($type == 'file') {
readfile($data);
} else {
echo $data;
}
}
}
}