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造轮子,基础篇的主要内容,如果未能解决你的问题,请参考以下文章
javascript基础修炼(12)——手把手教你造一个简易的require.js
新增用 React.js+Egg.js 造轮子 全栈开发旅游电商应用