把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 相关文章推荐
json跟xml的对比分析
Jun 10 Javascript
javascript真的不难-回顾一下基础知识
Jan 15 Javascript
script的async属性以非阻塞的模式加载脚本
Jan 15 Javascript
模拟多级复选框效果的jquery代码
Aug 13 Javascript
Windows 系统下安装和部署Egret的开发环境
Jul 31 Javascript
node.js中的path.delimiter方法使用说明
Dec 09 Javascript
jQuery中is()方法用法实例
Jan 06 Javascript
小巧强大的jquery layer弹窗弹层插件
Dec 06 Javascript
AngularJS入门教程之过滤器详解
Aug 19 Javascript
vue父子组件的数据传递示例
Mar 07 Javascript
原JS实现banner图的常用功能
Jun 12 Javascript
用vue的双向绑定简单实现一个todo-list的示例代码
Aug 03 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
对Session和Cookie的区分与解释
2007/03/16 PHP
php获取地址栏信息的代码
2008/10/08 PHP
php防止伪造数据从地址栏URL提交的方法
2014/08/24 PHP
PHP实现四种基础排序算法的运行时间比较(推荐)
2016/08/11 PHP
PHP赋值的内部是如何跑的详解
2019/01/13 PHP
javascript实现文字图片上下滚动的具体实例
2013/06/28 Javascript
在javaScript中关于submit和button的区别介绍
2013/10/20 Javascript
Bootstrap轮播加上css3动画,炫酷到底!
2015/12/22 Javascript
js禁止浏览器页面后退功能的实例(推荐)
2017/09/01 Javascript
Vue 去除路径中的#号
2018/04/19 Javascript
nodejs更改项目端口号的方法
2018/05/13 NodeJs
vuejs实现标签选项卡动态更改css样式的方法
2018/05/31 Javascript
详解KOA2如何手写中间件(装饰器模式)
2018/10/11 Javascript
js实现上传图片并显示图片名称
2019/12/18 Javascript
微信小程序实现watch监听
2020/06/04 Javascript
vue-i18n实现中英文切换的方法
2020/07/06 Javascript
js实现右键弹出自定义菜单
2020/09/08 Javascript
[08:04]TI4西雅图DOTA2前线报道 海涛探访各路人马
2014/07/09 DOTA
[46:48]DOTA2上海特级锦标赛A组小组赛#2 Secret VS CDEC第三局
2016/02/25 DOTA
Python __setattr__、 __getattr__、 __delattr__、__call__用法示例
2015/03/06 Python
python实现多线程行情抓取工具的方法
2018/02/28 Python
python爬虫基础教程:requests库(二)代码实例
2019/04/09 Python
python的debug实用工具 pdb详解
2019/07/12 Python
Python修改列表值问题解决方案
2020/03/06 Python
python实现图像全景拼接
2020/03/27 Python
Python3爬虫中关于Ajax分析方法的总结
2020/07/10 Python
C++是不是类型安全的
2014/02/18 面试题
自荐信怎么写呢?
2013/12/09 职场文书
有趣的广告词
2014/03/18 职场文书
食品业务员岗位职责
2014/03/18 职场文书
成品仓管员岗位职责
2015/04/01 职场文书
2016年综治宣传月活动宣传标语口号
2016/03/16 职场文书
pytorch 带batch的tensor类型图像显示操作
2021/05/20 Python
Java常用函数式接口总结
2021/06/29 Java/Android
vue中利用mqtt服务端实现即时通讯的步骤记录
2021/07/01 Vue.js
spring boot中nativeQuery的用法
2021/07/26 Java/Android