1、輸入一個值，返回其數據類型**
function type(para) {
return Object.prototype.toString.call(para)
}
2、數組去重
function unique1(arr) {
return […new Set(arr)]
}
function unique2(arr) {
var obj = {};
return arr.filter(ele => {
if (!obj[ele]) {
obj[ele] = true;
return true;
}
})
}
function unique3(arr) {
var result = [];
arr.forEach(ele => {
if (result.indexOf(ele) == -1) {
result.push(ele)
}
})
return result;
}
3、字符串去重
String.prototype.unique = function () {
var obj = {},
str = ”,
len = this.length;
for (var i = 0; i < len; i++) {
if (!obj[this[i]]) {
str += this[i];
obj[this[i]] = true;
}
}
return str;
}
###### //去除連續的字符串
function uniq(str) {
return str.replace(/(w)1+/g, ‘$1’)
}
4、深拷貝 淺拷貝
//深克?。ㄉ羁寺〔豢紤]函數）
function deepClone(obj, result) {
var result = result || {};
for (var prop in obj) {
if (obj.hasOwnProperty(prop)) {
if (typeof obj[prop] == ‘object’ && obj[prop] !== null) {
// 引用值(obj/array)且不為null
if (Object.prototype.toString.call(obj[prop]) == ‘[object Object]’) {
// 對象
result[prop] = {};
} else {
// 數組
result[prop] = [];
}
deepClone(obj[prop], result[prop])
} else {
// 原始值或func
result[prop] = obj[prop]
}
}
}
return result;
}
// 深淺克隆是針對引用值
function deepClone(target) {
if (typeof (target) !== ‘object’) {
return target;
}
var result;
if (Object.prototype.toString.call(target) == ‘[object Array]’) {
// 數組
result = []
} else {
// 對象
result = {};
}
for (var prop in target) {
if (target.hasOwnProperty(prop)) {
result[prop] = deepClone(target[prop])
}
}
return result;
}
// 無法復制函數
var o1 = jsON.parse(jsON.stringify(obj1));
5、reverse底層原理和擴展
// 改變原數組
Array.prototype.myReverse = function () {
var len = this.length;
for (var i = 0; i < len; i++) {
var temp = this[i];
this[i] = this[len – 1 – i];
this[len – 1 – i] = temp;
}
return this;
}
6、圣杯模式的繼承
function inherit(Target, Origin) {
function F() {};
F.prototype = Origin.prototype;
Target.prototype = new F();
Target.prototype.constructor = Target;
// 最終的原型指向
Target.prop.uber = Origin.prototype;
}
7、找出字符串中第一次只出現一次的字母
String.prototype.firstAppear = function () {
var obj = {},
len = this.length;
for (var i = 0; i < len; i++) {
if (obj[this[i]]) {
obj[this[i]]++;
} else {
obj[this[i]] = 1;
}
}
for (var prop in obj) {
if (obj[prop] == 1) {
return prop;
}
}
}
8、找元素的第n級父元素
function parents(ele, n) {
while (ele && n) {
ele = ele.parentElement ? ele.parentElement : ele.parentNode;
n–;
}
return ele;
}
9、 返回元素的第n個兄弟節點
function retSibling(e, n) {
while (e && n) {
if (n > 0) {
if (e.nextElementSibling) {
e = e.nextElementSibling;
} else {
for (e = e.nextSibling; e && e.nodeType !== 1; e = e.nextSibling);
}
n–;
} else {
if (e.previousElementSibling) {
e = e.previousElementSibling;
} else {
for (e = e.previousElementSibling; e && e.nodeType !== 1; e = e.previousElementSibling);
}
n++;
}
}
return e;
}
10、封裝mychildren，解決瀏覽器的兼容問題
function myChildren(e) {
var children = e.childNodes,
arr = [],
len = children.length;
for (var i = 0; i < len; i++) {
if (children[i].nodeType === 1) {
arr.push(children[i])
}
}
return arr;
}
11、判斷元素有沒有子元素
function hasChildren(e) {
var children = e.childNodes,
len = children.length;
for (var i = 0; i < len; i++) {
if (children[i].nodeType === 1) {
return true;
}
}
return false;
}
12、我一個元素插入到另一個元素的后面
Element.prototype.insertAfter = function (target, elen) {
var nextElen = elen.nextElenmentSibling;
if (nextElen == null) {
this.appendChild(target);
} else {
this.insertBefore(target, nextElen);
}
}
13、返回當前的時間（年月日時分秒）
function getDateTime() {
var date = new Date(),
year = date.getFullYear(),
month = date.getMonth() + 1,
day = date.getDate(),
hour = date.getHours() + 1,
minute = date.getMinutes(),
second = date.getSeconds();
month = checkTime(month);
day = checkTime(day);
hour = checkTime(hour);
minute = checkTime(minute);
second = checkTime(second);
function checkTime(i) {
if (i < 10) {
i = “0” + i;
}
return i;
}
return “” + year + “年” + month + “月” + day + “日” + hour + “時” + minute + “分” + second + “秒”
}
14、獲得滾動條的滾動距離
function getScrollOffset() {
if (window.pageXOffset) {
return {
x: window.pageXOffset,
y: window.pageYOffset
}
} else {
return {
x: document.body.scrollLeft + document.documentElement.scrollLeft,
y: document.body.scrollTop + document.documentElement.scrollTop
}
}
}
15、獲得視口的尺寸
function getViewportOffset() {
if (window.innerWidth) {
return {
w: window.innerWidth,
h: window.innerHeight
}
} else {
// ie8及其以下
if (document.compatMode === “BackCompat”) {
// 怪異模式
return {
w: document.body.clientWidth,
h: document.body.clientHeight
}
} else {
// 標準模式
return {
w: document.documentElement.clientWidth,
h: document.documentElement.clientHeight
}
}
}
}
16、獲取任意元素的任意屬性
function getStyle(elem, prop) {
return window.getComputedStyle ? window.getComputedStyle(elem, null)[prop] : elem.currentStyle[prop]
}
17、綁定事件的兼容代碼
function addEvent(elem, type, handle) {
if (elem.addEventListener) { //非ie和非ie9
elem.addEventListener(type, handle, false);
} else if (elem.attachEvent) { //ie6到ie8
elem.attachEvent(‘on’ + type, function () {
handle.call(elem);
})
} else {
elem[‘on’ + type] = handle;
}
}
18、解綁事件
function removeEvent(elem, type, handle) {
if (elem.removeEventListener) { //非ie和非ie9
elem.removeEventListener(type, handle, false);
} else if (elem.detachEvent) { //ie6到ie8
elem.detachEvent(‘on’ + type, handle);
} else {
elem[‘on’ + type] = null;
}
}
19、取消冒泡的兼容代碼
function stopBubble(e) {
if (e && e.stopPropagation) {
e.stopPropagation();
} else {
window.event.cancelBubble = true;
}
}
20、檢驗字符串是否是回文
function isPalina(str) {
if (Object.prototype.toString.call(str) !== ‘[object String]’) {
return false;
}
var len = str.length;
for (var i = 0; i < len / 2; i++) {
if (str[i] != str[len – 1 – i]) {
return false;
}
}
return true;
}
21、檢驗字符串是否是回文
function isPalindrome(str) {
str = str.replace(/W/g, ”).toLowerCase();
console.log(str)
return (str == str.split(”).reverse().join(”))
}
22、兼容getElementsByClassName方法
Element.prototype.getElementsByClassName = Document.prototype.getElementsByClassName = function (_className) {
var allDomArray = document.getElementsByTagName(‘*’);
var lastDomArray = [];
function trimSpace(strClass) {
var reg = /s+/g;
return strClass.replace(reg, ‘ ‘).trim()
}
for (var i = 0; i < allDomArray.length; i++) {
var classArray = trimSpace(allDomArray[i].className).split(‘ ‘);
for (var j = 0; j < classArray.length; j++) {
if (classArray[j] == _className) {
lastDomArray.push(allDomArray[i]);
break;
}
}
}
return lastDomArray;
}
23、運動函數
function animate(obj, json, callback) {
clearInterval(obj.timer);
var speed,
current;
obj.timer = setInterval(function () {
var lock = true;
for (var prop in json) {
if (prop == ‘opacity’) {
current = parseFloat(window.getComputedStyle(obj, null)[prop]) * 100;
} else {
current = parseInt(window.getComputedStyle(obj, null)[prop]);
}
speed = (json[prop] – current) / 7;
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
if (prop == ‘opacity’) {
obj.style[prop] = (current + speed) / 100;
} else {
obj.style[prop] = current + speed + ‘px’;
}
if (current != json[prop]) {
lock = false;
}
}
if (lock) {
clearInterval(obj.timer);
typeof callback == ‘function’ ? callback() : ”;
}
}, 30)
}
24、彈性運動
function ElasticMovement(obj, target) {
clearInterval(obj.timer);
var iSpeed = 40,
a, u = 0.8;
obj.timer = setInterval(function () {
a = (target – obj.offsetLeft) / 8;
iSpeed = iSpeed + a;
iSpeed = iSpeed * u;
if (Math.abs(iSpeed) <= 1 && Math.abs(a) <= 1) {
console.log(‘over’)
clearInterval(obj.timer);
obj.style.left = target + ‘px’;
} else {
obj.style.left = obj.offsetLeft + iSpeed + ‘px’;
}
}, 30);
}
25、封裝自己的forEach方法
Array.prototype.myForEach = function (func, obj) {
var len = this.length;
var _this = arguments[1] ? arguments[1] : window;
// var _this=arguments[1]||window;
for (var i = 0; i < len; i++) {
func.call(_this, this[i], i, this)
}
}
26、封裝自己的filter方法
Array.prototype.myFilter = function (func, obj) {
var len = this.length;
var arr = [];
var _this = arguments[1] || window;
for (var i = 0; i < len; i++) {
func.call(_this, this[i], i, this) && arr.push(this[i]);
}
return arr;
}
27、數組map方法
Array.prototype.myMap = function (func) {
var arr = [];
var len = this.length;
var _this = arguments[1] || window;
for (var i = 0; i < len; i++) {
arr.push(func.call(_this, this[i], i, this));
}
return arr;
}
28、數組every方法
Array.prototype.myEvery = function (func) {
var flag = true;
var len = this.length;
var _this = arguments[1] || window;
for (var i = 0; i < len; i++) {
if (func.apply(_this, [this[i], i, this]) == false) {
flag = false;
break;
}
}
return flag;
}
29、數組reduce方法
Array.prototype.myReduce = function (func, initialValue) {
var len = this.length,
nextValue,
i;
if (!initialValue) {
// 沒有傳第二個參數
nextValue = this[0];
i = 1;
} else {
// 傳了第二個參數
nextValue = initialValue;
i = 0;
}
for (; i < len; i++) {
nextValue = func(nextValue, this[i], i, this);
}
return nextValue;
}
30、獲取url中的參數
function getWindonHref() {
var sHref = window.location.href;
var args = sHref.split(‘?’);
if (args[0] === sHref) {
return ”;
}
var hrefarr = args[1].split(‘#’)[0].split(‘&’);
var obj = {};
for (var i = 0; i < hrefarr.length; i++) {
hrefarr[i] = hrefarr[i].split(‘=’);
obj[hrefarr[i][0]] = hrefarr[i][1];
}
return obj;
}
31、數組排序
// 快排 [left] + min + [right]
function quickArr(arr) {
if (arr.length <= 1) {
return arr;
}
var left = [],
right = [];
var pIndex = Math.floor(arr.length / 2);
var p = arr.splice(pIndex, 1)[0];
for (var i = 0; i < arr.length; i++) {
if (arr[i] <= p) {
left.push(arr[i]);
} else {
right.push(arr[i]);
}
}
// 遞歸
return quickArr(left).concat([p], quickArr(right));
}
// 冒泡
function bubbleSort(arr) {
for (var i = 0; i < arr.length – 1; i++) {
for (var j = i + 1; j < arr.length; j++) {
if (arr[i] > arr[j]) {
var temp = arr[i];
arr[i] = arr[j];
arr[j] = temp;
}
}
}
return arr;
}
function bubbleSort(arr) {
var len = arr.length;
for (var i = 0; i < len – 1; i++) {
for (var j = 0; j < len – 1 – i; j++) {
if (arr[j] > arr[j + 1]) {
var temp = arr[j];
arr[j] = arr[j + 1];
arr[j + 1] = temp;
}
}
}
return arr;
}
32、遍歷Dom樹
// 給定頁面上的DOM元素,將訪問元素本身及其所有后代(不僅僅是它的直接子元素)
// 對于每個訪問的元素，函數將元素傳遞給提供的回調函數
function traverse(element, callback) {
callback(element);
var list = element.children;
for (var i = 0; i < list.length; i++) {
traverse(list[i], callback);
}
}
33、原生js封裝ajax
function ajax(method, url, callback, data, flag) {
var xhr;
flag = flag || true;
method = method.toUpperCase();
if (window.XMLHttpRequest) {
xhr = new XMLHttpRequest();
} else {
xhr = new ActiveXObject(‘Microsoft.XMLHttp’);
}
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
console.log(2)
callback(xhr.responseText);
}
}
if (method == ‘GET’) {
var date = new Date(),
timer = date.getTime();
xhr.open(‘GET’, url + ‘?’ + data + ‘&timer’ + timer, flag);
xhr.send()
} else if (method == ‘POST’) {
xhr.open(‘POST’, url, flag);
xhr.setRequestHeader(‘Content-Type’, ‘application/x-www-form-urlencoded’);
xhr.send(data);
}
}
34、異步加載script
function loadScript(url, callback) {
var oscript = document.createElement(‘script’);
if (oscript.readyState) { // ie8及以下版本
oscript.onreadystatechange = function () {
if (oscript.readyState === ‘complete’ || oscript.readyState === ‘loaded’) {
callback();
}
}
} else {
oscript.onload = function () {
callback()
};
}
oscript.src = url;
document.body.appendChild(oscript);
}
35、cookie管理
var cookie = {
set: function (name, value, time) {
document.cookie = name + ‘=’ + value + ‘; max-age=’ + time;
return this;
},
remove: function (name) {
return this.setCookie(name, ”, -1);
},
get: function (name, callback) {
var allCookieArr = document.cookie.split(‘; ‘);
for (var i = 0; i < allCookieArr.length; i++) {
var itemCookieArr = allCookieArr[i].split(‘=’);
if (itemCookieArr[0] === name) {
return itemCookieArr[1]
}
}
return undefined;
}
}
36、實現bind()方法
Function.prototype.myBind = function (target) {
var target = target || window;
var _args1 = [].slice.call(arguments, 1);
var self = this;
var temp = function () {};
var F = function () {
var _args2 = [].slice.call(arguments, 0);
var parasArr = _args1.concat(_args2);
return self.apply(this instanceof temp ? this : target, parasArr)
}
temp.prototype = self.prototype;
F.prototype = new temp();
return F;
}
37、實現call()方法
Function.prototype.myCall = function () {
var ctx = arguments[0] || window;
ctx.fn = this;
var args = [];
for (var i = 1; i < arguments.length; i++) {
args.push(arguments[i])
}
var result = ctx.fn(…args);
delete ctx.fn;
return result;
}
38、實現apply()方法
Function.prototype.myApply = function () {
var ctx = arguments[0] || window;
ctx.fn = this;
if (!arguments[1]) {
var result = ctx.fn();
delete ctx.fn;
return result;
}
var result = ctx.fn(…arguments[1]);
delete ctx.fn;
return result;
}
39、防抖
function debounce(handle, delay) {
var timer = null;
return function () {
var _self = this,
_args = arguments;
clearTimeout(timer);
timer = setTimeout(function () {
handle.apply(_self, _args)
}, delay)
}
}
40、節流
function throttle(handler, wait) {
var lastTime = 0;
return function (e) {
var nowTime = new Date().getTime();
if (nowTime – lastTime > wait) {
handler.apply(this, arguments);
lastTime = nowTime;
}
}
}
41、requestAnimFrame兼容性方法
window.requestAnimFrame = (function () {
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
function (callback) {
window.setTimeout(callback, 1000 / 60);
};
})();
42、cancelAnimFrame兼容性方法
window.cancelAnimFrame = (function () {
return window.cancelAnimationFrame ||
window.webkitCancelAnimationFrame ||
window.mozCancelAnimationFrame ||
function (id) {
window.clearTimeout(id);
};
})();
43、jsonp底層方法
function jsonp(url, callback) {
var oscript = document.createElement(‘script’);
if (oscript.readyState) { // ie8及以下版本
oscript.onreadystatechange = function () {
if (oscript.readyState === ‘complete’ || oscript.readyState === ‘loaded’) {
callback();
}
}
} else {
oscript.onload = function () {
callback()
};
}
oscript.src = url;
document.body.appendChild(oscript);
}
44、獲取url上的參數
function getUrlParam(sUrl, sKey) {
var result = {};
sUrl.replace(/(w+)=(w+)(?=[&|#])/g, function (ele, key, val) {
if (!result[key]) {
result[key] = val;
} else {
var temp = result[key];
result[key] = [].concat(temp, val);
}
})
if (!sKey) {
return result;
} else {
return result[sKey] || ”;
}
}
45、格式化時間
function formatDate(t, str) {
var obj = {
yyyy: t.getFullYear(),
yy: (“” + t.getFullYear()).slice(-2),
M: t.getMonth() + 1,
MM: (“0” + (t.getMonth() + 1)).slice(-2),
d: t.getDate(),
dd: (“0” + t.getDate()).slice(-2),
H: t.getHours(),
HH: (“0” + t.getHours()).slice(-2),
h: t.getHours() % 12,
hh: (“0” + t.getHours() % 12).slice(-2),
m: t.getMinutes(),
mm: (“0” + t.getMinutes()).slice(-2),
s: t.getSeconds(),
ss: (“0” + t.getSeconds()).slice(-2),
w: [‘日’, ‘一’, ‘二’, ‘三’, ‘四’, ‘五’, ‘六’][t.getDay()]
};
return str.replace(/([a-z]+)/ig, function ($1) {
return obj[$1]
});
}
46、驗證郵箱的正則表達式
function isAvailableEmail(sEmail) {
var reg = /^([w+.])+@w+([.]w+)+$/
return reg.test(sEmail)
}
47、函數顆粒化
//是把接受多個參數的函數變換成接受一個單一參數(最初函數的第一個參數)的函數，并且返回接受余下的參數且返回結果的新函數的技術
function curryIt(fn) {
var length = fn.length,
args = [];
var result = function (arg) {
args.push(arg);
length–;
if (length <= 0) {
return fn.apply(this, args);
} else {
return result;
}
}
return result;
}
48、大數相加
function sumBigNumber(a, b) {
var res = ”, //結果
temp = 0; //按位加的結果及進位
a = a.split(”);
b = b.split(”);
while (a.length || b.length || temp) {
//~~按位非 1.類型轉換，轉換成數字 2.~~undefined==0
temp += ~~a.pop() + ~~b.pop();
res = (temp % 10) + res;
temp = temp > 9;
}
return res.replace(/^0+/, ”);
}
1、輸入一個值，返回其數據類型**
function type(para) {
return Object.prototype.toString.call(para)
}
2、數組去重
function unique1(arr) {
return […new Set(arr)]
}
function unique2(arr) {
var obj = {};
return arr.filter(ele => {
if (!obj[ele]) {
obj[ele] = true;
return true;
}
})
}
function unique3(arr) {
var result = [];
arr.forEach(ele => {
if (result.indexOf(ele) == -1) {
result.push(ele)
}
})
return result;
}
3、字符串去重
String.prototype.unique = function () {
var obj = {},
str = ”,
len = this.length;
for (var i = 0; i < len; i++) {
if (!obj[this[i]]) {
str += this[i];
obj[this[i]] = true;
}
}
return str;
}
###### //去除連續的字符串
function uniq(str) {
return str.replace(/(w)1+/g, ‘$1’)
}
4、深拷貝 淺拷貝
//深克隆（深克隆不考慮函數）
function deepClone(obj, result) {
var result = result || {};
for (var prop in obj) {
if (obj.hasOwnProperty(prop)) {
if (typeof obj[prop] == ‘object’ && obj[prop] !== null) {
// 引用值(obj/array)且不為null
if (Object.prototype.toString.call(obj[prop]) == ‘[object Object]’) {
// 對象
result[prop] = {};
} else {
// 數組
result[prop] = [];
}
deepClone(obj[prop], result[prop])
} else {
// 原始值或func
result[prop] = obj[prop]
}
}
}
return result;
}
// 深淺克隆是針對引用值
function deepClone(target) {
if (typeof (target) !== ‘object’) {
return target;
}
var result;
if (Object.prototype.toString.call(target) == ‘[object Array]’) {
// 數組
result = []
} else {
// 對象
result = {};
}
for (var prop in target) {
if (target.hasOwnProperty(prop)) {
result[prop] = deepClone(target[prop])
}
}
return result;
}
// 無法復制函數
var o1 = jsON.parse(jsON.stringify(obj1));
5、reverse底層原理和擴展
// 改變原數組
Array.prototype.myReverse = function () {
var len = this.length;
for (var i = 0; i < len; i++) {
var temp = this[i];
this[i] = this[len – 1 – i];
this[len – 1 – i] = temp;
}
return this;
}
6、圣杯模式的繼承
function inherit(Target, Origin) {
function F() {};
F.prototype = Origin.prototype;
Target.prototype = new F();
Target.prototype.constructor = Target;
// 最終的原型指向
Target.prop.uber = Origin.prototype;
}
7、找出字符串中第一次只出現一次的字母
String.prototype.firstAppear = function () {
var obj = {},
len = this.length;
for (var i = 0; i < len; i++) {
if (obj[this[i]]) {
obj[this[i]]++;
} else {
obj[this[i]] = 1;
}
}
for (var prop in obj) {
if (obj[prop] == 1) {
return prop;
}
}
}
8、找元素的第n級父元素
function parents(ele, n) {
while (ele && n) {
ele = ele.parentElement ? ele.parentElement : ele.parentNode;
n–;
}
return ele;
}
9、 返回元素的第n個兄弟節點
function retSibling(e, n) {
while (e && n) {
if (n > 0) {
if (e.nextElementSibling) {
e = e.nextElementSibling;
} else {
for (e = e.nextSibling; e && e.nodeType !== 1; e = e.nextSibling);
}
n–;
} else {
if (e.previousElementSibling) {
e = e.previousElementSibling;
} else {
for (e = e.previousElementSibling; e && e.nodeType !== 1; e = e.previousElementSibling);
}
n++;
}
}
return e;
}
10、封裝mychildren，解決瀏覽器的兼容問題
function myChildren(e) {
var children = e.childNodes,
arr = [],
len = children.length;
for (var i = 0; i < len; i++) {
if (children[i].nodeType === 1) {
arr.push(children[i])
}
}
return arr;
}
11、判斷元素有沒有子元素
function hasChildren(e) {
var children = e.childNodes,
len = children.length;
for (var i = 0; i < len; i++) {
if (children[i].nodeType === 1) {
return true;
}
}
return false;
}
12、我一個元素插入到另一個元素的后面
Element.prototype.insertAfter = function (target, elen) {
var nextElen = elen.nextElenmentSibling;
if (nextElen == null) {
this.appendChild(target);
} else {
this.insertBefore(target, nextElen);
}
}
13、返回當前的時間（年月日時分秒）
function getDateTime() {
var date = new Date(),
year = date.getFullYear(),
month = date.getMonth() + 1,
day = date.getDate(),
hour = date.getHours() + 1,
minute = date.getMinutes(),
second = date.getSeconds();
month = checkTime(month);
day = checkTime(day);
hour = checkTime(hour);
minute = checkTime(minute);
second = checkTime(second);
function checkTime(i) {
if (i < 10) {
i = “0” + i;
}
return i;
}
return “” + year + “年” + month + “月” + day + “日” + hour + “時” + minute + “分” + second + “秒”
}
14、獲得滾動條的滾動距離
function getScrollOffset() {
if (window.pageXOffset) {
return {
x: window.pageXOffset,
y: window.pageYOffset
}
} else {
return {
x: document.body.scrollLeft + document.documentElement.scrollLeft,
y: document.body.scrollTop + document.documentElement.scrollTop
}
}
}
15、獲得視口的尺寸
function getViewportOffset() {
if (window.innerWidth) {
return {
w: window.innerWidth,
h: window.innerHeight
}
} else {
// ie8及其以下
if (document.compatMode === “BackCompat”) {
// 怪異模式
return {
w: document.body.clientWidth,
h: document.body.clientHeight
}
} else {
// 標準模式
return {
w: document.documentElement.clientWidth,
h: document.documentElement.clientHeight
}
}
}
}
16、獲取任意元素的任意屬性
function getStyle(elem, prop) {
return window.getComputedStyle ? window.getComputedStyle(elem, null)[prop] : elem.currentStyle[prop]
}
17、綁定事件的兼容代碼
function addEvent(elem, type, handle) {
if (elem.addEventListener) { //非ie和非ie9
elem.addEventListener(type, handle, false);
} else if (elem.attachEvent) { //ie6到ie8
elem.attachEvent(‘on’ + type, function () {
handle.call(elem);
})
} else {
elem[‘on’ + type] = handle;
}
}
18、解綁事件
function removeEvent(elem, type, handle) {
if (elem.removeEventListener) { //非ie和非ie9
elem.removeEventListener(type, handle, false);
} else if (elem.detachEvent) { //ie6到ie8
elem.detachEvent(‘on’ + type, handle);
} else {
elem[‘on’ + type] = null;
}
}
19、取消冒泡的兼容代碼
function stopBubble(e) {
if (e && e.stopPropagation) {
e.stopPropagation();
} else {
window.event.cancelBubble = true;
}
}
20、檢驗字符串是否是回文
function isPalina(str) {
if (Object.prototype.toString.call(str) !== ‘[object String]’) {
return false;
}
var len = str.length;
for (var i = 0; i < len / 2; i++) {
if (str[i] != str[len – 1 – i]) {
return false;
}
}
return true;
}
21、檢驗字符串是否是回文
function isPalindrome(str) {
str = str.replace(/W/g, ”).toLowerCase();
console.log(str)
return (str == str.split(”).reverse().join(”))
}
22、兼容getElementsByClassName方法
Element.prototype.getElementsByClassName = Document.prototype.getElementsByClassName = function (_className) {
var allDomArray = document.getElementsByTagName(‘*’);
var lastDomArray = [];
function trimSpace(strClass) {
var reg = /s+/g;
return strClass.replace(reg, ‘ ‘).trim()
}
for (var i = 0; i < allDomArray.length; i++) {
var classArray = trimSpace(allDomArray[i].className).split(‘ ‘);
for (var j = 0; j < classArray.length; j++) {
if (classArray[j] == _className) {
lastDomArray.push(allDomArray[i]);
break;
}
}
}
return lastDomArray;
}
23、運動函數
function animate(obj, json, callback) {
clearInterval(obj.timer);
var speed,
current;
obj.timer = setInterval(function () {
var lock = true;
for (var prop in json) {
if (prop == ‘opacity’) {
current = parseFloat(window.getComputedStyle(obj, null)[prop]) * 100;
} else {
current = parseInt(window.getComputedStyle(obj, null)[prop]);
}
speed = (json[prop] – current) / 7;
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
if (prop == ‘opacity’) {
obj.style[prop] = (current + speed) / 100;
} else {
obj.style[prop] = current + speed + ‘px’;
}
if (current != json[prop]) {
lock = false;
}
}
if (lock) {
clearInterval(obj.timer);
typeof callback == ‘function’ ? callback() : ”;
}
}, 30)
}
24、彈性運動
function ElasticMovement(obj, target) {
clearInterval(obj.timer);
var iSpeed = 40,
a, u = 0.8;
obj.timer = setInterval(function () {
a = (target – obj.offsetLeft) / 8;
iSpeed = iSpeed + a;
iSpeed = iSpeed * u;
if (Math.abs(iSpeed) <= 1 && Math.abs(a) <= 1) {
console.log(‘over’)
clearInterval(obj.timer);
obj.style.left = target + ‘px’;
} else {
obj.style.left = obj.offsetLeft + iSpeed + ‘px’;
}
}, 30);
}
25、封裝自己的forEach方法
Array.prototype.myForEach = function (func, obj) {
var len = this.length;
var _this = arguments[1] ? arguments[1] : window;
// var _this=arguments[1]||window;
for (var i = 0; i < len; i++) {
func.call(_this, this[i], i, this)
}
}
26、封裝自己的filter方法
Array.prototype.myFilter = function (func, obj) {
var len = this.length;
var arr = [];
var _this = arguments[1] || window;
for (var i = 0; i < len; i++) {
func.call(_this, this[i], i, this) && arr.push(this[i]);
}
return arr;
}
27、數組map方法
Array.prototype.myMap = function (func) {
var arr = [];
var len = this.length;
var _this = arguments[1] || window;
for (var i = 0; i < len; i++) {
arr.push(func.call(_this, this[i], i, this));
}
return arr;
}
28、數組every方法
Array.prototype.myEvery = function (func) {
var flag = true;
var len = this.length;
var _this = arguments[1] || window;
for (var i = 0; i < len; i++) {
if (func.apply(_this, [this[i], i, this]) == false) {
flag = false;
break;
}
}
return flag;
}
29、數組reduce方法
Array.prototype.myReduce = function (func, initialValue) {
var len = this.length,
nextValue,
i;
if (!initialValue) {
// 沒有傳第二個參數
nextValue = this[0];
i = 1;
} else {
// 傳了第二個參數
nextValue = initialValue;
i = 0;
}
for (; i < len; i++) {
nextValue = func(nextValue, this[i], i, this);
}
return nextValue;
}
30、獲取url中的參數
function getWindonHref() {
var sHref = window.location.href;
var args = sHref.split(‘?’);
if (args[0] === sHref) {
return ”;
}
var hrefarr = args[1].split(‘#’)[0].split(‘&’);
var obj = {};
for (var i = 0; i < hrefarr.length; i++) {
hrefarr[i] = hrefarr[i].split(‘=’);
obj[hrefarr[i][0]] = hrefarr[i][1];
}
return obj;
}
31、數組排序
// 快排 [left] + min + [right]
function quickArr(arr) {
if (arr.length <= 1) {
return arr;
}
var left = [],
right = [];
var pIndex = Math.floor(arr.length / 2);
var p = arr.splice(pIndex, 1)[0];
for (var i = 0; i < arr.length; i++) {
if (arr[i] <= p) {
left.push(arr[i]);
} else {
right.push(arr[i]);
}
}
// 遞歸
return quickArr(left).concat([p], quickArr(right));
}
// 冒泡
function bubbleSort(arr) {
for (var i = 0; i < arr.length – 1; i++) {
for (var j = i + 1; j < arr.length; j++) {
if (arr[i] > arr[j]) {
var temp = arr[i];
arr[i] = arr[j];
arr[j] = temp;
}
}
}
return arr;
}
function bubbleSort(arr) {
var len = arr.length;
for (var i = 0; i < len – 1; i++) {
for (var j = 0; j < len – 1 – i; j++) {
if (arr[j] > arr[j + 1]) {
var temp = arr[j];
arr[j] = arr[j + 1];
arr[j + 1] = temp;
}
}
}
return arr;
}
32、遍歷Dom樹
// 給定頁面上的DOM元素,將訪問元素本身及其所有后代(不僅僅是它的直接子元素)
// 對于每個訪問的元素，函數將元素傳遞給提供的回調函數
function traverse(element, callback) {
callback(element);
var list = element.children;
for (var i = 0; i < list.length; i++) {
traverse(list[i], callback);
}
}
33、原生js封裝ajax
function ajax(method, url, callback, data, flag) {
var xhr;
flag = flag || true;
method = method.toUpperCase();
if (window.XMLHttpRequest) {
xhr = new XMLHttpRequest();
} else {
xhr = new ActiveXObject(‘Microsoft.XMLHttp’);
}
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
console.log(2)
callback(xhr.responseText);
}
}
if (method == ‘GET’) {
var date = new Date(),
timer = date.getTime();
xhr.open(‘GET’, url + ‘?’ + data + ‘&timer’ + timer, flag);
xhr.send()
} else if (method == ‘POST’) {
xhr.open(‘POST’, url, flag);
xhr.setRequestHeader(‘Content-Type’, ‘application/x-www-form-urlencoded’);
xhr.send(data);
}
}
34、異步加載script
function loadScript(url, callback) {
var oscript = document.createElement(‘script’);
if (oscript.readyState) { // ie8及以下版本
oscript.onreadystatechange = function () {
if (oscript.readyState === ‘complete’ || oscript.readyState === ‘loaded’) {
callback();
}
}
} else {
oscript.onload = function () {
callback()
};
}
oscript.src = url;
document.body.appendChild(oscript);
}
35、cookie管理
var cookie = {
set: function (name, value, time) {
document.cookie = name + ‘=’ + value + ‘; max-age=’ + time;
return this;
},
remove: function (name) {
return this.setCookie(name, ”, -1);
},
get: function (name, callback) {
var allCookieArr = document.cookie.split(‘; ‘);
for (var i = 0; i < allCookieArr.length; i++) {
var itemCookieArr = allCookieArr[i].split(‘=’);
if (itemCookieArr[0] === name) {
return itemCookieArr[1]
}
}
return undefined;
}
}
36、實現bind()方法
Function.prototype.myBind = function (target) {
var target = target || window;
var _args1 = [].slice.call(arguments, 1);
var self = this;
var temp = function () {};
var F = function () {
var _args2 = [].slice.call(arguments, 0);
var parasArr = _args1.concat(_args2);
return self.apply(this instanceof temp ? this : target, parasArr)
}
temp.prototype = self.prototype;
F.prototype = new temp();
return F;
}
37、實現call()方法
Function.prototype.myCall = function () {
var ctx = arguments[0] || window;
ctx.fn = this;
var args = [];
for (var i = 1; i < arguments.length; i++) {
args.push(arguments[i])
}
var result = ctx.fn(…args);
delete ctx.fn;
return result;
}
38、實現apply()方法
Function.prototype.myApply = function () {
var ctx = arguments[0] || window;
ctx.fn = this;
if (!arguments[1]) {
var result = ctx.fn();
delete ctx.fn;
return result;
}
var result = ctx.fn(…arguments[1]);
delete ctx.fn;
return result;
}
39、防抖
function debounce(handle, delay) {
var timer = null;
return function () {
var _self = this,
_args = arguments;
clearTimeout(timer);
timer = setTimeout(function () {
handle.apply(_self, _args)
}, delay)
}
}
40、節流
function throttle(handler, wait) {
var lastTime = 0;
return function (e) {
var nowTime = new Date().getTime();
if (nowTime – lastTime > wait) {
handler.apply(this, arguments);
lastTime = nowTime;
}
}
}
41、requestAnimFrame兼容性方法
window.requestAnimFrame = (function () {
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
function (callback) {
window.setTimeout(callback, 1000 / 60);
};
})();
42、cancelAnimFrame兼容性方法
window.cancelAnimFrame = (function () {
return window.cancelAnimationFrame ||
window.webkitCancelAnimationFrame ||
window.mozCancelAnimationFrame ||
function (id) {
window.clearTimeout(id);
};
})();
43、jsonp底層方法
function jsonp(url, callback) {
var oscript = document.createElement(‘script’);
if (oscript.readyState) { // ie8及以下版本
oscript.onreadystatechange = function () {
if (oscript.readyState === ‘complete’ || oscript.readyState === ‘loaded’) {
callback();
}
}
} else {
oscript.onload = function () {
callback()
};
}
oscript.src = url;
document.body.appendChild(oscript);
}
44、獲取url上的參數
function getUrlParam(sUrl, sKey) {
var result = {};
sUrl.replace(/(w+)=(w+)(?=[&|#])/g, function (ele, key, val) {
if (!result[key]) {
result[key] = val;
} else {
var temp = result[key];
result[key] = [].concat(temp, val);
}
})
if (!sKey) {
return result;
} else {
return result[sKey] || ”;
}
}
45、格式化時間
function formatDate(t, str) {
var obj = {
yyyy: t.getFullYear(),
yy: (“” + t.getFullYear()).slice(-2),
M: t.getMonth() + 1,
MM: (“0” + (t.getMonth() + 1)).slice(-2),
d: t.getDate(),
dd: (“0” + t.getDate()).slice(-2),
H: t.getHours(),
HH: (“0” + t.getHours()).slice(-2),
h: t.getHours() % 12,
hh: (“0” + t.getHours() % 12).slice(-2),
m: t.getMinutes(),
mm: (“0” + t.getMinutes()).slice(-2),
s: t.getSeconds(),
ss: (“0” + t.getSeconds()).slice(-2),
w: [‘日’, ‘一’, ‘二’, ‘三’, ‘四’, ‘五’, ‘六’][t.getDay()]
};
return str.replace(/([a-z]+)/ig, function ($1) {
return obj[$1]
});
}
46、驗證郵箱的正則表達式
function isAvailableEmail(sEmail) {
var reg = /^([w+.])+@w+([.]w+)+$/
return reg.test(sEmail)
}
47、函數顆?；?/strong>
//是把接受多個參數的函數變換成接受一個單一參數(最初函數的第一個參數)的函數，并且返回接受余下的參數且返回結果的新函數的技術
function curryIt(fn) {
var length = fn.length,
args = [];
var result = function (arg) {
args.push(arg);
length–;
if (length <= 0) {
return fn.apply(this, args);
} else {
return result;
}
}
return result;
}
48、大數相加
function sumBigNumber(a, b) {
var res = ”, //結果
temp = 0; //按位加的結果及進位
a = a.split(”);
b = b.split(”);
while (a.length || b.length || temp) {
//~~按位非 1.類型轉換，轉換成數字 2.~~undefined==0
temp += ~~a.pop() + ~~b.pop();
res = (temp % 10) + res;
temp = temp > 9;
}
return res.replace(/^0+/, ”);
}
49、單例模式
function getSingle(func) {
var result;
return function () {
if (!result) {
result = new func(arguments);
}
return result;
}
}
49、單例模式
function getSingle(func) {
var result;
return function () {
if (!result) {
result = new func(arguments);
}
return result;
}
}
相關推薦
飛利浦276e顯示器評測（飛利浦276e8VJSB怎么樣）
一、前言 4K液晶顯示器發展至今已經過去了好幾個年頭了，隨著制造工藝的成熟和成本的降低，4K顯示器的售價也是變得越來越親民，市場上涌現了許多入門級的4K顯示器，不過，雖說是入門，但…
js壓縮工具哪些好（推薦這15款壓縮工具）
JavaScript 代碼壓縮是指去除源代碼里的所有不必要的字符，而不改變其功能的過程。這些不必要的字符通常包括空格字符，換行字符，注釋以及塊分隔符等用來增加可讀性的代碼，但并不需…
js壓縮工具哪個好（實測好用且簡單的9款工具）
削減是一個從源代碼中刪除不必要的字符的技術使它看起來簡單而整潔。這種技術也被稱為代碼壓縮和最小化。在這里，我們為你收集了9個最好的JavaScript壓縮工具將幫助您刪除不必要的空…
js日期加一天的公式（js獲取下一天的日期的方法）
想自己寫一個日期的加減方法，但是涉及到每個月天數的判斷，如果是2月份的話，還要涉及到閏年的判斷，有些復雜，應用過程中總是出現問題，于是查了下資料，以在某個日期上加減天數來說，其實只…
jsp和servlet區別在哪（簡述2者間的不同處）
JSP全名為Java Server Pages，中文名叫java服務器頁面，其根本是一個簡化的Servlet設計，它是由SunMicrosystems公司倡導、許多公司參與一起建立…
版權聲明：本文內容由互聯網用戶自發貢獻，該文觀點僅代表作者本人。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。如發現本站有涉嫌抄襲侵權/違法違規的內容， 請發送郵件至 舉報，一經查實，本站將立刻刪除。