javascript 常用方法的封裝，小編持續升級中...

?　　方法封裝（js原生）：

一、Object 類型

• MHQ.ajaxUtils 定義一個ajax工具類

  • ajax 定義一個ajax工具函數

  • get 方法

  • post 方法

• MHQ.elementUtils DOM元素工具類

  • replaceClassName 替換字符串，設置className屬性

  • getInnerText 獲取DOM元素內部文本的兼容方法

  • setInnerText 設置DOM元素內部文本的兼容方法

  • getNextElement 封裝了獲取元素的下一個兄弟元素的方法

  • getPreviousElement 封裝了獲取元素的上一個兄弟元素的方法

  • getFirstElement 封裝尋找某個元素的第一個子元素的方法

  • getLastElement 封裝尋找某個元素的最后一個子元素的方法

  • my$ 封裝了通過id獲取元素的方法

• MHQ.eventUntil事件處理類?封裝了事件處理的兼容方法

  • addSeveralEvent(element, eventName, fn); ?給一個元素同時多個事件

  • addEvent(element, eventName, fn); ?封裝添加事件的方法

  • removeEvent(element, eventName, fn); ?封裝移除事件的方法

• MHQ.getDateObj 獲取指定格式的日期

  • getDate 獲取指定格式的日期

  • transDateFormat 日期顯示格式化函數

• MHQ.getRandomObj 獲取n個隨機數 最終得到數組 object.getRandomArr 得到隨機數的數組

  • getRandomArr(count, min, max); 獲取n個隨機數的方法 最終得到數組

二、接口類: ??

• MHQ.Interface(interfaceName, methodsArr) 接口類

  • 　verifyInterface(instanceSets) 接口校驗方法

三、方法：

• MHQ.animate(element, json, fn); js 特效中的動畫函數封裝

• MHQ.getAttrValue(element,attr); 獲取屬性的兼容方法

• MHQ.getObjArrMax(arr) 得到諸如[{attr1:2,attr2:3}, {attr1:1,attr2:2}]數組中各對象的attr1屬性中最大的一個（僅僅根據第一個屬性的最大來返回一個對象）

• MHQ.getRandom(min, max); 獲取一個隨機整數 Math.random(); 中的參數可以是一個，考慮了參數是一個的情況

• MHQ.getColor(count); 獲取隨機的顏色數組

• MHQ.sortArr(arr) 數組冒泡排序

注： 每個函數的功能都在代碼中詳細說明。

/**
* Created by mhq on 2016/10/16.
*
* Object:
* MHQ.ajaxUtils 定義一個ajax工具類
* ajax 定義一個ajax工具函數
* get 方法
* post 方法
*
* MHQ.elementUtils DOM元素工具類
* replaceClassName 替換字符串，設置className屬性
* getInnerText 獲取DOM元素內部文本的兼容方法
* setInnerText 設置DOM元素內部文本的兼容方法
* getNextElement 封裝了獲取元素的下一個兄弟元素的方法
* getPreviousElement 封裝了獲取元素的上一個兄弟元素的方法
* getFirstElement 封裝尋找某個元素的第一個子元素的方法
* getLastElement 封裝尋找某個元素的最后一個子元素的方法
* my$ 封裝了通過id獲取元素的方法
*
* MHQ.eventUntil 事件處理對象，封裝了綁定事件的方法
* addSeveralEvent(element, eventName, fn); 給一個元素同時多個事件
* addEvent(element, eventName, fn); 封裝添加事件的方法
* removeEvent(element, eventName, fn); 封裝移除事件的方法
*
* MHQ.getDateObj 獲取指定格式的日期
* getDate 獲取指定格式的日期
* transDateFormat 日期顯示格式化函數
*
* MHQ.getRandomObj 獲取n個隨機數 最終得到數組 object.getRandomArr 得到隨機數的數組
* getRandomArr(count, min, max); 獲取n個隨機數的方法 最終得到數組
*
* Class:
* MHQ.Interface(interfaceName, methodsArr) 接口類
* verifyInterface(instanceSets) 接口校驗方法
*
* METHOD:
* MHQ.animate(element, json, fn); js 特效中的動畫函數封裝
* MHQ.getAttrValue(element,attr); 獲取屬性的兼容方法
* MHQ.getObjArrMax(arr) 得到諸如[{attr1:2,attr2:3}, {attr1:1,attr2:2}]數組中各對象的attr1屬性中最大的一個（比較勉強的方法）
* MHQ.getRandom(min, max); 獲取一個隨機整數 Math.random(); 中的參數可以是一個，考慮了參數是一個的情況
* MHQ.getColor(count); 獲取隨機的顏色數組
* MHQ.sortArr(arr) 數組冒泡排序
*/
// 命名空間
var MHQ = {};

/**
* OBJECT 定義一個ajax工具
* @type {{ajax, get, post}}
*/
MHQ.ajaxUtils = (function () {
return {
/**
* ajax 工具函數
* @param options 是一個對象
* @returns {*}
*/
ajax: function (options) {
/*如果你什么都沒傳呢？停止執行*/
if (!options || typeof options != 'object') return fasle;
/*如果傳了*/
var type = options.type || 'get';
var url = options.url || location.pathname;
/* false true "" false */
var async = options.async === false ? false : true;
/*需要傳遞的數據*/
var data = options.data || {};
/*需要data轉化成ajax傳遞數據的格式 {name:'',age:''} ===>>> name=gc&age=10 */
var dataStr = '';
for (key in data) {
dataStr += key + '=' + data[key] + '&';
}
/*str.slice(0,-1); 取到倒著數幾個字符*/
dataStr = dataStr && dataStr.slice(0, -1);
/*ajax編程*/
/*初始化*/
var xhr = new XMLHttpRequest();
/*設置請求行*/
/*如果是get請求 參數是不是該拼接在url后面*/
xhr.open(type, type == 'get' ? url + '?' + dataStr : url, async);
/*設置請求頭*/
if (type == 'post') {
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
}
/*設置請求內容*/
xhr.send(type == 'get' ? null : dataStr);
/*響應*/
xhr.onreadystatechange = function () {
/*首先確定通訊完全完成*/
if (xhr.readyState == 4) {
/*如果是成功的請求 status == 200 */
if (xhr.status == 200) {
/*成功*/
/*知道后臺想要返回什么數據類型 application/json;charset=utf-8*/
/*application/xml application/json text/html text/xml text/json text/css*/
var contentType = xhr.getResponseHeader('Content-Type');
var result = null;
if (contentType.indexOf('xml') > -1) {
/*返回什么數據類型xml*/
result = xhr.responseXML;
} else if (contentType.indexOf('json') > -1) {
/*返回什么數據類型json*/
var data = xhr.responseText;
result = data && JSON.parse(data);
} else {
result = xhr.responseText;
}
/*執行成功回調函數*/
options.success && options.success(result);

} else {
/*失敗*/
options.error && options.error({status: xhr.status, statusText: xhr.statusText});
}
}
}
},
/**
* get 方法
* @param options
*/
get: function (options) {
options.type = 'get';
this.ajax(options);
},
/**
* post 方法
* @param options
*/
post: function (options) {
options.type = 'post';
this.ajax(options);
}
}
})();

/**
* OBJECT 事件處理對象，封裝了綁定事件的方法
* @returns {{addSeveralEvent: addSeveralEvent, addEvent: addEvent, removeEvent: removeEvent}}
* @constructor
*/
MHQ.eventUntil = (function () {
return {
/**
* METHOD 給一個元素同時多個事件
* @param element 需要綁定事件的元素 Dom Object
* @param eventName 需要綁定的事件類型名稱 string
* @param fn 回調函數 function
*/
addSeveralEvent: function (element, eventName, fn) {
var oddEvent = element["on" + eventName];
if (oddEvent == null) {
element["on" + eventName] = fn;
} else {
element["on" + eventName] = function () {
oddEvent();
fn();
}
}
},
/**
* 封裝添加事件的方法
* @param element 需要綁定事件的元素 Dom Object
* @param eventName 需要綁定的事件類型名稱 string
* @param fn 回調函數 function
*/
addEvent: function (element, eventName, fn) {
if (element.addEventListener) { // 谷歌和火狐
element.addEventListener(eventName, fn, false);
} else if (element.attachEvent) { // IE8
element.attachEvent("on" + eventName, fn);
} else { // 所有瀏覽器
element["on" + eventName] = fn;
}
},
/**
* 移除事件的兼容方法
* @param element 需要綁定事件的元素 Dom Object
* @param eventName 需要綁定的事件類型名稱 string
* @param fn 回調函數 function
*/
removeEvent: function (element, eventName, fn) {
if (element.removeEventListener) { // 谷歌和火狐
element.removeEventListener(eventName, fn, false);
} else if (element.attachEvent) { // IE8
element.attachEvent("on" + eventName, fn);
} else { // 所有瀏覽器
element["on" + eventName] = null;
}
}
};
})();

/**
* OBJECT DOM元素工具類
* @type {{replaceClassName, getInnerText, setInnerText, getNextElement, getPreviousElement, getFirstElement, getLastElement, my$}}
*/
MHQ.elementUtils = (function () {
return {
/**
* 替換字符串，設置className屬性
* @param element 要替換class屬性的元素
* @param oldStr 替換前的類名
* @param newStr 新的類名
*/
replaceClassName: function (element, oldStr, newStr) {
element.className = element.className.replace(oldStr, newStr);
},

/**
* 獲取DOM元素內部文本的兼容方法
* @param element DOM元素
* @returns {*}
*/
getInnerText: function (element) {
if (typeof element.innerText === "string") {
return element.innerText;
} else {
return element.textContent;
}
},

/**
* 設置DOM元素內部文本的兼容方法
* @param element DOM元素
* @param content 要設置的內容
*/
setInnerText: function (element, content) {
if (typeof element.innerText === "string") {
element.innerText = content;
} else {
element.textContent = content;
}
},

/**
* 封裝了獲取元素的下一個兄弟元素的方法
* @param element DOM元素
* @returns {*}
*/
getNextElement: function (element) {
if (element.nextElementSibling) {
return element.nextElementSibling;
} else {
var next = element.nextSibling;
while (next && next.nodeType !== 1) {
next = next.nextSibling;
}
return next;
}
},

/**
* 封裝了獲取元素的上一個兄弟元素的方法
* @param element DOM元素
* @returns {*}
*/
getPreviousElement: function (element) {
if (element.previousElementSibling) {
return element.previousElementSibling;
} else {
var previous = element.previousSibling;
while (previous && 1 !== next.nodeType) {
previous = previous.previousSibling;
}
return previous;
}
},

/**
* 封裝尋找某個元素的第一個子元素的方法
* @param element DOM元素
* @returns {*}
*/
getFirstElement: function (element) {
// return element.children[0]; // 為了更嚴瑾用下面的方法
if (element.firstElementChild) {
return element.firstElementChild;
} else {
var first = element.firstChild;
while (first && 1 !== first.nodeType) {
first = first.nextSibling;
}
return first;
}
},

/**
* 封裝尋找某個元素的最后一個子元素的方法
* @param element DOM元素
* @returns {*}
*/
getLastElement: function (element) {
// return element.children[element.children.length-1]; // 為了更嚴瑾用下面的方法
if (element.lastElementChild) {
return element.lastElementChild;
} else {
var last = element.lastChild;
if (last && 1 !== last.nodeType) {
last = last.previousSibling;
}
return last;
}
},

/**
* 封裝了通過id獲取元素的方法
* @param id
* @returns {Element}
*/
my$: function (id) {
return document.getElementById(id);
}
}
})();

/**
* OBJECT 獲取指定格式的日期
* @type {{getDate, transDateFormat}}
*/
MHQ.getDateObj = (function () {
return {
/**
* 獲取指定格式的日期
* @param date
* @returns {string}
*/
// 封裝一個指定日期格式的獲取日期的函數
getDate: function (date) {
// 獲取年
var year = date.getFullYear();
// 獲取月
var mouth = date.getMonth() + 1;
// 獲取日
var day = date.getDate();
// 獲取小時
var hours = date.getHours();
// 獲取分鐘
var minute = date.getMinutes();
// 獲取秒
var second = date.getSeconds();
// 設置格式
mouth = this.transDateFormat(mouth);
day = this.transDateFormat(day);
hours = this.transDateFormat(hours);
minute = this.transDateFormat(minute);
second = this.transDateFormat(second);
return year + "年" + mouth + "月" + hours + "日" + " " + hours + ":" + minute + ":" + second;
},
/**
* 日期顯示格式化函數
* @param val 時分秒數字 0~59
* @returns {string}
*/
transDateFormat: function (val) {
return val < 10 ? "0" + val : val;
}
}
})();

/**
* OBJECT 獲取n個隨機數 最終得到數組 object.getRandomArr 得到隨機數的數組
* 說明：因為要傳遞參數，所以不能用立即執行函數
* @type {{getRandomArr}}
*/
MHQ.getRandomObj = (function () {
var arr = [];
return {
/**
* 獲取n個隨機數的方法 最終得到數組
* @param count 需要得到的隨機數組中隨機數的個數
* @param min 隨機數的最小值
* @param max 隨機數的最大值
* @returns {Array}
*/
getRandomArr: function (count, min, max) {
while (arr.length < count) {
var num = MHQ.getRandom(min, max);
if (arr.indexOf(num) === -1) {
arr.push(num);
}
}
return arr;
}
}
})();

/**
* METHOD js 特效中的動畫函數封裝
* @param element 要添加動畫的元素
* @param json 需要產生動畫的數據
* @param fn 回調函數
*/
MHQ.animate = function (element, json, fn) {
clearInterval(element.timeId);
element.timeId = setInterval(function () {
var flag = true;//假設都達到了目標
for (var attr in json) {
if (attr == "opacity") {//判斷屬性是不是opacity
var current = getAttrValue(element, attr) * 100;
//每次移動多少步
var target = json[attr] * 100;//直接賦值給一個變量,后面的代碼都不用改
var step = (target - current) / 10;//(目標-當前)/10
step = step > 0 ? Math.ceil(step) : Math.floor(step);
current = current + step;
element.style[attr] = current / 100;
} else if (attr == "zIndex") {//判斷屬性是不是zIndex
element.style[attr] = json[attr];
} else {//普通的屬性
//獲取當前的位置----getAttrValue(element,attr)獲取的是字符串類型
var current = parseInt(getAttrValue(element, attr)) || 0;
//每次移動多少步
var target = json[attr];//直接賦值給一個變量,后面的代碼都不用改
var step = (target - current) / 10;//(目標-當前)/10
step = step > 0 ? Math.ceil(step) : Math.floor(step);
current = current + step;
element.style[attr] = current + "px";
}
if (current != target) {
flag = false;//如果沒到目標結果就為false
}
}
if (flag) {//結果為true
clearInterval(element.timeId);
if (fn) {//如果用戶傳入了回調的函數
fn(); //就直接的調用,
}
}
}, 10);
};

/**
* CLASS 接口類：2個參數
* @param interfaceName 接口名稱
* @param methodsArr 接口抽象方法的方法名存放數組
* @constructor MHQ.Interface
*/
MHQ.Interface = function (interfaceName, methodsArr) {
// 判斷參數傳入的參數個數是否等于2
if (arguments.length !== 2) {
throw new Error("傳入的接口參數個數不正確");
}
this.interfaceName = interfaceName;
// 用一個空數組接收第二個參數數組
this.methods = [];
for (var i = 0; i < methodsArr.length; i++) {
// 判斷方法是否存在，方法名是否是"string"類型
if (typeof methodsArr[i] !== "string") {
throw new Error("接口方法名必須是string類型的");
}
this.methods.push(methodsArr[i]);
}
};

/**
* METHOD 獲取隨機的顏色數組
* @param count 需要獲取的顏色數目
* @returns {Array}
*/
MHQ.getColor = function (count) {
var colorSingle;
var colorArr = [];
var color = "#";
for (var i = 0; i < count; i++) {
for (var j = 0; j < 6; j++) {
var colorRandom = MHQ.getRandom(16);
switch (colorRandom) {
case 10:
colorSingle = "A";
break;
case 11:
colorSingle = "B";
break;
case 12:
colorSingle = "C";
break;
case 13:
colorSingle = "D";
break;
case 14:
colorSingle = "E";
break;
case 15:
colorSingle = "F";
break;
default:
colorSingle = colorRandom;
}
color += colorSingle;
}
colorArr.push(color);
color = "#";
}
return colorArr;
};

/**
* METHOD EXTEND 繼承（原型繼承，僅僅繼承原型中的屬性和方法） + call()/apply只繼承 混合繼承
* @param {Object} sub 子類構造函數
* @param {Object} sup 父類構造函數
*/
MHQ.extend = function (sub, sup) {
//目的：需要實現只繼承父類的原型對象
//1 需要創建一個空函數 目的： 中轉
var F = new Function();
//2 實現空函數的原型對象和超類的原型對象轉換
F.prototype = sup.prototype;
//3 原型繼承
sub.prototype = new F();
//4 還原子類的構造器
sub.prototype.constructor = sub;
// 保存父類的原型對象 目的：一方面方便解耦； 另一方面可以輕松的獲得父類的原型對象
//5 自定義一個子類的靜態屬性 接收父類的原型對象
sub.superClass = sup.prototype;
//6 為防止父類的constructor屬性的設置落下 在extend()方法中加保險
if (sup.prototype.constructor == Object.prototype.constructor) {
//手動的還原原型對象的構造器
sup.prototype.constructor = sup;
}
};

/**
* METHOD 接口校驗
* @param instanceSets 實例的集合，傳入多個參數：第一個實現類的實例，第二個，第三個...接口實例
*/
MHQ.Interface.verifyInterface = function (instanceSets) {
// 判斷傳入的參數個數是否正確
if (arguments.length < 2) {
throw new Error("接口校驗方法的構造器實參個數必須大于等于2");
}
// 判斷傳進來的參數的個數是否大于等于2，如果小于2，則拋出異常
for (var i = 1; i < arguments.length; i++) {
// 將接口實例保存到一個變量中
var interfaceInstance = arguments[i];
// 判斷傳過來的對象的構造器是否是Interface，不是則拋出異常
if (interfaceInstance.constructor !== MHQ.Interface) {
throw new Error("參數的構造器不是Interface對象");
}
// 檢測方法
for (var j = 0; j < interfaceInstance.methods.length; j++) {
// 用一個參數來接收方法名稱
var methodName = interfaceInstance.methods[j];
if (!InstanceSets[methodName] || typeof InstanceSets[methodName] !== "function") {
throw new Error("方法：'" + methodName + "'不存在");
}
}
}
};

/**
* METHOD 獲取屬性的兼容方法
* @param element 要獲取屬性的兼容方法
* @param attr 要獲取的屬性
* @returns {*|number}
*/
MHQ.getAttrValue = function (element, attr) {
return element.currentStyle ? element.currentStyle[attr] : window.getComputedStyle(element, null)[attr];
};

/**
* METHOD 得到諸如[{attr1:2,attr2:3}, {attr1:1,attr2:2}]數組中各對象的attr1屬性中最大的一個（僅適用于對象的attr1屬性排序）
* @param arr [{attr1:2,attr2:3}, {attr1:1,attr2:2}]
*/
MHQ.getObjArrMax = function (arr) {
Math.max.apply(null, arr.map(function (v) {
return v.attr1;
}));
};

/**
* METHOD 獲取一個隨機整數 Math.random(); 中的參數可以是一個，考慮了參數是一個的情況
* @param min 隨機數的范圍的下限
* @param max 隨機數的范圍的上限
* @returns {Number}
*/
MHQ.getRandom = function (min, max) {
if (max === undefined) {
max = min;
min = 0;
}
return parseInt(Math.random() * (max - min) + min);
};

/**
* METHOD 數組冒泡排序
* @param arr 需要排序的數組
* @returns {*}
*/
MHQ.sortArr = function (arr) {
for (var i = 0; i < arr.length - 1; i++) {
var flag = true;
for (var j = 0; j < arr.length - 1 - i; j++) {
if (arr[j] > arr[j + 1]) {
var tempValue = arr[j + 1];
arr[j + 1] = arr[j];
arr[j] = tempValue;
flag = false;
}
}
if (flag) {
break;
}
}
return arr;
};

轉載于:https://www.cnblogs.com/hongqin/p/5979408.html

總結

以上是生活随笔為你收集整理的javascript中最最最常用的方法封装的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。