防止ng-click重复执行

目的：

在angularjs1.*中通过装饰器进行服务的功能扩展。这里需要防止按钮短时间内重复点击，造成服务器负载过高。我们需要通过覆写ng-click指令来实现。

知识点：
1.依赖注入
2.装饰器设计模式
3.指令的执行顺序
4.阻止事件传播
5.防抖机制

讲解：
1.AngularJS中默认实现了依赖注入，通过$http的方式注入需要的服务。内部实现机制是通过将函数的function进行tostring，然后进行解析。相当于JAVA中的反射机制。

2.装饰器设计模式

 

image.png

 

需要相同接口，装饰之后，返回原来功能。

3.指令的执行顺序
覆写ng-click有两个阶段，可以在编译阶段，也可以在执行阶段。由于compile阶段只进行一次，而link阶段则会运行多次。为了性能考虑，必须定义在compile阶段。

4.阻止事件传播
由于防抖当中需要在一定时间内禁止组件的事件传播功能，因此需要用到JS的三种事件阻断机制。
stopPropagation : 阻止对象的当前监听事件传播
preventDefault：阻止对象发生的浏览器默认事件（比如a标签打开链接），但是监听事件依然传播（a的click事件依然传递）。
stopImmediatePropagation：组织对象的全部监听事件传播。

5.防抖思想

代码实现：

angular.module('OBApp',[]).config(['$provide', function ($provide) {
$provide.decorator('ngClickDirective',['$delegate','$timeout',function($delegate,$timeout){//需要在app.conf中注入$provide
    var origin = $delegate[0].compile;//保存原compile函数 $delegate作为指令的引用 必须在编译阶段修改 不能在link阶段修改
    var defer = 1000;
    $delegate[0].compile = function(element,attrs,transclude){ //装饰compile函数 增加功能
        var disabled = false;
        function onClick(event) {
            if (disabled) {
                event.preventDefault();//阻止默认事件
                event.stopImmediatePropagation();//阻止所有事件传播 
            }
            else {
                disabled = true;
                $timeout(function(){disabled = false;},defer,false);//false表示不进行脏检查
            }
        }
        element.on('click',onClick);
        return origin(element,attrs,transclude);//改动compile之后自动触发link操作
    }
    return $delegate;//必须返回引用，否则angular报错
}]);
    }])

作者：小漠穷秋
链接：https://www.jianshu.com/p/d4f794be9632
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。