Применение АОП в JavaScript

JavaScript
Применение АОП в JavaScript

1. Введение

АОП (Аспектно-ориентированное программирование) означает Аспектно-ориентированное программирование, технологию, реализующую унифицированное обслуживание программных функций с помощью прекомпиляции и динамических агентов во время выполнения. АОП является продолжением ООП и производным от функционального программирования.АОП может использоваться для изоляции различных частей бизнес-логики, тем самым уменьшая связь между различными частями бизнес-логики, улучшая возможность повторного использования программы и повышая эффективность разработки.

image-20190505163919966

2. Базовая реализация

Студенты, которые использовали java spring, должны знать, что существует три типа уведомлений:before(предварительное объявление),after(пост-уведомление),around(объемное уведомление).

Ниже мы реализуем эти три уведомления, когда js вызывает метод:

до (предварительное уведомление)

Как следует из названия, он выполняется перед вызовом функции

Function.prototype.before = function (beforefun) {
  var _orgin = this;    // 保存原函数引用
  return function () { // 返回包含了原函数和新函数的"代理函数"
    beforefun.apply(this, arguments); // 执行新函数，修正this
    return _orgin.apply(this, arguments); // 执行原函数
  }
};

var originFun = function(val){
  console.log('原型函数: '+val);
}

var newFun = originFun.before(function(){
  // 传入函数调用前处理方法
  console.log('before: ' + new Date().getTime())
})

newFun("测试前置通知");

// 调用结果
// before: 1557047939699
// 原型函数: 测试前置通知

после (опубликовать уведомление)

В отличие от предыдущего, выполняется после вызова функции

Function.prototype.after = function (afterfun) {
  var _orgin = this;    // 保存原函数引用
  return function () { // 返回包含了原函数和新函数的"代理函数"
    var ret = _orgin.apply(this, arguments); // 执行原函数
    afterfun.apply(this, arguments); // 执行新函数，修正this
    return ret;
  }
};

var originFun = function(val){
  console.log('原型函数: '+val);
}

var newFun = originFun.after(function(){
  // 传入函数调用前处理方法
  console.log('after: ' + new Date().getTime())
})

newFun("测试后置通知");

// 调用结果
// 原型函数: 测试前置通知
// after: 1557047997647

вокруг (объемное уведомление)

Выполнять до и после выполнения метода

// 利用前面的before、after方法实现
Function.prototype.around = function(beforeFun, afterFun) {
	var _orgin = this;
	return function() {
		return _orgin.before(beforeFun).after(afterFun).apply(this, arguments);
	}
}

3. АОП сталкивается с декораторами

JS наконец-то добавил в предложение ES7 функцию декоратора, которая используется для изменения поведения класса, но теперь браузер ее не поддерживает, и для конвертации нужно использовать Babel.Когда АОП комбинируется с декоратором, он будет дать Что мы приносим?

Ведение журнала

За счет комбинации АОП и декоратора очень удобно записывать лог или записывать время выполнения функции

class Person {
  @log
  say(nick) {
    return `hi ${nick}`;
  }
}

function log(target, name, decriptor){
  var _origin = descriptor.value;
  descriptor.value = function(){
    console.log(`Calling ${name} with `, argumants);
    return _origin.apply(null, arguments);
  };

  return descriptor;
}

var person = new Person();
person.say('小明');

Определить статус входа пользователя

class User {
  @checkLogin
  getUserInfo() {
    console.log('获取用户信息')
  }
}

// 检查用户是否登录
function checkLogin(target, name, descriptor) {
  let method = descriptor.value
  descriptor.value = function (...args) {
    // 校验方法，假设这里可以获取到用户名/密码
    if (validate(args)) {
      method.apply(this, args)
    } else {
      console.log('没有登录，即将跳转到登录页面...')
    }
  }
}

let user = new User()
user.getUserInfo()

4. АОП в React

Типичным примером использования идей АОП в реакции являются компоненты более высокого порядка (HOC), см. следующий пример.

function HOCComp(WrappedComponent){
  return class HOC extends Component {
    render(){
      const newProps = {param: 'HOC'};
      return <div>
        <WrappedComponent {...this.props} {...newProps}/>
      </div>
    }
  }
}

@HOCComp
class OriginComponent extends Component {
  render(){
    return <div>这是原始组件{this.props.param}</div>
  }
}

В приведенном выше примере новые реквизиты определяются в HOCComp и передаются дочерним компонентам. Мы также можем обработать некоторые реквизиты в компоненте OriginComponent или переупаковать внешний слой OriginComponent. Нет необходимости модифицировать внутренние компоненты, сохраняя функциональную развязку.

5. Резюме

Идеи АОП используются во многих фреймворках и проектах, включая высокоуровневые компоненты React, ведение журналов, проверку входа в систему, промежуточное ПО Redux и т. д. В процессе разработки он должен дополнять ООП для повышения надежности и ремонтопригодности программного обеспечения.

использованная литература

сегмент fault.com/ah/119000001…

blog.CSDN.net/QQ_21460229…

Категории