把JS与CSS写在同一个文件里的书写方法


Posted in Javascript onJune 02, 2007

我们经常把多个CSS或者多个JS并成一个,以节省请求,但是这样最少还是要两个。在MSDN的Blog上看到原来也是可以把JS和CSS并在一个文件里,那怎样做呢?利用注释,先看一下这代码。 
<!-- /*
window.onload=function(){
document.getElementById("test2").innerHTML="传说中滴JS测试者。如果你看到我,那<strong>JS</strong>也生效了";
}
<!-- */ 
<!-- #test1,#test2{border:3px #000 solid;padding:5px;color:#123456;background-color:#ccc;} strong{color:red;}

CSS处理时会忽视掉<!--,这时JS部分只是CSS的注释/* js */,而JS处理时把<!--转成// 也就是JS的单行注释,单行注释会把后面的/*和*/干掉,同时也干掉了CSS,不废话了,看演示的例子。

在网上运行时还要通过程序输出个“*/*”的头,不然MIME不对有的浏览器不干活。PHP的是这样:

<?header('Content-type: */*');?>

理论上在服务器上指定某种后缀的MIME是“*/*”应用也行得通,不过我没有试。把JS跟CSS写在同一个文件特别适合第三方调用的那种,虽然文件大了一点,但能少了一半的请求数,帅帅滴

当然,这样的格式写起来一定很不爽,不过配合程序来读原来已经的,并处理一下就可以,这样就可以保持原来文件也方便维护,输出文件又省点请求,如果想的话,处理处理缓存,跟静态文件差不多了。这里有份C#的,据说是官方滴,我的是PHP的,因为还没写缓存的机制就不拿出来丢人了,其实原理也很简单,会编程的三两下就搞定。

再其实,我是想找把多份CSS合并的方式,合成一个不难,可以是处理好各模块化的分离同时能在客户端缓存及方便程序调用才是难的,CSS又不像JS可以在客户端异步调用,谁有好的方式介绍一下给我。

传说中的测试
传说中的测试者一号。如果你看到我有边框跟颜色,那就是说CSS生效了。

传说中滴JS测试者。如果你看到我,那JS也生效了

使用同一份文件:jscss.php  
<link type="text/css" rel="stylesheet" href="jscss.php" /><script type="text/javascript" src="jscss.php"></script>jscss.php的内容  
<?header('Content-type: */*');?>  
<!-- /*  
window.onload=function(){  
    document.getElementById("test2").innerHTML="传说中滴JS测试者。如果你看到我,那<strong>JS</strong>也生效了";  
}  
<!-- */   
<!-- #test1,#test2{border:3px #000 solid;padding:5px;color:#123456;background-color:#ccc;} strong{color:red;}  
Copyright © 2006-2007 aoao , Some Rights Reserved . 
Javascript 相关文章推荐
javascript hashtable 修正版 下载
Dec 30 Javascript
JavaScript取得鼠标绝对位置程序代码介绍
Sep 16 Javascript
Js 回车换行处理的办法及replace方法应用
Jan 24 Javascript
8个超实用的jQuery功能代码分享
Jan 08 Javascript
javascript解决小数的加减乘除精度丢失的方案
May 31 Javascript
vue解决弹出蒙层滑动穿透问题的方法
Sep 22 Javascript
微信小程序下拉框搜索功能的实现方法
Jul 31 Javascript
vue-cli基础配置及webpack配置修改的完整步骤
Oct 20 Javascript
Vue v-for循环之@click点击事件获取元素示例
Nov 09 Javascript
在 Vue 中使用 JSX 及使用它的原因浅析
Feb 10 Javascript
redux处理异步action解决方案
Mar 22 Javascript
ES6使用新特性Proxy实现的数据绑定功能实例
May 11 Javascript
JavaScript 不只是脚本
May 30 #Javascript
JCalendar 日历控件 v1.0 beta[兼容IE&amp;Firefox] 有文档和例子
May 30 #Javascript
[原创]站长必须要知道的javascript广告代码
May 30 #Javascript
JSON 学习之完全手册 图文
May 29 #Javascript
Highslide.js是一款基于js实现的网页中图片展示插件
Mar 30 #Javascript
JScript的条件编译
May 29 #Javascript
javascript学习网址备忘
May 29 #Javascript
You might like
DC四月将推出百页特刊漫画 纪念小丑诞生80周年
2020/04/09 欧美动漫
利用中国天气预报接口实现简单天气预报
2014/01/20 PHP
ThinkPHP使用UTFWry地址库进行IP定位实例
2014/04/01 PHP
CI使用Tank Auth转移数据库导致密码用户错误的解决办法
2014/06/12 PHP
PHP实现中文圆形印章特效
2015/06/19 PHP
java微信开发之上传下载多媒体文件
2016/06/24 PHP
yii 2.0中表单小部件的使用方法示例
2017/05/23 PHP
js函数般调用正则
2008/04/08 Javascript
JavaScript 仿关机效果的图片层
2008/12/26 Javascript
Colortip基于jquery的信息提示框插件在IE6下面的显示问题修正方法
2010/12/06 Javascript
关于js获取radio和select的属性并控制的代码
2011/05/12 Javascript
jquery阻止冒泡事件使用模拟事件
2013/09/06 Javascript
javascript实现博客园页面右下角返回顶部按钮
2015/02/22 Javascript
PHP 数组current和next用法分享
2015/03/05 Javascript
js实现拖拽上传图片功能
2017/08/01 Javascript
JQ图片文件上传之前预览功能的简单实例(分享)
2017/11/12 Javascript
JavaScript函数apply()和call()用法与异同分析
2018/08/10 Javascript
vue通过指令(directives)实现点击空白处收起下拉框
2018/12/06 Javascript
详解关于Vuex的action传入多个参数的问题
2019/02/22 Javascript
sublime python3 输入换行不结束的方法
2018/04/19 Python
python批量查询、汉字去重处理CSV文件
2018/05/31 Python
Python利用heapq实现一个优先级队列的方法
2019/02/03 Python
PyQt5的PyQtGraph实践系列3之实时数据更新绘制图形
2019/05/13 Python
如何使用Python自动控制windows桌面
2019/07/11 Python
python logging模块书写日志以及日志分割详解
2019/07/22 Python
Python paramiko 模块浅谈与SSH主要功能模拟解析
2020/02/29 Python
德国亚马逊官方网站:Amazon.de
2020/11/15 全球购物
医生实习工作总结的自我评价
2013/09/27 职场文书
写好自荐信的几个要点
2013/12/26 职场文书
银行服务感言
2014/03/01 职场文书
指导教师评语
2014/04/26 职场文书
宣传工作经验材料
2014/06/02 职场文书
大学生简历求职信
2014/06/24 职场文书
pytorch加载预训练模型与自己模型不匹配的解决方案
2021/05/13 Python
P站美图推荐——变身女主角特辑
2022/03/20 日漫
mysql实现将字符串字段转为数字排序或比大小
2022/06/14 MySQL