引言

​ 虽然是做后台开发，但是很多时候自己也兼顾了前台，并不是所有的项目都是前后台分离开发，所以在开发期间自己也总结和学习了前端了一些小知识，在这里进行总结，以便自己温习。

NodeJS搭建静态资源服务器

对Node.js只有浅显的认识，但是有时候又要自己搭建静态服务器进行测试。搭建静态服务器需要以下几个步骤：

  1. 下载node.js，进入node.js官网下载http://nodejs.cn对应的版本。
  2. 安装node.js。
  3. 启动node.js，在命令行输入命令安装需要的模块，依次执行命令。
1
2
3
npm install express
npm install request
npm install http-server

简单的静态服务器

新建server.js，内容为

1
2
3
4
5
6
7
8
9
10
11
var express = require('express');
var http = require("http");
var request = require('request');
var app = express();
//启动端口为81
var port = process.env.PORT||81;
 
//静态资源存放的路径
 app.use(express.static('E:/SmallTools/StaticServer'));
http.createServer(app).listen(port);
console.log("服务启动成功");

启动server.js

通过http请求访问a.html页面

可以访问说明搭建成功！

带反向代理静态服务器搭建

新建server-kaow-school.js，内容为

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
var express = require('express');
var http = require("http");
var https = require('https');
var request = require('request');
var app = express();
//app.disable('x-powered-by');
var port = process.env.PORT||81;

app.use(express.static('E:/SmallTools/StaticServer'));


function proxy(app,route,remoteDomain){
    app.use(route,function(req,res){
      var url = remoteDomain+req.url;
      req.pipe(request(url)).pipe(res);
    });
}

//10.9.4.215:8380  测试服务器ip
proxy(app,'/163','http://www.163.com');
//proxy(app,'/MonitorService/','http://10.9.4.215:9192/MonitorService/');
 
http.createServer(app).listen(port);
console.log("服务器启动完成,请使用locahost:"+port+"访问");

启动server-kaow-school.js

通过http请求访问b.html页面

访问/163

可以访问说明带反向代理的静态服务器搭建成功！

前端知识点

## JS字符串截取空白trim()的原型实现 
1
2
3
String.prototype.trim = function(){
	return this.replace( /(^\s*)|(\s*$)/g , ''");
}

JS屏蔽键盘按键

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<body oncontextmenu="return false" onselectstart="return false" ondragstart="return false" onbeforecopy="return false" onmouseup=document.selection.empty() oncopy=document.selection.empty() onselect=document.selection.empty()></body> 
讲上面红色显示的插入到网页中就可以实现鼠标右击无效
禁止选择						onselectstart="return false"    			
禁止拖放						ondragstart="return false"			
禁止拷贝						ncopy=document.selection.empty()		
禁止保存(放在head里面)			<noscript><iframe src="*.htm"></iframe></noscript>
禁止粘贴						<input type=text onpaste="return false">
关闭输入法					<input style="ime-mode:disabled">
屏蔽鼠标右键					 function document.oncontextmenu(){event.returnValue=false;}
屏蔽F1帮助					function window.onhelp(){return false} 

屏蔽其他键
function document.onkeydown() { 
   if ((window.event.altKey)&& 
   	((window.event.keyCode==37)||	 //屏蔽 Alt+ 方向键 ← 
 	  (window.event.keyCode==39))) 		//屏蔽 Alt+ 方向键 → { 
   	 alert("不准你使用ALT+方向键前进或后退网页！"); 
 	   event.returnValue=false; 
   } 
    /* 注：这还不是真正地屏蔽 Alt+ 方向键， 
    因为 Alt+ 方向键弹出警告框时，按住 Alt 键不放， 
    用鼠标点掉警告框，这种屏蔽方法就失效了。以后若 
    有哪位高手有真正屏蔽 Alt 键的方法，请告知。*/ 
   if ((event.keyCode==8)   ||                 //屏蔽退格删除键 
 	  (event.keyCode==116)||                 //屏蔽 F5 刷新键 
 	  (event.ctrlKey && event.keyCode==82)){ //Ctrl + R 
 	  event.keyCode=0; 
    	event.returnValue=false; 
    } 
屏蔽F11    if (event.keyCode==122){event.keyCode=0;event.returnValue=false;}
屏蔽		 Ctrl+n    if (event.ctrlKey && event.keyCode==78) event.returnValue=false; 
   if (event.shiftKey && event.keyCode==121)   event.returnValue=false;   //屏蔽 shift+F10 
   if (window.event.srcElement.tagName == "A" && window.event.shiftKey)  
   window.event.returnValue = false;          //屏蔽 shift 加鼠标左键新开一网页 
   if ((window.event.altKey)&&(window.event.keyCode==115)){        //屏蔽Alt+F4 
   window.showModelessDialog("about:blank","","dialogWidth:1px;dialogheight:1px"); 
   		return false; 
   } 
}

屏蔽打印：
<style> 
@media print{ 
* {display:none} 
} 
</style>

HTML之间传值(通过解析url)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
var hrefInfo = getUrlVars(window.location.href); // 得到参数信息
	if (hrefInfo.logId && hrefInfo.logId != "undefined") {
		fillData(hrefInfo.logId);
		logId = hrefInfo.logId;
	} else {

	}

//解析url中的参数
function getUrlVars(hrf) {
	var vars = [], hash;
	var locationHref = !hrf ? window.location.href : hrf;
	locationHref = locationHref.replace(/#/g, "");
	if (locationHref.indexOf('%') > 0) {
		locationHref = unescape(locationHref);
	}
	var hashes = locationHref.slice(locationHref.indexOf('?') + 1).split('&');
	for ( var i = 0; i < hashes.length; i++) {
		hash = hashes[i].split('=');
		vars.push(hash[0]);
		vars[hash[0]] = hash[1];
	}
	return vars;
}

Jquery获取radio,checkbox

1
2
3
4
5
6
7
8
9
10
11
12
//获取radio的id                          
$("input[name='r']:checked").attr("id");  
//获得checkbox数目
$("input[name='c']:checked").length;
//遍历checkbox
$("input[name='c']:check").eq(i).attr("id");
//全选checkbox
$("input[name='c']:checkbox").attr("checked","true");
//获取选中的checkbox  
$("input[name='c']:checked").map(function(){return $(this).val();}).get().join(",");
//获取下拉框选中的id                     
$("#s option:selected").attr("value");

Jquery页面查询(数据量大时禁用)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 function search(){
        var nameSearch = $("#itemName").val(); //搜索框ID
        var tableObj = $("#itemList tr:gt(0)"); // table的ID
        if(nameSearch.trim()!=""){
             tableObj.hide();
             tableObj.each(function(){
             	var tr = $(this);
             	var fuHe = tr.children(":eq(0)").html();
             	if(fuHe.indexOf(nameSearch)==0){
                        tr.show();
                    }
                });
            }else{
                tableObj.show();
            } 
}

Jquery 回车(Enter)移到下一个输入框

1
2
3
4
5
6
7
8
9
10
11
12
13
14
$(document).ready(function () {
            $('input:text:first').focus();
            $('input:text').bind("keydown", function (e) {
                if (e.which == 13) {       //Enter key
                    e.preventDefault();     //to skip default behaviour of enter key
                    var nextinput = $('input:text')[$('input:text').index(this) + 1];
                    if (nextinput != undefined) {
                        nextinput.focus();
                    } else {
                        alert("没有下一个输入框！");
                    }
                }
            });
        });

JS,Jquery获取各种屏幕的宽度和高度

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
//Javascript:
网页可见区域宽： 	document.body.clientWidth
网页可见区域高： 	document.body.clientHeight
网页可见区域宽： 	document.body.offsetWidth (包括边线的宽)
网页可见区域高： 	document.body.offsetHeight (包括边线的高)
网页正文全文宽： 	document.body.scrollWidth
网页正文全文高： 	document.body.scrollHeight
网页被卷去的高： 	document.body.scrollTop
网页被卷去的左： 	document.body.scrollLeft
网页正文部分上： 	window.screenTop
网页正文部分左： 	window.screenLeft
屏幕分辨率的高： 	window.screen.height
屏幕分辨率的宽： 	window.screen.width
屏幕可用工作区高度： 	window.screen.availHeight
屏幕可用工作区宽度： 	window.screen.availWidth
 
//JQuery:
$(document).ready(function(){
	alert($(window).height()); //浏览器当前窗口可视区域高度
	alert($(document).height()); //浏览器当前窗口文档的高度
	alert($(document.body).height());//浏览器当前窗口文档body的高度
	alert($(document.body).outerHeight(true));//浏览器当前窗口文档body的总高度 包括border padding margin

	alert($(window).width()); //浏览器当前窗口可视区域宽度
	alert($(document).width());//浏览器当前窗口文档对象宽度
	alert($(document.body).width());//浏览器当前窗口文档body的宽度
	alert($(document.body).outerWidth(true));//浏览器当前窗口文档body的总宽度 包括border padding margin
})

Ajax,Get时请求异步缓存问题

用Ajax的Get方式请求同一个地址获取数据时，经常碰到回调函数成功执行，前台又有数据的情况，但是无法请求到后台获得最新的数据。原因是ajax存在异步缓存的问题。

因为ajax本身自带有实时异步请求的功能，而IE缓存导致请求时不会请求后台，会直接读取缓存的数据。

解决办法：

  1. ajax get请求时比较简单 只需将cache设置为false就好。
1
2
3
4
5
6
7
8
9
$.ajax({  
        type: 'get',	//get请求时  
        url: '....',  
        cache: false,	//不缓存  
        data: { },  
        success: function (result) {  
              //  
         }  
 });

  1. 访问就在URL后面加上 URL?+new Date();[总之就是使每次访问的URL字符串不一样的]

    设计WEB页面的时候 也应该遵守这个原则，因为请求同一个地址会直接读取缓存，所以可以在参数中加一个随机数数 让每次参数不一样就好。