關(guān)于AOP在JS中的實(shí)現(xiàn)與應(yīng)用詳解
1.AOP介紹
簡(jiǎn)介
AOP (面向切面編程),縮寫為Aspect Oriented Programming,意為:面向切面編程,通過(guò)預(yù)編譯方式和運(yùn)行期動(dòng)態(tài)代理實(shí)現(xiàn)程序功能的統(tǒng)一維護(hù)的一種技術(shù)。AOP是OOP的延續(xù),是軟件開發(fā)中的一個(gè)熱點(diǎn),也是JAVA 中Spring框架的一個(gè)重要內(nèi)容,是函數(shù)式編程的一種衍生范型。利用AOP可以對(duì)業(yè)務(wù)邏輯的各個(gè)部分進(jìn)行隔離,從而使得業(yè)務(wù)邏輯各部分之間的耦合度降低,提高程序的可重用性,同時(shí)提高了開發(fā)的效率。
主要功能
- 日志記錄
- 性能統(tǒng)計(jì)
- 安全控制
- 事務(wù)處理
- 異常處理等等。
主要意圖
將日志記錄,性能統(tǒng)計(jì),安全控制,事務(wù)處理,異常處理等代碼從業(yè)務(wù)邏輯代碼中劃分出來(lái),通過(guò)對(duì)這些行為的分離,我們希望可以將它們獨(dú)立到非指導(dǎo)業(yè)務(wù)邏輯的方法中,進(jìn)而改變這些行為的時(shí)候不影響業(yè)務(wù)邏輯的代碼。
注:請(qǐng)慎重的在JS的中使用AOP!因?yàn)椴糠諮S的方法是異步的。
必要時(shí)使用ES7中的async/await/Promise,以保證代碼的順序執(zhí)行。
2.AOP在JS中的實(shí)現(xiàn)原理
js中aop的實(shí)現(xiàn)原理主要依靠Function的兩個(gè)函數(shù):apply和call。
- apply函數(shù)
Function.apply(obj, args);
apply方法能劫持另外一個(gè)對(duì)象的方法,繼承另外一個(gè)對(duì)象的屬性
Function.apply(obj, args)方法能接收兩個(gè)參數(shù)
obj:這個(gè)對(duì)象將代替Function類里this對(duì)象
args:這個(gè)是數(shù)組,它將作為參數(shù)傳給Function(args–>arguments)
利用Function.apply()的參數(shù)數(shù)組化來(lái)提升程序的性能
示例:
function dosomething(a,b,c){ console.log('do something.', a, b, c); // 預(yù)期結(jié)果: do something. see say run } let something = ['see', 'say', 'run']; dosomething.apply(this, something);
call函數(shù)
Function.call(obj, arg, arg, ...);1
示例:
function dosomething(a,b,c){ console.log('do something.', a, b, c); // 預(yù)期結(jié)果: do something. see say run } dosomething.call(this, 'see', 'say', 'run');
推薦:使用apply函數(shù)。call函數(shù)和apply函數(shù)的效果是一樣,但是call函數(shù)的參數(shù)不夠靈活,在寫法上參數(shù)無(wú)法靈活伸縮;apply函數(shù),只需要把參數(shù)放到數(shù)組里即可。apply比call函數(shù)更適合在項(xiàng)目實(shí)際開發(fā)中使用,并且apply比call的性能要好。
3.AOP在JS中的實(shí)現(xiàn)
從事過(guò)Java Web開發(fā)的童鞋,一定用過(guò)Spring框架。在Spring的框架中有before(前置通知)、after(后置通知)、around(環(huán)繞通知)。
今天我們?cè)贘S中實(shí)現(xiàn)的這三種通知。
1. before(前置通知)
before函數(shù),用來(lái)實(shí)現(xiàn)函數(shù)的前置通知。在目標(biāo)函數(shù)的前面執(zhí)行一些前置操作。
// AOP 前置通知函數(shù)聲明 /** * 給方法加入前置切片函數(shù) * 可以在執(zhí)行方法之前執(zhí)行一些操作, * 前置切片的返回值為false時(shí),不影響原方法的執(zhí)行 * @param func {Function} 被前置執(zhí)行的函數(shù) * @return {Function} 加入前置通知的函數(shù) */ Function.prototype._before = function(func){ var __self = this; return function(){ func.apply(__self, arguments); return __self.apply(__self, arguments); } } // 代碼 function a(){ console.log('I\'m a'); } a = a._before(function(){ console.log('before'); }); a(); // 結(jié)果: // before // I'm a
2. after(后置通知)
after函數(shù),用來(lái)實(shí)現(xiàn)函數(shù)的后置通知。在目標(biāo)函數(shù)的后面面執(zhí)行一些后置操作。
// AOP 后置通知函數(shù)聲明 /** * 給方法加入后置切片函數(shù) * 可以在執(zhí)行方法之之后執(zhí)行一些操作 * 后置切片的返回值為false時(shí),不影響原方法的執(zhí)行 * @param func {Function} 被后置執(zhí)行的函數(shù) * @return {Function} 加入后置通知的函數(shù) * @constructor */ Function.prototype._after = function(func){ var __self = this; return function(){ var ret = __self.apply(__self, arguments); func.apply(__self, arguments); return ret; } } // 代碼 function b(){ console.log('I\'m b'); } b = b._after(function(){ console.log('after'); }); b(); // 結(jié)果: // I'm b // after
3. around(環(huán)繞通知)
在around函數(shù)中,引入了一個(gè)JoinPoint對(duì)象。JoinPoint對(duì)象封裝了目標(biāo)函數(shù)和目標(biāo)函數(shù)的參數(shù)。在調(diào)用JoinPoint對(duì)象的invoke函數(shù)時(shí),會(huì)去調(diào)用原來(lái)的目標(biāo)函數(shù)。在調(diào)用invoke時(shí),如果需要改變目標(biāo)函數(shù)的this對(duì)象,需要將對(duì)象傳入到invoke的參數(shù)中。around函數(shù),可以在目標(biāo)函數(shù)的前面和后面隨意加入邏輯代碼,也可以根據(jù)條件判斷是否執(zhí)行目標(biāo)函數(shù)。
// AOP 環(huán)繞通知函數(shù)聲明 /** * 切入點(diǎn)對(duì)象 * 不允許切入對(duì)象多次調(diào)用 * @param obj 對(duì)象 * @param args 參數(shù) * @constructor */ function JoinPoint(obj, args){ var isapply = false; // 判斷是否執(zhí)行過(guò)目標(biāo)函數(shù) var result = null; // 保存目標(biāo)函數(shù)的執(zhí)行結(jié)果 this.source = obj; // 目標(biāo)函數(shù)對(duì)象 this.args = args; // 目標(biāo)函數(shù)對(duì)象傳入的參數(shù) /** * 目標(biāo)函數(shù)的代理執(zhí)行函數(shù) * 如果被調(diào)用過(guò),不能重復(fù)調(diào)用 * @return {object} 目標(biāo)函數(shù)的返回結(jié)果 */ this.invoke = function(thiz){ if(isapply){ return; } isapply = true; result = this.source.apply(thiz || this.source, this.args); return result; }; // 獲取目標(biāo)函數(shù)執(zhí)行結(jié)果 this.getResult = function(){ return result; } } /** * 方法環(huán)繞通知 * 原方法的執(zhí)行需在環(huán)繞通知方法中執(zhí)行 * @param func {Function} 環(huán)繞通知的函數(shù) * 程序會(huì)往func中傳入一個(gè)JoinPoint(切入點(diǎn))對(duì)象, 在適當(dāng)?shù)臅r(shí)機(jī) * 執(zhí)行JoinPoint對(duì)象的invoke函數(shù),調(diào)用目標(biāo)函數(shù) * * @return {Function} 切入環(huán)繞通知后的函數(shù), */ Function.prototype._around = function(func){ var __self = this; return function(){ var args = [new JoinPoint(__self, arguments)]; return func.apply(this, args); } } // 代碼 var isAdmin = true; function c(){ console.log('show user list'); } c = c._around(function(joinpoint){ if(isAdmin){ // 滿足條件時(shí),執(zhí)行目標(biāo)函數(shù) console.log('is admin'); joinpoint.invoke(this); } }); c(); // 結(jié)果 // if isAdmin == true // is admin // show user list // if isAdmin == false //
4.AOP在JS中的應(yīng)用
AOP在數(shù)據(jù)庫(kù)方面的應(yīng)用
- 記錄sql的執(zhí)行記錄(AOP的前置通知)
- 記錄sql的執(zhí)行時(shí)間(AOP的環(huán)繞通知)
- sql執(zhí)行完后自動(dòng)釋放連接(AOP的環(huán)繞通知)
本人基于NodeJS寫了一個(gè)關(guān)系型數(shù)據(jù)庫(kù)持久層框架——Ebatis。在Ebatis中,使用了AOP思想,完美解決了對(duì)sql執(zhí)行記錄,性能等信息的監(jiān)控,并且可以自動(dòng)釋放連接。
有興趣的可以使用我寫的Ebatis框架。
Ebatis相當(dāng)于Java上的Mybatis,像mybatis一樣,支持動(dòng)態(tài)sql,支持事務(wù),配置簡(jiǎn)單。目前只支持Mysql數(shù)據(jù)庫(kù),后續(xù)兼容 Postgresql,SqlServer,Sqlite 等其他關(guān)系型數(shù)據(jù)庫(kù)。
GitHub地址 :https://github.com/muzin/ebatis
或者
Npm地址:https://www.npmjs.com/package/ebatis
或者
npm install ebatis1
后續(xù),加入AOP在JS中的應(yīng)用的示例代碼~~~
就先到這~
總結(jié)
以上就是這篇文章的全部?jī)?nèi)容了,希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,謝謝大家對(duì)腳本之家的支持。
- 使用AOP改善javascript代碼
- Springboot 使用 JSR 303 對(duì) Controller 控制層校驗(yàn)及 Service 服務(wù)層 AOP 校驗(yàn) 使用消息資源文件對(duì)消息國(guó)際化
- javascript AOP 實(shí)現(xiàn)ajax回調(diào)函數(shù)使用比較方便
- 初識(shí)SmartJS - AOP三劍客
- JavaScript實(shí)現(xiàn)AOP詳解(面向切面編程,裝飾者模式)
- Javascript aop(面向切面編程)之a(chǎn)round(環(huán)繞)分析
- JavaScript之AOP編程實(shí)例
- JavaScript AOP編程實(shí)例
- JavaScript中AOP的實(shí)現(xiàn)與應(yīng)用
相關(guān)文章
低代碼從0到1創(chuàng)建小程序項(xiàng)目詳解流程
低代碼作為開發(fā)工具類的產(chǎn)品,需要有從0到1體系化的教程才可以,而且還得有教師進(jìn)行輔助。否則,學(xué)習(xí)低代碼是有難度的,入門很難。因?yàn)榇蠹伊?xí)慣了用代碼編程,一下子過(guò)度到可視化編程,有一個(gè)思路上的轉(zhuǎn)變2022-08-08JavaScript設(shè)計(jì)模式組合設(shè)計(jì)模式案例
這篇文章主要介紹了JavaScript設(shè)計(jì)模式組合設(shè)計(jì)模式案例,組合設(shè)計(jì)模式是用于將多個(gè)部分通過(guò)組合的方式行成一個(gè)整體,更多相關(guān)內(nèi)容需要的小伙伴可以參考一下2022-06-06Listloading.js移動(dòng)端上拉下拉刷新組件
這篇文章主要介紹了Listloading.js移動(dòng)端上拉下拉刷新組件的相關(guān)資料,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2016-08-08詳解ant-design-pro使用qiankun微服務(wù)
這篇文章主要介紹了ant-design-pro使用qiankun微服務(wù)詳解,其實(shí)微服務(wù)需要有主應(yīng)用和子應(yīng)用,?一個(gè)子應(yīng)用可以配置多個(gè)相關(guān)聯(lián)的主應(yīng)用,配置方法都是一樣的,對(duì)ant-design-pro微服務(wù)配置相關(guān)知識(shí),感興趣的朋友一起看看吧2022-03-03js類定義函數(shù)時(shí)用prototype與不用的區(qū)別示例介紹
沒(méi)有使用prototype的方法相當(dāng)于類的靜態(tài)方法,相反,使用prototype的方法相當(dāng)于類的實(shí)例方法,不許new后才能使用2014-06-06javascript 觸發(fā)HTML元素綁定的函數(shù)
只能觸發(fā)函數(shù)的執(zhí)行,并不能完全模擬出實(shí)際的點(diǎn)擊。2010-09-09js前端實(shí)現(xiàn)登錄拼圖驗(yàn)證功能
行為驗(yàn)證碼通過(guò)用戶的操作來(lái)完成驗(yàn)證,常見的行為驗(yàn)證碼有拖動(dòng)式和點(diǎn)觸式,下面這篇文章主要給大家介紹了關(guān)于js前端實(shí)現(xiàn)登錄拼圖驗(yàn)證功能的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-02-02