АОП в javascript

JavaScript

Введение

занят чтениемmegaloкода (в дальнейшем будет серия, посвященнаяmegaloИсходный код весьма интересен, можете с нетерпением ждать). Чувствоватьmegalo,mpvueТакже хорошо дождаться кросс-энд фреймворка апплета,weexБудь то кроссплатформенный фреймворк, суть схожа, обаforkполучил копиюvueПриходите и измените его с помощьюvueвозможности, зависящие от платформыapiЗаменил на свой.

Среди них есть фрагмент кода, который мне кажется очень интересным:

Vue.prototype._l = aop(Vue.prototype._l, {
    after: afterRenderList
  });

Приведенный выше код,aopРасширяет прототип Vue на_lметод, когда_lПосле выполнения метода выполнитеafterRenderList.

Так что жеAOP ?

Что такое АОП

AOP(Аспектно-ориентированное программирование): Аспектно-ориентированное программирование является дополнением к объектно-ориентированному программированию (ООП). Объектно-ориентированное программирование — это вертикальное программирование, наследование, инкапсуляция и полиморфизм, тогда как аспектно-ориентированное программирование дополняет объектно-ориентированное программирование.

существуетOOP, мы ориентируемся наДобрый(класс), тогда как в АОП нас интересуетраздел.

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

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

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

Итак, как реализовать АОП в javascript?

Реализовано с помощью функций высшего порядка в рамках ES3.

чтоФункции высшего порядка?

Функции высшего порядка принимают одну или несколько функций и возвращают функцию.

Мы часто используем следующие функции высшего порядка:once, debounce, memoize, fluentЖдать

// 原函数
var takePhoto =function(){
 console.log('拍照片');
}
// 定义 aop 函数
var after=function( fn, afterfn ){
 return function(){
 let res = fn.apply( this, arguments );
 afterfn.apply( this, arguments );
 return res;
 }
}
// 装饰函数
var addFilter=function(){
 console.log('加滤镜');
}
// 用装饰函数装饰原函数
takePhoto=after(takePhoto,addFilter);
takePhoto();

Еще одинfluentпример:

function fluent(fn) {
 return function(...args) {
 fn.apply(this, args)
 return this
 }
}
function Person() {}
Person.prototype.setName = fluent(function(first, last) {
 this.first = first
 this.last = last
})
Person.prototype.sayName = fluent(function() {
 console.log(this.first, this.last)
})
var person = new Person()
person
 .setName('Jone', 'Doe')
 .sayName()
 .setName('John', 'Doe')
 .sayName()

Это наш стандартный ненавязчивый подход к динамическому расширению свойств: расширение требуемой функциональности поверх выполнения исходного кода. Фактически,megaloАОП тоже пройден高阶函数самореализовался.

          function aop(fn, options) {
            if (options === void 0) options = {};
            
            var before = options.before;
            var after = options.after;
            return function () {
              var args = [],
                  len = arguments.length;
              while (len--) {
                args[len] = arguments[len];
              }var self = this;
              
              if (before) {
                before.call.apply(before, [self, args].concat(args));
              }
              
              var ret = fn.call.apply(fn, [self].concat(args));
              
              if (after) {
                after.call.apply(after, [self, ret].concat(args, [ret]));
              }
              
              return ret;
            };
          }

надaopфункция, даст исходную функциюfnрасширятьbeforeа такжеafterметод.

Реализация декораторов в ES5

Представлено в ES5Object.defineProperty, мы можем проще добавлять свойства к объектам:

let takePhoto = function () {
 console.log('拍照片');
}
// 给 takePhoto 添加属性 after
Object.defineProperty(takePhoto, 'after', {
 writable: true,
 value: function () {
 console.log('加滤镜');
 },
});
// 给 takePhoto 添加属性 before
Object.defineProperty(takePhoto, 'before', {
 writable: true,
 value: function () {
 console.log('打开相机');
 },
});
// 包装方法
let aop = function (fn) {
 return function () {
 fn.before()
 fn()
 fn.after()
 }
}
takePhoto = aop(takePhoto)
takePhoto()

Реализация декоратора на основе цепочки прототипов и классов


class Test {
 takePhoto() {
 console.log('拍照');
 }
}
// after AOP
function after(target, action, fn) {
 let old = target.prototype[action];
 if (old) {
 target.prototype[action] = function () {
 let self = this;
 fn.bind(self);
 fn(handle);
 }
 }
}
// 用 AOP 函数修饰原函数
after(Test, 'takePhoto', () => {
 console.log('添加滤镜');
});
let t = new Test();
t.takePhoto();

Реализация декораторов с помощью декораторов ES7

Предложение Decorator претерпело серьезные изменения и еще не доработано, и я не знаю, изменится ли синтаксис снова.

Сценарий: отчеты об эффективности

Типичным сценарием является запись и отчет о трудоемких данных о производительности асинхронного запроса:

Сценарий: обработка исключений

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

Например, window.onerror не может перехватывать асинхронные ошибки, такие как setTimeout, поэтому кто-то может сделать это:

var _setTimeout = window.setTimeout
window.setTimeout = function(cb, timeout) {
 var args = Array.prototype.slice.call(arguments, 2)
 return _setTimeout(function() {
 try {
 cb(...args)
 } catch (error) {
 // 对 error 进行加工后上报给服务器
 reportError(e)
 throw error
 }
 }, timeout)
}

ByteDance набрал много людей

ByteDance (Ханчжоу|Пекин|Шанхай) набирает много людей, льготы супер, уровень зарплаты НИМ, без часов на работе, ежедневный полдник, неограниченное количество бесплатных закусок, бесплатное трехразовое питание (читаю меню, волосатые краб, морское ушко, морской гребешок, морепродукты на гриле, кусочки рыбы, говяжья вырезка с черным перцем, говядина карри, острые раки), бесплатный тренажерный зал, сенсорная панель начального уровня с 15-дюймовым верхом с новым MBP и ежемесячное пособие на аренду жилья. В этот раз возможностей действительно много.Через год штат НИОКР увеличится в n раз.Техническая атмосфера хорошая,больших коров много,сверхурочных меньше.О чем вы сомневаетесь? Отправьте свое резюме по электронной почте ниже, сейчас!

Только небольшая часть ссылок jd выглядит следующим образом, более приветствуются добавление WeChat ~

Фронтенд JD:job.headline.com/is/B JM4работа…

бэкэнд JD:job.headline.com/is/bj jj ts работа…

тест JD:job.toutiao.com/Yes/B Ноутбук JF V9…

Продукт JD:job.toutiao.com/yes/не JB GV8job…

Стажер фронтенда:job.headline.com/is/BJ6NJ Работа…

Бэкенд-стажер:job.headline.com/is/BJ Diary RK работа…

Продолжать набирать большое количество интерфейсных, серверных, клиентских, тестовых, продуктовых, стажировочных агентств.

Резюме присылайте на dujuncheng@bytedance.com, предлагайте добавить WeChat dujuncheng1, можно поболтать о жизни, укажите, пожалуйста, откуда вы из Наггетса и где хотите разместить

Категории