Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
这篇文章主要为大家详细介绍了 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");
- })
来源: http://www.phperz.com/article/17/0823/343895.html