脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → js静态资源文件请求的处理

详解js静态资源文件请求的处理

 更新时间：2017年08月01日 11:56:17   作者：diasa  
这篇文章主要为大家详细介绍了js静态资源文件请求的处理，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

本文实例为大家分享了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")
  }
  
  /*
   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");
})

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

  • JS的执行机制(EventLoop、宏任务和微任务)

    JS的执行机制(EventLoop、宏任务和微任务)

    这篇文章主要介绍了JS的执行机制(EventLoop、宏任务和微任务)，具有很好的参考价值，希望对大家有所帮助。
    2023-01-01
  • Openlayers实现扩散的动态点（水纹效果）

    Openlayers实现扩散的动态点（水纹效果）

    这篇文章主要为大家详细介绍了Openlayers实现扩散的动态点，水纹效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2020-08-08
  • JavaScript实现将Excel文件渲染在页面上

    JavaScript实现将Excel文件渲染在页面上

    这篇文章主要为大家详细介绍了如何使用Html和JavaScript实现将Excel文件渲染在页面上,文中的示例代码讲解详细,有需要的小伙伴可以参考下
    2024-12-12
  • 微信小程序实现顶部选项卡(swiper)

    微信小程序实现顶部选项卡(swiper)

    这篇文章主要为大家详细介绍了微信小程序实现顶部选项卡效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-08-08
  • Javascript Dom元素获取和添加详解

    Javascript Dom元素获取和添加详解

    这篇文章主要介绍了Javascript Dom元素获取和添加详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-09-09
  • 关于javascript原型的修改与重写(覆盖)差别详解

    关于javascript原型的修改与重写(覆盖)差别详解

    下面小编就为大家带来一篇关于javascript原型的修改与重写(覆盖)差别详解。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2016-08-08
  • ES6中的Javascript解构的实现

    ES6中的Javascript解构的实现

    这篇文章主要介绍了ES6中的Javascript解构的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2020-10-10
  • JavaScript之class继承_动力节点Java学院整理

    JavaScript之class继承_动力节点Java学院整理

    这篇文章主要介绍了JavaScript之class继承，新的关键字class从ES6开始正式被引入到JavaScript中。class的目的就是让定义类更简单，有兴趣的可以了解一下
    2017-07-07
  • JS实现电子时钟入门操作

    JS实现电子时钟入门操作

    这篇文章主要为大家详细介绍了JS实现电子时钟入门操作，实现带有表盘的时钟，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2022-06-06
  • JavaScript 防抖和节流遇见的奇怪问题及解决

    JavaScript 防抖和节流遇见的奇怪问题及解决

    这篇文章主要介绍了JavaScript 防抖和节流遇见的奇怪问题及解决，帮助大家更好的理解和使用JavaScript，感兴趣的朋友可以了解下
    2020-11-11

最新评论