前端日志

# 面向切面初探

# 什么是 AOP 呢？下面是来自百科的一段话

Aspect Oriented Programming(AOP)，面向切面编程，是一个比较热门的话题。AOP 主要实现的目的是针对业务处理过程中的切面进行提取，它所面对的是处理过程中的某个步骤或阶段，以获得逻辑过程中各部分之间低耦合性的隔离效果。比如我们最常见的就是日志记录了，举个例子，我们现在提供一个查询学生信息的服务，但是我们希望记录有谁进行了这个查询。如果按照传统的 OOP 的实现的话，那我们实现了一个查询学生信息的服务接口(StudentInfoService)和其实现 类 （StudentInfoServiceImpl.java），同时为了要进行记录的话，那我们在实现类(StudentInfoServiceImpl.java)中要添加其实现记录的过程。这样的话，假如我们要实现的服务有多个呢？那就要在每个实现的类都添加这些记录过程。这样做的话就会有点繁琐，而且每个实现类都与记录服务日志的行为紧耦合，违反了面向对象的规则。那么怎样才能把记录服务的行为与业务处理过程中分离出来呢？看起来好像就是查询学生的服务自己在进行，但却是背后日志记录对这些行为进行记录，并且查询学生的服务不知道存在这些记录过程，这就是我们要讨论 AOP 的目的所在。AOP 的编程，好像就是把我们在某个方面的功能提出来与一批对象进行隔离，这样与一批对象之间降低了耦合性，可以就某个功能进行编程。

# 综上所述：面向切面编程就是通过预编译和运行期动态代理实现给程序动态统一添加功能的一种技术。它所面对的是处理过程中某个步骤或阶段，以获得逻辑过程中各部分之间低耦合性的隔离效果

联想一下切面包、地板测量

# 举个例子

比如老大给你派了任务：统计一下当前所有函数谁耗时最长

一般思路

function test() {
    var stat;
    alert(2)
    var end;
    console.log(end - start)
}
1
2
3
4
5
6

经过分析这样很难受，1 是变量冲突；2 是还的每个函数这样重复；很蓝瘦 😣

于是可以这样写：

function test() {
    alert(2)
}
Function.prototype.before = function(fn) {
    //把this保存；以便后面出现问题好拿到this的缓存
    var __self = this;
    fn()
    __self.apply(this, arguments)
}
Function.prototype.after = function(fn) {
    //把this保存；以便后面出现问题好拿到this的缓存
    var __self = this;
    //after先执行本身this，再执行回调
    __self.apply(this, arguments)
    fn()
}
test.before(function() {
    alert(1)
})
test.after(function() {
    alert(3)
}) alert(3)
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

但是默认函数会执行了两遍，test 作为中转

before 回调和 before 一起送到 after 去

after after 和 test 一起送到 before(after 可以写到前面)

function test() {
    alert(2)
}
Function.prototype.before = function(fn) {
    //把this保存；以便后面出现问题好拿到this的缓存
    var __self = this;
    return function() {
        //由于this改变，为以后方便拓展所以fn
        fn.apply(this, arguments)
        __self.apply(this, arguments)
    }
}
Function.prototype.after = function(fn) {
    //把this保存；以便后面出现问题好拿到this的缓存
    var __self = this;
    //after先执行本身this，再执行回调
    __self.apply(this, arguments)
    fn.apply(this, arguments)
}
test.before(function() {
    alert(1)
}).after(function() {
    alert(3)
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

这样就可以了，整个顺序是 挂载 self（test）执行 before 回调 执行 self after 自己执行回调

我们可以再加一些验证

//统计一下当前所有函数谁耗时最长

function test() {
    alert(2)
    return "me"
}
Function.prototype.before = function(fn) {
    //把this保存；以便后面出现问题好拿到this的缓存
    var __self = this;
    return function() {
        //由于this改变，为以后方便拓展所以fn
        if (fn.apply(this, arguments) == false) {
            return false
        }
        return __self.apply(this, arguments)
    }
}
Function.prototype.after = function(fn) {
    //把this保存；以便后面出现问题好拿到this的缓存
    var __self = this;
    //after先执行本身this，再执行回调
    var result = __self.apply(this, arguments)
        //上一个函数传过来的值
    if (result == false) {
        return false
    }
    fn.apply(this, arguments)
    return result;
}
test.before(function() {
    alert(1)
}).after(function() {
    alert(3)
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

# 其他案例

在进行埋点时也会用到，可以观看一些例子 (opens new window)

← 初探 System.js →