zoukankan      html  css  js  c++  java
  • 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';            
    	});
    

      

  • 相关阅读:
    根据百度API获得经纬度,然后根据经纬度在获得城市信息
    Map实现java缓存机制的简单实例
    JMS学习(七)-ActiveMQ消息的持久存储方式之KahaDB存储
    JMS学习(六)-ActiveMQ的高可用性实现
    排列与组合的一些定理
    带权图的最短路径算法(Dijkstra)实现
    JMS学习(六)--提高非持久订阅者的可靠性 以及 订阅恢复策略
    JMS学习(五)--ActiveMQ中的消息的持久化和非持久化 以及 持久订阅者 和 非持久订阅者之间的区别与联系
    分布式系统理论之两阶段提交协议
    自定义栈的实现及使用两个栈模拟队列
  • 原文地址:https://www.cnblogs.com/myzsy/p/6859829.html
Copyright © 2011-2022 走看看