【JavaScript】分享一个我自己写的小工具类！

JavaScript小工具类 - Alpha

 

自从进入编程这个行业就一直在 cnblog 搜寻教程，解决各种各样的问题，非常感谢各路大神的帮助。现在终于开始写下自己的写码经验了。

这是 JavaScript 程序的小工具集合，其实也没啥内容。但是分享出来给大家，说不定能有一点点帮助。

闲话不多说，先来一个 JavaScript 类的写法和使用心得：

首先是，定义类

function Alpha(){

　　// 构造函数
　　console.log('alpha:hello');

　　// 定义类属性
　　this.name = '';
　　this.age = 0;

　　// 定义类方法
　　this.laugh = function (){
　　console.log('haha');}

}

是的，当你实例化此类时，会逐行执行类里面的代码，所以“构造函数”可以像上面那样写在函数头部就好了！

并且与 PHP 一样，可以在定义类属性时，赋予确定的默认值，如字符串，数字，常量等等，不能赋值变量。

然后，使用类

var myalpha = new alpha;

myalpha.laugh();

非常明了，实例化，然后直接使用就好了！

那么接下来呢，我会把小工具集里的实用方法一一罗列出来

返回包含数组中所有键名的一个新数组（类 PHP 底层函数 array_keys），这个函数在处理 URL 上的参数时，可能用到。

// 参数：关联数组
// 返回：新的索引数组，键值为传入数组的键名

this.array_keys = function (arr) {
var RET = Array(), i = 0;
for (var key in arr) {RET[i] = key;i++;}
return RET;}

判断是否数组（类 PHP 底层函数 is_array）

// 参数：任意值
// 返回：传入值为数组时（true），否则（false）
this.isarray = function (arg) {
if (arg === null) return false;
if (typeof (arg) == "object") return true;
return false;}

判断变量是否为空（类 PHP 底层函数 empty）

// 参数：任意值
// 返回：传入值存在、非空字符串或者非零（false ），否则（ true）。
this.empty = function (arg) {
if (arg === null) return true;
var argtype = typeof (arg);
switch (argtype) {
case "undefined":return true;
case "object":if (arg.length == 0) return true;return false;
case "function":return false;
case "boolean":if (arg === false) return true;return false;
case "number":if (arg == 0) return true;return false;
case "string":if (arg.length == 0) return true;return false;
default:return false;}}

隐藏自己，这个方法挺有意思的，实现页面特效的时候挺经常用到的

// 参数：dom节点
this.hideself = function (node) {node.style.display = 'none';}

输入验证，是否合法域名格式

// 参数：字符串
// 返回：域名监测通过（true），否则（false）。
this.vali_domain = function (str) {
var regdomain = /^[\w-]+\.[\w]+$|^[\w-]+\.[\w-]+\.[\w]+$|^[\w-]+\.[\w-]+\.[\w-]+\.[\w]+$/;
if (regdomain.test(str)) return true;
return false;}

单击VS双击，某些时候用一下挺有创意的。

// 参数：参数一为单击回调函数，参数二为双击回调函数
this.lastclick = 0;
this.clickcall = function (singleclick, doubleclick) {
var clicktime = new Date().getTime();
if (this.lastclick == 0) {
this.lastclick = clicktime;
window.setTimeout(cc, 360);}
else { // 双击
if ((clicktime - this.lastclick) < 300) {
this.lastclick = 0;
doubleclick();}}
function cc() { // 单击
if (this.lastclick == 0) return false;
this.lastclick = 0;
singleclick();}}

假如你想轻易得到 URL 上的参数的话，用这个函数再好不过了！

// 返回：网页url参数（数组）
this.geturlarg = function () {
var urlarg = new Object();
var t_urlarg = document.URL.split('?');
if (empty(t_urlarg[1])) return null;
var tt_urlarg = t_urlarg[1].split('&');
for (var i = 0; !empty(tt_urlarg[i]); i++) {
    var ttt_urlarg = tt_urlarg[i].split('=');
    if (empty(ttt_urlarg[0])) continue;
    urlarg[ttt_urlarg[0]] = empty(ttt_urlarg[1]) ? null : ttt_urlarg[1];}
return urlarg;}

获取字符串中的数字

// 参数：字符串，如 adc21aa34a
// 返回：字符串中的第一组数字（21）
this.sel_num = function (str) {
var regnum = /\d+/;
var res = regnum.exec(str);
return res[0];}

计算2点间的距离

// 参数1：点1的x轴坐标
// 参数2：点1的y轴坐标
// 参数3：点2的x轴坐标
// 参数4：点2的y轴坐标
// 返回：两点之间的距离
this.cal_between = function (p1x, p1y, p2x, p2y) {return Math.sqrt(Math.pow(p1x - p2x, 2) + Math.pow(p1y - p2y, 2));}

计算区域的中心

// 参数1：区域 left 值
// 参数1：区域 top 值
// 参数1：区域 width 值
// 参数1：区域 height 值
// 返回：中心坐标（数组）
this.cal_center = function (l, t, w, h) {
var RES = new Object();
RES['x'] = l + w / 2;
RES['y'] = t + h / 2;
return RES;}

原生 JavaScript 的 ajax GET 请求

// 参数1：请求目标地址
// 参数2：请求目标响应时的回调函数
this.get = function (url,callback){
if(this.empty(url)){console.log('url is undefined');return;}
if(this.empty(callback)){console.log('callback is undefined');return;}
var xmlhttp;
if (window.XMLHttpRequest) xmlhttp=new XMLHttpRequest();
else xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
xmlhttp.onreadystatechange=function(){if(xmlhttp.readyState==4 && xmlhttp.status==200){callback(eval('(' + xmlhttp.responseText + ')'));}}
xmlhttp.open("GET",url,true);
xmlhttp.send();}

原生 JavaScript 的 ajax POST 请求

// 参数1：请求目标地址
// 参数2：请求目标响应时的回调函数
// 参数3：请求参数（字符串），如 'age=10&name=jake'
this.post = function (url,callback,arg){
if(this.empty(url)){console.log('url is undefined');return;}
if(this.empty(callback)){console.log('callback is undefined');return;}
var xmlhttp;
if (window.XMLHttpRequest) xmlhttp=new XMLHttpRequest();
else xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
xmlhttp.onreadystatechange=function(){if(xmlhttp.readyState==4 && xmlhttp.status==200){callback(eval('(' + xmlhttp.responseText + ')'));}}
xmlhttp.open("POST",url,true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
if(this.empty(arg)) xmlhttp.send();
else xmlhttp.send(arg);}

隐藏 body 内的元素，呈现“加载中”特效，使用此方法需要先加载 spin.js

this.hideNode = {};
this.loading = function(){
var spinmaxheight = window.screen.height;
var spinmaxwidth = window.screen.width;
var spintop = spinmaxheight/2;
var spinleft = spinmaxwidth/2;
if (spintop>100) spintop = 100;
var spinfooo = document.createElement('div');
spinfooo.id = 'spinfooo';
var spinfooop = document.createElement('div');
spinfooop.appendChild(spinfooo);
spinfooop.style.position = 'absolute';
spinfooop.style.top = spintop + 'px';
spinfooop.style.left = spinleft + 'px';
var opts = {
lines: 5,length: 12,width: 4,radius: 12,corners: 0.2,
rotate: 15,color: '#000',speed: 1.1,trail: 20,shadow: false,hwaccel: false,
className: 'spinner',zIndex: 2e9,top: 'auto',left: 'auto'};
for(var i=0,tmp;;){
tmp = document.body.children[i];
if (typeof(tmp) === 'undefined') break;
if (tmp.style.display == 'none') continue;
tmp.style.display = 'none';
this.hideNode[i++] = tmp;}
document.body.appendChild(spinfooop);
var spinner = new Spinner(opts).spin(spinfooo);}

呈现 body 内的元素，隐藏“加载中”特效，此方法与上一方法（loading）配合使用　　

this.loaded = function(){
for(var i=0;;i++){
if (typeof(this.hideNode[i]) === 'undefined') break;
this.hideNode[i].style.display = '';}
document.getElementById('spinfooo').style.display = 'none';}

其实呢，我是一个来自后端的“伪前端”，哈哈，写过一段时间功能型的前端代码，把这个小工具记录在此作为纪念吧！ 

转载于:https://www.cnblogs.com/myaliyun/p/6275363.html