鍟板棪浼楁墍鍛ㄧ煡锛屽仛C绔骇鍝佸鐢ㄦ埛浣撻獙鐨勮姹傛槸鏋侀珮鐨勩€傚悓鏃讹紝浜у搧钀藉湴鏄惁鍒颁綅锛屾姇璧勫洖鎶ユ槸鍚︽垚姝ｆ瘮锛屾垚涓轰簡涓€涓洟闃熻兘鍚﹀緱鍒板洖鎶ョ殑鍏抽敭鍥犵礌锛堣繖鏄渶瀹炴垬杞欢鍥㈤槦鐨勨€滅湡瀹炶瘔姹備箣涓€鈥濆搱鍝堝搱锛夈€傝櫧鐒跺墠鏈熶細鏈夊ぇ閲忕殑鐢ㄦ埛璋冪爺鍜屽洖鍗曟敹闆嗭紝鏄庣‘鍝簺鏄敤鎴风殑鍩烘湰闇€姹傦紝鍝簺鏄敤鎴风殑鍏村闇€姹傦紝浣嗘槸浠嶇劧闇€瑕佷竴涓叿浣撶殑銆佸彲閲忓寲鐨勬暟鎹敮鎸佹潵璇勪及鏌愪釜涓氬姟鏄惁婊¤冻鐢ㄦ埛鐨勭湡瀹為渶姹傘€傞渶姹傦紝浠ュ強瀵瑰悗鏈熶骇鍝佽凯浠ｇ殑鍙傝€冪瓑銆傛墍浠ュ熀浜庝互涓婂疄闄呮儏鍐碉紝瀵规暣涓骇鍝佺嚎鍋氫竴涓煁鐐圭殑涓氬姟閲囬泦鏄潪甯告湁蹇呰鐨勩€傚綋鐒讹紝鍋氬煁鐐硅繕鏈夋洿澶氱殑鎰忎箟锛岃繖閲屼笉鍐嶈禈杩般€備笅闈㈠皢瀵圭▼搴忕殑鎵ц杩囩▼杩涜鍏ㄩ潰鐨勫垎鏋愶紝鍚屾椂涔熶細鎻愪緵涓€涓畝鍗曞悎鐞嗙殑鍙噸鐢ㄧ殑绋嬪簭杈撳嚭銆傛劅鍏磋叮鐨勫鎴凤紝鏁鍏虫敞~鉁岀幇鐘剁洰鍓嶆湁3涓骇鍝佷笟鍔＄嚎浜у搧锛屽浜庡墠绔」鐩鐞嗘潵璇达紝鏄垎寮€绠＄悊鐨勶紝鐜版湁涓氬姟涔熶細鏈夋寔缁殑闇€姹傚闀匡紝浠ュ強鏂颁骇鍝佽灏嗗湪浠ュ悗娣诲姞銆備富瑕佷娇鐢╒ue.js@2.0鐗堟湰锛屼絾鏈変竴涓」鐩槸鐢?.0鐗堟湰寮€鍙戠殑銆傞」鐩紑鍙戣凯浠?涓湀锛屼富瑕佷骇鍝佷笟鍔′唬鐮佽秴杩?7涓囪銆傚鎺ョ涓夋柟鏁翠綋鍒嗘瀽娌℃湁鐜版垚鐨勮В鍐虫柟妗堟棦鑳芥弧瓒冲綋鍓嶉渶姹傦紝鍙堣兘婊¤冻鎵╁睍鎬у己鐨勫叧閿绱犮€傚悓鏃讹紝闅愮淇℃伅鐨勬敹闆嗕笉鑳戒氦缁欑涓夋柟銆傜幇鏈夌爜閲忎笉婊¤冻绮惧噯鍗栫偣鏉′欢銆侾V绫绘暟鎹噰闆嗗彲浠ユ殏鏃朵氦缁欎竴瀹氱殑缁熻銆傚彧鏈夎繍钀ユ墠浼氬叧娉ㄨ繖绉嶅ぇ鑰岄€氱敤鐨勬暟鎹紝瀵逛簬鍩嬬偣鐨勭敤鎴峰垎鏋愮矑搴︽洿灏忋€傚煁鐐瑰敖閲忎笉褰卞搷鍏蜂綋鐨勪笟鍔″姛鑳藉拰浠ｇ爜锛岀敋鑷崇粷瀵逛笉褰卞搷銆傚疄闄呴渶姹傛槸浠庣敤鎴烽偅閲屾敹闆嗙殑锛岀矑搴︾粏鍒版寜閽骇鍒€傞〉闈㈣繘鍏ユ椂闂村拰鍋滅暀鏃堕棿锛屽嵆鑾峰彇enterTime鍜宭eaveTime銆傞渶瑕佹湁鏌愪釜椤甸潰鐨勪娇鐢ㄩ噺锛屾煇涓寜閽殑浣跨敤閲忥紝鏌愪釜鐢ㄦ埛鐨勪娇鐢ㄨ建杩癸紝鏌愪釜鏃堕棿娈垫煇涓寜閽殑浣跨敤閲忥紝鐢ㄦ埛娴忚鍣ㄧ殑鍩烘湰淇℃伅.灏嗛渶姹傝浆鍖栦负鏁版嵁涓嬮潰鏄竴鑸渶瑕佹敹闆嗙殑鏁版嵁鐢ㄦ埛淇℃伅褰撳墠鐧诲綍鐢ㄦ埛涓汉淇℃伅eventData//鎿嶄綔浜嬩欢淇℃伅浜嬩欢绫诲瀷锛屾搷浣淒OM鑺傜偣锛屾搷浣滄椂闂达紝鑺傜偣鍚嶇О锛坔tml鑺傜偣鍚嶇О锛夛紝濡備綍鍚姩鑺傜偣鏂囨湰浠ｇ爜涓嶅奖鍝嶇幇鏈変笟鍔★紝闇€瑕佹彁鍙栧畠鍙樻垚浜嗗叕鍏辩被銆備互鍚庡彲鑳借褰曠殑鐢ㄦ埛淇℃伅鍜屽叾浠栨墿灞曚俊鎭簲璇ユ槸澶栭儴鍙闂殑銆傜洰鍓嶄娇鐢ㄧ殑鏄紑婧怳I妗嗘灦锛岄」鐩暣浣撶殑鎸夐挳鑺傜偣閮芥槸鎸夐挳鏍囩锛堥儴鍒嗗彲浠ユ洿鏀癸級銆傛暟鎹褰曞拰鍙戦€侊紝鍙戦€佷笉鑳藉お棰戠箒锛岄渶瑕佷竴涓褰曟暟鎹殑闃熷垪锛岃缃竴涓槇鍊硷紝杈惧埌闃堝€煎氨鍙戦€侊紝娓呴櫎銆備唬鐮佺矖鐣ュ師鍨嬬殑鍩烘湰缁撴瀯classMonitor{constructor(){}/***@description鍒濆鍖栨柟娉曪細*extentData鐢ㄤ簬浼犲叆鍩轰簬涓氬姟鐨勬暟鎹俊鎭紝*router鏄竴涓獀ue-router瀵硅薄锛屽畠杩欓噷鍙互閫氳繃init浼犲叆锛屼篃鍙互鍦ㄥ綋鍓嶇被妯″潡涓洿鎺ュ鍏ワ紝*config涓洪厤缃俊鎭?@param{*}{extentData=null,router=null,config={}}*@memberofMonitor*/init({extentData=null,router=null,config={}}){//TODO//杩欓噷鍙互鍋氫竴浜涙搷浣滄瘮濡傝鐩栭粯璁ら厤缃紝鍒濆鍖栫洃鍚簨浠剁瓑let{vpt}=configthis.vpt=vpt?vpt:this.vptthis.uaHandler()//杩欓噷璇翠竴涓媡his.eventHandler=this.eventCallback.bind(this)//鍏抽敭document.addEventListener('click',this.eventHandler,true)}}濡備綍浣跨敤//杩欓噷鎺ㄨ崘鍦ㄩ」鐩皝瑁呯殑router绠＄悊妯″潡涓娇鐢╥mportMonitorfrom'./monitor'constmonitor=newMonitor()monitor.init({router:router,extentData:{userInfo:{userName:"寮犱笁",account:"13666666666"}}})Monitor绫诲簲璇ユ湁Dataconstructor(){//鍙戦€侀槦鍒楃殑闃堝€紅his.vpt=10//浜嬩欢鑺傜偣绫诲瀷闄愬埗this.limitNodeType=['button']//鐢ㄦ埛娴忚鍣ㄤ俊鎭痶his.uaInfo={}//椤甸潰绾ф暟鎹槦鍒梩his.pageDataQuene=[]//褰撳墠鎿嶄綔闃熷垪IDthis.currentQueneId=null//璇ュ睘鎬х敤浜庝繚瀛榖ind杩斿洖鐨勫尶鍚嶅嚱鏁皌his.eventHandler=null}鍩嬪嚱鏁扮粨鏋勬祻瑙堝櫒淇℃伅璁板綍杩欓噷鍙互鑷畾涔夎幏鍙栨洿澶氫俊鎭紝濡傛灉浠ュ悗闇€瑕侀噰闆嗛灞忓姞杞姐€佺綉閫熸娴嬬瓑鏁版嵁锛屼篃鍙互鍦?***@descriptionua淇℃伅璁板綍*@memberofMonitor*/uaHandler()涓坊鍔爗杩欍€倁aInfo={userAgent:navigator.userAgent,dpiWidth:window.screen.width,dpiHeight:window.screen.height}}璁板綍椤甸潰缁村害淇℃伅锛屽洜涓烘渶缁堜笂浼犵殑鏁版嵁鏄竴涓暣鍚堢殑鏁扮粍瀵硅薄锛屽崟椤规暟鎹窡鍦ㄩ〉闈㈠悗闈紝鍚屼竴涓〉闈㈠湪闃堝€艰寖鍥村唴鍙兘浼氳閲嶅璁块棶锛屾墍浠ラ渶瑕佷竴涓猤uid鏉ユ爣璇嗏€滃綋鍓嶉〉闈⑩€濅互淇濊瘉鍞竴鎬с€俫uid鐢熸垚鏂规硶濡備笅銆備竴鑸湪闃堝€煎唴鍙互淇濊瘉鍞竴鎬э紝娌″繀瑕佹悶寰楀お澶嶆潅銆?***@description鐢熸垚guid锛屽綋鍓嶆搷浣滈槦鍒楃殑鍞竴鏍囪瘑*@returns{*}*@memberofMonitor*/guid(){return'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g,function(c){varr=(Math.random()*16)|0,v=c=='x'?r:(r&0x3)|0x8returnv.toString(16)})}杈惧埌闃堝€奸渶瑕佷笂浼犵幇鏈夋暟鎹苟娓呴櫎鏁版嵁銆備笂浼犵殑鏁版嵁瑕佸澶栧鐞嗭紝鎵€浠ヨ瀵瑰鏆撮湶涓€涓猤et()鏂规硶鑾峰彇鏁版嵁锛宑lear()鐢ㄤ簬娓呴櫎鏁版嵁鑾峰彇鏁版嵁/***@description鐢ㄤ簬鑾峰彇鎿嶄綔闃熷垪澶栭儴*@returns{*}Array[]*@memberofMonitor*/get(){returnthis.pageDataQuene}cleardata/***@description鐢ㄤ簬娓呯┖闃熷垪*@memberofMonitor*/clear(){//TODOthis.pageDataQuene=[]}褰撶劧杩欓噷涔熷彲浠ヤ娇鐢ㄥ唴閮ㄤ笂浼犳暟鎹殑鏂瑰紡锛屽嵆闇€瑕佸紩鍏ユ帴鍙ｈ姹傛柟寮忥紝灏嗘鍔熻兘浜ょ粰Monitor澶勭悊銆傝繖閲屽彧闇€瑕佸湪鍐呴儴鍚屾椂鐩戝惉闃熷垪鍗冲彲锛屽嵆濡傛灉鍙互锛屽彲浠ユ湁涓€涓獀ptHandler鏂规硶/***@descriptionThreshold鐩戝惉锛岃揪鍒伴槇鍊兼椂鍙戦€佹暟鎹?@memberofMonitor*/vptHandler(){if(this.pageDataQuene.length>=this.vpt){this.sendData()//杩欎釜鐢ㄤ簬涓婁紶鏁版嵁涓氬姟銆備笂浼犲悗娓呯┖鏁版嵁锛屽彲浠ユ牴鎹疄闄呮儏鍐佃繘琛屽鐞唥}璁板綍椤甸潰璁块棶鐨勫熀鏈俊鎭痳outer.afterEach(async(to)=>{//绂诲紑鐩戝惉this.updateLeaveTime()//闃堝€肩洃鍚瑃his.vptHandler()//褰撳墠鎿嶄綔椤甸潰鐨勫敮涓€鏍囪瘑is.currentQueneId=this.guid()letinitPageData=[{id:this.currentQueneId,path:to.path,//鍥犱负褰撳墠椤圭洰鐩綍缁撴瀯鍜岃彍鍗曡矾鐢卞懡鍚嶉珮搴︿竴鑷达紝鍙互浣跨敤path鏉ヨ褰晆aInfo锛歵his.uaInfo,pageInfo:{entryTime:this.getTime()//娉ㄦ剰杩欓噷鍙湁enterTime锛屾洿鏂發eaveTime鐨勬椂闂翠氦缁欎笂闈㈢殑updateLeaveTime鏂规硶},...extentData,eventData:[]//Empty浜嬩欢璁板綍}]this.pageDataQuene=this.pageDataQuene.concat(initPageData)//杩藉姞褰撳墠椤甸潰鏁版嵁鍒版搷浣滈槦鍒梷)绂诲紑椤甸潰鐩戝惉鏄畬鎴愪竴涓〉闈㈡暟鎹棴鐜殑鍏抽敭瑕佺礌/***@鎻忚堪椤甸潰绂诲紑鏃堕棿鏇存柊*@memberofMonitor*/updateLeaveTime(){letindex=this.pageDataQuene.findIndex((el)=>el.id==this.currentQueneId)if(index>=0){this.pageDataQuene[绱㈠紩].pageInfo銆俵eaveTime=this.getTime()}}浜嬩欢鐩戝惉浜嬩欢鐩戝惉闇€瑕佷紶閫掞紝eventCallback搴旇鏈夐拡瀵逛笉鍚屼簨浠剁被鍨嬬殑杞彂鏂规硶銆傚綋鐒剁洰鍓嶅彧鑰冭檻鐐瑰嚮浜嬩欢/***@description浜嬩欢鍥炶皟浼犺緭*@param{*}e*@memberofMonitor*/eventCallback(e){if(e.type=='click'){this.clickEventHandler(e)}}鐐瑰嚮浜嬩欢As涓婇潰鎻愬埌锛岀敱浜庢暣涓」鐩噰鐢ㄤ簡缁熶竴鐨刄I妗嗘灦锛屽嚑涔庢墍鏈夌殑鎸夐挳閮戒娇鐢ㄤ簡鏍囧噯鐨勬寜閽爣绛撅紝鎵€浠ュ彲浠ユ牴鎹瓺OM鑺傜偣鑾峰彇濡備笅鏁版嵁杩涜璁板綍銆俢onst{innerText,localName,formAction,type}=ele.target/***@description椤甸潰鐐瑰嚮浜嬩欢闆嗗悎*@param{*}ele浜嬩欢鑺傜偣*@memberofMonitor*/clickEventHandler(ele){const{innerText,localName,formAction,type}=ele.targetletisEv=this.limitNodeType.includes(localName)if(isEv){leteventData=[{innerText,localName,formAction,eleType:type,eventType:'click',clickTime:this.getTime()}]//鎵惧埌褰撳墠椤甸潰鐨別ventData锛岃缃坊鍔犲綋鍓嶆搷浣渓etindex=this.pageDataQuene.findIndex((el)=>el.id==this.currentQueneId)if(index>=0){this.pageDataQuene[index].eventData=this.pageDataQuene[index].eventData.concat(eventData)}}}鐩戝惉浜嬩欢閿€姣侀拡瀵圭壒瀹氬満鏅紝鎴戜滑涓嶉渶瑕佽褰曠敤鎴风殑琛屼负锛屾垜浠彲浠ラ攢姣佺洃鍚簨浠讹紝閬垮厤澶氫綑鐨勬€ц兘娑堣€?/閿€姣佺洃鍚簨浠禿estroy(){document.removeEventListener('click',this.eventHandler,true)}缁撴灉杈撳嚭鑷虫鎴戜滑鍙互寰楀埌濡備笅缁撴瀯鐨勬暟鎹紝鎸夌収闃堝€艰缃殑鏃跺簭涓婁紶脽Summaryofresults浠ヤ笂鎬讳綋鏂规鏍规嵁瀹為檯鍒嗘瀽闇€姹傛儏鍐碉紝浠庢暣浣撳垎鏋愪唬鐮佸疄鐜扳€嬧€嬬殑鏃跺€欙紝缁撳悎椤圭洰鐨勬暣浣撶壒鐐癸紝鍚屾椂鍏奸【浣庢垚鏈殑寮€鍙戝拰鎺ュ叆锛屾弧瓒冲悗鏈熺殑鎵╁睍鎬э紝鐢氳嚦杩欎釜鎬濊矾鍙互婊¤冻鍏朵粬鍗曢〉妗嗘灦銆傝繖绉嶇被浼肩殑闇€姹傚湪鍥㈤槦瑙勬ā灏忕殑鏃跺€欏彲鑳戒笉浼氳浜у搧娉ㄦ剰鍒帮紝鑰屼竴浜涙病鏈夌被浼肩粡楠岀殑浜у搧鏃犱粠涓嬫墜锛屼篃涓嶇煡閬撳浣曟敹闆嗗拰灞曠ず銆傚洜姝わ紝寰€寰€鏄」鐩粡鐞嗙洿鎺ュ悜寮€鍙戞彁鍑洪渶姹傦紝骞舵病鏈夊叿浣撶殑鍘熷瀷杈撳嚭銆傝繖鏃跺€欙紝寮€鍙戝氨闇€瑕佷粠鍚勪釜缁村害鍘绘€濊€冮棶棰橈紝鎶婅繖涓€滀竴鍙ヨ瘽闇€姹傗€濊浆鍖栦负宸ヤ綔鍙墽琛岀殑浠ｇ爜鏂规銆備箣涓€傛湰鏂囨秹鍙婄殑閮ㄥ垎浠ｇ爜鍙兘娌℃湁鑰冭檻濂斤紝浠庨棶棰樺垎鏋愮殑瑙掑害鍙兘浼氭湁寰堝鍏朵粬鐨勭湅娉曞拰璁ㄨ銆傛洿澶氱殑鐩殑鏄兂鎶婅繖涓柟娉曞垎浜粰鏇村鐨勫悓浜嬶紙褰撶劧涓嶆槸鏈€濂界殑锛屽搱鍝堝搱鍝堬級锛屾杩庨殢鏃堕€氳繃XDM婊存垜銆備笉瑕佸悵鍟暀涓嬩綘鐨勮剼鍗梆煈?/p>
