1. 项目中在绑定事件的时候总想在触发前，或者触发后做一些统一的判断或逻辑，在c#后端代码里，可以用Attribute， filter等标签特性实现AOP的效果，可是js中没有这种用法，归根到本质还是不支持类型的拦截和判断，所以没法实现，但是js的灵活就在于可以通过原型链， 高阶函数，闭包等特性来实现类似的效果，这里记录一下便于复习
//AOP: after
Function.prototype.after = function (afterFn) {
var _self = this;
return function () {
var ret = _self.apply(this, arguments);
if (ret === false) {
return false;
}
afterFn.apply(this, arguments);
return ret;
}
}
//AOP: before
Function.prototype.before = function (beforeFn) {
var _self = this;
return function () {
var ret = beforeFn.apply(this, arguments);
if (ret === false) {
return false;
}
return _self.apply(this, arguments);
}
}
2. 用法下面的例子是工程中实用， 在tab点击的时候，一般情况没打开一个tab要绑定一个或多个事件做点击，关闭等处理，这里实现的方法就是在父元素统一只绑定一个事件，都通过冒泡来触发，这种好处就是新加tab不用绑定事件，不好的就是可能tab层级复杂，需要做很多元素的判断来决定触发什么事件，比如说下面的关闭事件里面先判断后，要是没有触发，在判断触发点击事件，这样写的逻辑清晰，功能模块可以分开，利于解耦，效果也能很好实现！！！
_bindEvents: function () {
var g = this,
p = this.options,
container = g.tab.bar.container;
// 标签点击事件， 统一只绑定父元素一次
container.nav.bind("click.tab.nav", function (e) {
if (e.target === e.currentTarget) {
e.stopPropagation();
return;
}
g._tabCloseClick.after(g._tabBarClick).call(g, e);
});
}
3. 当然还有函数的防抖和节流的实现：
函数防抖就是为了让一个函数在一定的时间只执行一次，即使被多次触发，典型应用就是tab标签打开很多的时候，不停的拖动窗体大小或者改变位置，这样标签会有一些动画效果用来自适应窗体大小，但是要是频发的拖动窗体，这些动画效果就会被触发多次，导致拖完了后一段时间内，这种效果不停在重复，延迟严重，所以用debounce就可以在一定时间后触发一次效果就可以了，性能提升的同时，体验也很好
函数节流 就是规定一个单位时间，在这个单位时间内，只能有一次触发事件的回调函数执行，如果在同一个单位时间内某事件被触发多次，只有一次能生效，在项目中应用的例子就是在手风琴点击展开层级的时候，如果用户在短时间内重复快速点击多次，这样这个层级就会不停的触发多次，展开收起又展开，感觉发疯一样，所以这时候用throttle节流一下， 比如在300ms内就触发一次，不管你点了多少次，这样体验大大提高
/**
* 函数防抖, 在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时
* @param fn {Function} 实际要执行的函数
* @param delay {Number} 延迟时间，也就是阈值，单位是毫秒（ms）
* @return {Function} 返回一个防抖了的函数
*/
vango.utils.debounce = function (fn, delay) {
var timer;
return function () {
var context = this;
var args = arguments;
clearTimeout(timer);
timer = setTimeout(function () {
fn.apply(context, args);
}, delay);
}
}
/**
* 函数节流，规定一个单位时间，在这个单位时间内，只能有一次触发事件的回调函数执行，如果在同一个单位时间内某事件被触发多次，只有一次能生效
* @param fn {Function} 实际要执行的函数
* @param wait {Number} 延迟时间，也就是阈值，单位是毫秒（ms）
* @return {Function} 返回一个节流了的函数
*/
vango.utils.throttle = function (func, wait, options) {
/* options的默认值
* 表示首次调用返回值方法时，会马上调用func；否则仅会记录当前时刻，当第二次调用的时间间隔超过wait时，才调用func。
* options.leading = true;
* 表示当调用方法时，未到达wait指定的时间间隔，则启动计时器延迟调用func函数，若后续在既未达到wait指定的时间间隔和func函数又未被调用的情况下调用返回值方法，则被调用请求将被丢弃。
* options.trailing = true;
* 注意：当options.trailing = false时，效果与上面的简单实现效果相同
*/
var context, args, result;
var timeout = null;
var previous = 0;
if (!options) options = {};
var later = function () {
previous = options.leading === false ? 0 : new Date();;
timeout = null;
result = func.apply(context, args);
if (!timeout) context = args = null;
};
return function () {
var now = new Date();;
if (!previous && options.leading === false) previous = now;
// 计算剩余时间
var remaining = wait - (now - previous);
context = this;
args = arguments;
// 当到达wait指定的时间间隔，则调用func函数
// 精彩之处：按理来说remaining <= 0已经足够证明已经到达wait的时间间隔，但这里还考虑到假如客户端修改了系统时间则马上执行func函数。
if (remaining <= 0 || remaining > wait) {
// 由于setTimeout存在最小时间精度问题，因此会存在到达wait的时间间隔，但之前设置的setTimeout操作还没被执行，因此为保险起见，这里先清理setTimeout操作
if (timeout) {
clearTimeout(timeout);
timeout = null;
}
previous = now;
result = func.apply(context, args);
if (!timeout) context = args = null;
} else if (!timeout && options.trailing !== false) {
// options.trailing=true时，延时执行func函数
timeout = setTimeout(later, remaining);
}
return result;
};
};
5. 对于一个系统来说事件的设计当然必不可少，平台中简单的实现了一下事件总线的机制，记录一下
vango.event = (function () {
var _callbacks = {};
var on = function (eventName, callback) {
if (!_callbacks[eventName]) {
_callbacks[eventName] = [];
}
_callbacks[eventName].push(callback);
};
var off = function (eventName, callback) {
var callbacks = _callbacks[eventName];
if (!callbacks) {
return;
}
var index = -1;
for (var i = 0; i < callbacks.length; i++) {
if (callbacks[i] === callback) {
index = i;
break;
}
}
if (index < 0) {
return;
}
_callbacks[eventName].splice(index, 1);
};
var trigger = function (eventName) {
var callbacks = _callbacks[eventName];
if (!callbacks || !callbacks.length) {
return;
}
var args = Array.prototype.slice.call(arguments, 1);
for (var i = 0; i < callbacks.length; i++) {
callbacks[i].apply(this, args);
}
};
return {
on: on,
off: off,
trigger: trigger
};
})();
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
