手寫事件偵聽器，并要求兼容瀏覽器
var eventUtil = {
getEvent: function(event) {
return event || window.event;
},
getTarget: function(event) {
return event.target || event.srcElement;
},
addListener: function(element, type, hander) {
if (element.addEventListener) {
element.addEventListener(type, hander, false);
} else if (element.attachEvent) {
element.attachEvent('on' + type, hander);
} else {
element['on' + type] = hander;
}
},
removeListener: function(element, type, hander) {
if (element.removeEventListener) {
element.removeEventListener(type, hander, false);
} else if (element.deattachEvent) {
element.detachEvent(type, hander);
} else {
element['on' + type] = null;
}
},
preventDefault: function(event) {
if (event.preventDefault) {
event.preventDefault();
} else {
event.returnValue = false;
}
},
stopPropagation: function(event) {
if (event.stopPropagation) {
event.stopPropagation();
} else {
event.cancelBubble = true;
}
}
};
// 調(diào)用
(function() {
var btn = document.getElementById("btn");
var link = document.getElementsByTagName("a")[0];
eventUtil.addListener(btn, "click", function(event) {
var event = eventUtil.getEvent(event);
var target = eventUtil.getTarget(event);
alert(event.type);
alert(target);
eventUtil.stopPropagation(event);
});
eventUtil.addListener(link, "click", function(event) {
alert("prevent default event");
var event = eventUtil.getEvent(event);
eventUtil.preventDefault(event);
});
eventUtil.addListener(document.body, "click", function() {
alert("click body");
});
})();
手寫事件模型
var Event = (function () {
var list = {}, bind, trigger, remove;
bind = function (key, fn) {
if (!list[key]) {
list[key] = [];
}
list[key].push(fn);
};
trigger = function () {
var key = Array.prototype.shift.call(arguments);
var fns = list[key];
if (!fns || fns.length === 0) {
return false;
}
for (var i = 0, fn; fn = fns[i++];) {
fn.apply(this, arguments);
}
};
remove = function (key, fn) {
var fns = list[key];
if (!fns) {
return false;
}
if (!fn) {
fns & (fns.length = 0);
} else {
for (var i = fns.length - 1; i >= 0; i--) {
var _fn = fns[i];
if (_fn === fn) {
fns.splice(i, 1);
}
}
}
};
return {
bind: bind,
trigger: trigger,
remove: remove
}
})();
// 調(diào)用
Event.bind('Hit', function(){ console.log('bind event'); }); // 綁定事件
Event.trigger("Hit", function(){ console.log('trigger event'); }); // 觸發(fā)事件
手寫事件代理旭斥，并要求兼容瀏覽器
function delegateEvent(parentEl, selector, type, fn) {
var handler = function(e){
var e = e || window.event;
var target = e.target || e.srcElement;
if (matchSelector(target, selector)) {
if(fn) {
fn.call(target, e);
}
}
};
if(parentEl.addEventListener){
parentEl.addEventListener(type, handler);
}else{
parentEl.attachEvent("on" + type, handler);
}
}
/**
* support #id, tagName, .className
*/
function matchSelector(ele, selector) {
// if use id
if (selector.charAt(0) === "#") {
return ele.id === selector.slice(1);
}
// if use class
if (selector.charAt(0) === ".") {
return (" " + ele.className + " ").indexOf(" " + selector.slice(1) + " ") != -1;
}
// if use tagName
return ele.tagName.toLowerCase() === selector.toLowerCase();
}
// 調(diào)用
var box = document.getElementById("box");
delegateEvent(box, "a", "click", function(){
console.log(this.href);
})
手寫事件觸發(fā)器，并要求兼容瀏覽器
var fireEvent = function(element, event){
if (document.createEventObject){
var mockEvent = document.createEventObject();
return element.fireEvent('on' + event, mockEvent)
}else{
var mockEvent = document.createEvent('HTMLEvents');
mockEvent.initEvent(event, true, true);
return element.dispatchEvent(mockEvent);
}
}
手寫 Function.bind 函數(shù)
if (!Function.prototype.bind) {
Function.prototype.bind = function (oThis) {
if (typeof this !== "function") {
throw new TypeError("'this' is not function");
}
// bind's default arguments, array without first element
// first part arguments for the function
var aBindArgs = Array.prototype.slice.call(arguments, 1);
var fToBind = this; // the function will be binding
var fNOP = function () {};
var fBound = function () {
// target this will be binding
var oThis = this instanceof fNOP ? this : oThis || this;
// last part arguments for the function
var aCallArgs = Array.prototype.slice.call(arguments);
// complete arguments for the function
var aFuncArgs = aBindArgs.concat(aCallArgs);
return fToBind.apply(oThis, aFuncArgs);
};
// fBound extends fToBind
fNOP.prototype = this.prototype;
fBound.prototype = new fNOP();
return fBound;
};
}
// 調(diào)用
var add = function(a, b, c){ return a + b + c;};
var newAdd = add.bind(null, 1, 2);
var result = newAdd(3);
手寫數(shù)組快速排序
var quickSort = function(arr) {
if (arr.length <= 1) { return arr; }
var pivotIndex = Math.floor(arr.length / 2);
var pivot = arr.splice(pivotIndex, 1)[0];
var left = [];
var right = [];
for (var i = 0, len = arr.length; i < len; i++){
if (arr[i] < pivot) {
left.push(arr[i]);
} else {
right.push(arr[i]);
}
}
return quickSort(left).concat([pivot], quickSort(right));
};
// 調(diào)用
quickSort([9, 4, 2, 8, 1, 5, 3, 7]);
手寫數(shù)組冒泡排序
var bubble = function(arr){
var maxIndex = arr.length - 1, temp, flag;
for (var i = maxIndex; i > 0; i--) {
flag = true
for (var j = 0; j < i; j++) {
if (arr[j] > arr[j + 1]) {
temp = arr[j];
arr[j] = arr[j + 1];
arr[j + 1] = temp;
flag = false;
}
}
if(! flag){
break;
}
}
return arr;
}
// 調(diào)用
var arr = bubble([13, 69, 28, 93, 55, 75, 34]);
手寫數(shù)組去重
Array.prototype.unique = function() { return [...new Set(this)];};
// 調(diào)用
[1, 2, 3, 3, 2, 1].unique();
function unique1(arr){
var hash = {}, result = [];
for(var i=0, len=arr.length; i<len; i++){
if(! hash[arr[i]]){
result.push(arr[i]);
hash[arr[i]] = true;
}
}
return result;
}
// 調(diào)用
unique1([1, 2, 3, 3, 2, 1]);
Array.prototype.unique2 = function(){
this.sort();
var result = [this[0]];
var len = this.length;
for(var i = 0; i < len; i++){
if(this[i] !== result[result.length - 1]){
result.push(this[i]);
}
}
return result;
}
// 調(diào)用
[1, 2, 3, 3, 2, 1].unique2();
function unique3(arr){
var result = [];
for(var i=0; i<arr.length; i++){
if(result.indexOf(arr[i]) == -1){
result.push(arr[i]);
}
}
return result;
}
// 調(diào)用
unique3([1, 2, 3, 3, 2, 1]);
將url的查詢參數(shù)解析成字典對象
function parseQuery(url) {
url = url == null ? window.location.href : url;
var search = url.substring(url.lastIndexOf("?") + 1);
var hash = {};
var reg = /([^?&=]+)=([^?&=]*)/g;
search.replace(reg, function (match, $1, $2) {
var name = decodeURIComponent($1);
var val = decodeURIComponent($2);
hash[name] = String(val);
return match;
});
return hash;
}
封裝函數(shù)節(jié)流函數(shù)
var throttle = function(fn, delay, mustRunDelay){
var timer = null;
var t_start;
return function(){
var context = this, args = arguments, t_curr = +new Date();
clearTimeout(timer);
if(!t_start){
t_start = t_curr;
}
if(t_curr - t_start >= mustRunDelay){
fn.apply(context, args);
t_start = t_curr;
} else {
timer = setTimeout(function(){
fn.apply(context, args);
}, delay);
}
};
};
// 調(diào)用（兩次間隔50ms內(nèi)連續(xù)觸發(fā)不執(zhí)行，但每累計100ms至少執(zhí)行一次
window.onresize = throttle(myFunc, 50, 100);
用JS實現(xiàn)千位分隔符
function test1(num){
var str = (+ num) + '';
var len = str.length;
if(len <= 3) return str;
num = '';
while(len > 3){
len -= 3;
num = ',' + str.substr(len, 3) + num;
}
return str.substr(0, len) + num;
}
function test2(num){
// ?= 正向匹配:匹配位置
// ?! 正向不匹配:排除位置
var str = (+num).toString();
var reg = /(?=(?!\b)(\d{3})+$)/g;
return str.replace(reg, ',');
}
