时间:2021-05-25
本文实例为大家分享了js静态资源文件请求的处理,供大家参考,具体内容如下
html文件
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="index.css" type='text/css' charset='utf-8'></head><body> <div class='box' id='box'></div> <script charset='utf-8' src='index.js'></script></body></html>css文件
*{ margin:0; padding:0;}html,body{ font-size:14px; color:#000;}.box{ margin:50px auto; width:300px; height:300px; background:#e3bd83; border:10px solid #e0f2be;}JS文件
var box = document.getElementById('box');box.onclick = function(){ this.style.background = "red"}server文件
var http = require('http'), fs = require('fs'), url = require('url');//创建一个服务var server1 = http.createServer(function(req,res){ //解析客户端请求地址中的文件的目录名称以及传递给当前服务器的数据内容 var urlObj = url.parse(req.url,true), pathname = urlObj["pathname"], query = urlObj["query"]; //简写 try catch捕获异常 防止请求资源文件不存在 我们不加try catch服务会终止。这样不好,所以我们添加try catch捕获异常 //处理静态资源文件的请求(HTML/CSS/JS...) ->前端路由 var reg = /\.(HTML|JS|CSS|JSON|TXT|ICO)/i; if(reg.test(pathname)){ //获取请求文件的后缀名 var suffix = reg.exec(pathname)[1].toUpperCase(); //根据请求文件的后缀名获取到当前文件的MIME类型 var suffixMIME = "text/plain";//TXT文本对应的 switch(suffix){ case "HTML": suffixMIME = "text/html"; break; case "CSS": suffixMIME = "text/css"; break; case "JS": suffixMIME = "text/javascript"; break; case "JSON": suffixMIME = "application/json"; break; case "ICO": suffixMIME = "application/octet-stream"; break; } try{ //按照指定的目录读取文件中的内容或者代码(读取出来的内容都是字符串格式的) var conFile = fs.readFileSync("."+pathname,"utf-8"); //重写响应头信息:告诉客户端的浏览器我返回的内容是什么样的MIME类型,指定返回的内容的格式是utf-8,避免出现乱码 res.writeHead(200,{'content-type':suffixMIME+';charset=utf-8'}) //服务端向客户端返回的内容也是字符串 res.end(conFile) }catch(e){ res.writeHead(404,{'content-type':'text/plain;charset=utf-8'}); res.end("request file is not found") } } // try{ // var con = fs.readFileSync("."+pathname,"utf-8"); // res.end(con); // }catch(e){ // res.end("request file is not find") // } // if(pathname==="/index.html"){ // var con = fs.readFileSync("./index.html","utf-8"); // res.end(con); // return; // } // if(pathname==="/index.css"){ // con = fs.readFileSync("./index.css","utf-8"); // res.end(con); // return; // } // if(pathname==="/index.js"){ // con = fs.readFileSync("./index.js","utf-8"); // res.end(con); // return; // }})//为当前的这个服务配置端口server1.listen(80,function(){ console.log("server is success,listening on 80");})以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
本文实例讲述了javascript实现动态导入js与css等静态资源文件的方法。分享给大家供大家参考。具体实现方法如下:/***动态导入静态资源文件js/css
Android读取资源文件实例详解本文主要介绍Android读取资源文件,直接从assets读取,从Raw文件中读取,InputStream转String。以下
什么文件适合用CDN加载CDN主要适用于一些静态资源文件的加载,比如javascript文件、css样式文件、字体、图片、视频等其他资源文件。这些文件我们往往放
详解C#编程获取资源文件中图片的方法本文主要介绍C#编程获取资源文件中图片的方法,涉及C#针对项目中资源文件操作的相关技巧,以供借鉴参考。具体内容如下:例子:u
1.静态加载CSS,图片资源文件在页面渲染过程中可以并行下载,不会阻塞。在IE8,FF下,也可以支持JS的并行下载。尽管页面的JS下载加速了,但是JS对页面渲染