快捷導(dǎo)航

詳解js靜態(tài)資源文件請(qǐng)求的處理

更新時(shí)間：2017年08月01日 11:56:17 作者：diasa

這篇文章主要為大家詳細(xì)介紹了js靜態(tài)資源文件請(qǐng)求的處理，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了js靜態(tài)資源文件請(qǐng)求的處理，供大家參考，具體內(nèi)容如下

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');
//創(chuàng)建一個(gè)服務(wù)
var server1 = http.createServer(function(req,res){
 //解析客戶端請(qǐng)求地址中的文件的目錄名稱以及傳遞給當(dāng)前服務(wù)器的數(shù)據(jù)內(nèi)容
 var urlObj = url.parse(req.url,true),
  pathname = urlObj["pathname"],
  query = urlObj["query"];
 //簡(jiǎn)寫 try catch捕獲異常 防止請(qǐng)求資源文件不存在 我們不加try catch服務(wù)會(huì)終止。這樣不好，所以我們添加try catch捕獲異常
 //處理靜態(tài)資源文件的請(qǐng)求(HTML/CSS/JS...) ->前端路由
 var reg = /\.(HTML|JS|CSS|JSON|TXT|ICO)/i;
 if(reg.test(pathname)){
  //獲取請(qǐng)求文件的后綴名
  var suffix = reg.exec(pathname)[1].toUpperCase();
  //根據(jù)請(qǐng)求文件的后綴名獲取到當(dāng)前文件的MIME類型
  var suffixMIME = "text/plain";//TXT文本對(duì)應(yīng)的
  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{
   //按照指定的目錄讀取文件中的內(nèi)容或者代碼（讀取出來的內(nèi)容都是字符串格式的）
   var conFile = fs.readFileSync("."+pathname,"utf-8");

   //重寫響應(yīng)頭信息:告訴客戶端的瀏覽器我返回的內(nèi)容是什么樣的MIME類型,指定返回的內(nèi)容的格式是utf-8,避免出現(xiàn)亂碼
   res.writeHead(200,{'content-type':suffixMIME+';charset=utf-8'})
   //服務(wù)端向客戶端返回的內(nèi)容也是字符串
   res.end(conFile)
  }catch(e){
   res.writeHead(404,{'content-type':'text/plain;charset=utf-8'});
   res.end("request file is not found")
  }
  
  /*
   MIME類型:
   每一種資源文件都有自己的標(biāo)識(shí)類型，例如:HTML文件的MIME
   類型是"text/html".css文件的MIME類型是"text/css"

   瀏覽器會(huì)按照代碼的MIME類型進(jìn)行渲染
  */
 }
 // 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;
 // }
})
//為當(dāng)前的這個(gè)服務(wù)配置端口
server1.listen(80,function(){
 console.log("server is success,listening on 80");
})

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: