Js造轮子,基础篇

Posted 我思固我在

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Js造轮子,基础篇相关的知识,希望对你有一定的参考价值。

  在js中,只要不是在函数内部声明的函数都是全局变量了,如果代码量大的情况全局变量的污染是非常可怕的,所以需要造轮子声明自己的变量和自己的全局变量和函数方法

一,声明一个对象

  先简单的声明一个对象tool={},这样就可以了,这样一个简单的全局对象就弄好了

二,声明方法和变量

  这时候定义方法和变量就可以这样了

 1 window.tool = {}
 2 window.tool.cip = localStorage.cip;
 3 
 4 //url
 5 tool.urlHeader = ‘http://192.168.1.56:9092/‘;
 6 
 7 tool.urlHeader2 = ‘http://192.168.1.239:9095/‘;
 8 
 9 tool.keyDownEnter = function (text, clickBtn) {
10     $(text).on("keydown", function(e) {
11         if(e.keyCode == 13) {
12             $(clickBtn).click();
13         }
14     })
15 }

  这样定义出来的方法和都不是全局的哦,不会在随手打代码的时候引用出来,这样可以有效的防止全局变量的污染

三,目前我封装的一些有用的方法和实例

  

//获取uri中的data
tool.getQueryString = function (name) {
	var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
	var r = window.location.search.substr(1).match(reg);
	if(r != null) return unescape(r[2]);
	return null;
}

//获取回车键并单击按钮
tool.keyDownEnter = function (text, clickBtn) {
	$(text).on("keydown", function(e) {
		if(e.keyCode == 13) {
			$(clickBtn).click();
		}
	})
}
//判断值是否在数组中存在过
tool.arrayIndexOf=function(arr,sel){
	for (var f1 in arr) {
		if (arr[f1].indexOf(sel) > -1) {
			return true;
		}
	}
	return false;
}
//封装的一个简单实用的ajax
tool.Ajax = function(type, url, funcS, header, data, async,beforeSend) {
	tool.setInfo();
	if(type == ‘get‘)
		$.ajax({
			type: "get",
			dataType: "json",
			contentType: ‘application/json‘,
			url: url,
			headers: header == null ? tool.headers : header,
			success: funcS,
			error: function(data) {
				console.log(data);
				console.log(localStorage.us)
			},
			beforeSend:beforeSend,
			async: async == null ? true : async
		});
	else
		$.ajax({
			type: "post",
			dataType: "json",
			contentType: ‘application/json‘,
			url: url,
			data: data,
			beforeSend:beforeSend,
			headers: header == null ? tool.headers : header,
			success: funcS,
			error: function(data) {
				console.log(data)
				console.log(localStorage.us)
			},
			async: async == null ? true : async
		});
}
//用min和max产生随机数,round是取整
tool.getRandom=function(min,max,round){
	if(round){
		return Math.round(Math.random()*(max-min))+min;
	}else{
		return (Math.random()*(max-min))+min;
	}
}
//让class=double的文本框只允许输入数字和小数点
$(".double").bind("keypress", function(event) {  
    	var event= event || window.event;  
    	var getValue = $(this).val();  
	    //控制第一个不能输入小数点"."  
	    if (getValue.length == 0 && event.which == 46) {
	        event.preventDefault();  
	        return;  
	    }
	    //控制只能输入一个小数点"."  
	    if (getValue.indexOf(‘.‘) != -1 && event.which == 46) {  
	        event.preventDefault();
	        return;  
	    }
    	//控制只能输入的值  
    	if (event.which && (event.which < 48 || event.which > 57) && event.which != 8 && event.which != 46) {  
        	event.preventDefault();  
         	return;  
        }  
    })
    //失去焦点是触发  
    $(".double").bind("blur", function(event) {  
	    var value = $(this).val(), reg = /\.$/;  
	    if (reg.test(value)) {  
	    value = value.replace(reg, "");  
	    $(this).val(value);
	    
	    }  
	})
//让class=number的文本框只能输入数字
    $(".number").keypress(function(event) { 
            var keyCode = event.which; 
            if (keyCode >= 48 && keyCode <=57) 
                return true; 
            else 
                return false; 
        }).focus(function() { 
            this.style.imeMode=‘disabled‘;            
	});

  

以上是关于Js造轮子,基础篇的主要内容,如果未能解决你的问题,请参考以下文章

造轮子ArrayList

javascript基础修炼(12)——手把手教你造一个简易的require.js

新增用 React.js+Egg.js 造轮子 全栈开发旅游电商应用

造轮子-tab组件(上)

mksz452 - 用 React.js+Egg.js 造轮子 全栈开发旅游电商应用

好课资源共享:452 用 React.js+Egg.js 造轮子 全栈开发旅游电商应用