집 >웹 프론트엔드 >JS 튜토리얼 >JavaScript는 파일 요청에 대한 정적 리소스를 처리합니다.

JavaScript는 파일 요청에 대한 정적 리소스를 처리합니다.

巴扎黑원래의: 2017-08-13 14:50:011860검색

이 글은 주로 js 정적 리소스 파일 요청 처리를 자세히 소개합니다. 관심 있는 친구들이 참고할 수 있습니다.

이 글의 예는 모든 사람을 위해 js 정적 리소스 파일 요청 처리를 공유합니다. 참고로 구체적인 내용은 다음과 같습니다

html file

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
 <link rel="stylesheet" href="index.css" type=&#39;text/css&#39; charset=&#39;utf-8&#39;>
</head>
<body>
 <p class=&#39;box&#39; id=&#39;box&#39;></p>
 <script charset=&#39;utf-8&#39; src=&#39;index.js&#39;></script>
</body>
</html>

css file

*{
 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 file

var box = document.getElementById(&#39;box&#39;);
box.onclick = function(){
 this.style.background = "red"
}

server file

var http = require(&#39;http&#39;),
 fs = require(&#39;fs&#39;),
 url = require(&#39;url&#39;);
//创建一个服务
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,{&#39;content-type&#39;:suffixMIME+&#39;;charset=utf-8&#39;})
   //服务端向客户端返回的内容也是字符串
   res.end(conFile)
  }catch(e){
   res.writeHead(404,{&#39;content-type&#39;:&#39;text/plain;charset=utf-8&#39;});
   res.end("request file is not found")
  }
  
  /*
   MIME类型:
   每一种资源文件都有自己的标识类型，例如:HTML文件的MIME
   类型是"text/html".css文件的MIME类型是"text/css"

   浏览器会按照代码的MIME类型进行渲染
  */
 }
 // 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");
})

위 내용은 JavaScript는 파일 요청에 대한 정적 리소스를 처리합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명：

이전 기사：JavaScript 이미지 업로드 코드 캡슐화다음 기사：JavaScript 이미지 업로드 코드 캡슐화