資訊專欄INFORMATION COLUMN
摘要：最近在前端開發(fā)的過程中踩了不少坑，先記錄下來，往后整理路由實(shí)例更新里每一次進(jìn)行路由導(dǎo)航，對應(yīng)路由的組件都會生成一個新的實(shí)例簡稱，不注意這一點(diǎn)話會掉坑。原因就是此時路由中的不再是第一次創(chuàng)建監(jiān)聽時指向的了。
最近在前端開發(fā)的過程中踩了不少坑，先記錄下來，往后整理
路由實(shí)例更新vue.js里每一次進(jìn)行路由導(dǎo)航，對應(yīng)路由的vue.js組件都會生成一個新的vue實(shí)例(簡稱vm)，不注意這一點(diǎn)話會掉坑。
比如在/home路由里，在mounted()中，我在window下監(jiān)聽了一個鍵盤事件，為了避免事件重復(fù)綁定多次，我設(shè)立一個全局變量來標(biāo)記創(chuàng)建的狀態(tài)，只有第一次進(jìn)入時才創(chuàng)建監(jiān)聽事件。
if(!window.keyupFlag){
let myFunc = ()=>{console.log(this.$refs.input1)}; //這里用箭頭函數(shù)能直接在函數(shù)內(nèi)拿到指向當(dāng)前的vm的this
window.addEventListener("keyup",myFunc);
window.keyupFlag = 1;
}
但是這樣會導(dǎo)致一個問題，在我跳轉(zhuǎn)到別的路由，比如/about后在跳轉(zhuǎn)回/home，我在myFunc函數(shù)中this.$refs.input1就會返回undefined。
原因就是此時/home路由中的vm不再是第一次創(chuàng)建監(jiān)聽時this指向的vm了。
那么轉(zhuǎn)換思路，改成每次進(jìn)入/home都創(chuàng)建監(jiān)聽事件，且在創(chuàng)建前先清除之前創(chuàng)立的事件。
以及要注意的是，清除事件的target.removeEventListener(type, listener[, options]);，其中傳入的參數(shù)要和創(chuàng)建時的一致，且type和listener這兩個參數(shù)都是必須的，具體的可以參閱MDN文檔
這里我選擇用vuex來保存監(jiān)聽的回調(diào)函數(shù)
let myFunc = ()=>{console.log(this.$refs.input1)};
let oldMyFunc = this.$store.state.myFunc; //第一次進(jìn)入/home時這里還沒有被myFunc賦值,第二次進(jìn)入路由時就有正確的值了
window.removeEventListener("keyup",oldMyFunc);
window.addEventListener("keyup",myFunc);
this.$store.commit("setMyFunc",myFunc);
使用Axios發(fā)起POST請求時，產(chǎn)生OPTIONS請求問題
原因是跨域發(fā)起復(fù)雜請求時，按照新的標(biāo)準(zhǔn)瀏覽器會先發(fā)起一個預(yù)檢請求OPTIONS請求來測試請求是否能被服務(wù)器接受，如果服務(wù)端對此沒有相應(yīng)的處理，就會出現(xiàn)請求失敗的問題。
具體的方案待施工，先丟幾個參考
http://www.ruanyifeng.com/blo...
https://juejin.im/post/5c68b2...
https://segmentfault.com/a/11...
相關(guān)的教程很多，但是有兩點(diǎn)鮮有提及
授權(quán)服務(wù)端要設(shè)置請求中的回調(diào)域名或ip地址
當(dāng)使用code來請求access_token時，發(fā)起的請求頭Header中要設(shè)置"Authorization": ...,
具體的Authorization值可能不同的服務(wù)端會有區(qū)別，我的項(xiàng)目中用的是
//BASE64編碼字符串"clientId:clientSecret" "Basic " + window.btoa(clientId + ":" + clientSecret);
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/104996.html
摘要：本文近日施工中與各位分享近期筆者寫一個較繁復(fù)的輪子的過程，以及其中的踩坑與思考。拿常用的庫作比較的話，這個庫性質(zhì)類似這種輔助的工具庫，這種范式有函數(shù)式和響應(yīng)式編程的味道，具體是屬于數(shù)據(jù)流編程的一種。 （本文近日施工中...） 與各位分享近期筆者寫一個較繁復(fù)的輪子的過程，以及其中的踩坑與思考。若有更佳實(shí)踐，還望不吝賜教。 要素察覺：目錄結(jié)構(gòu)， git 分支策略， TS 與 Lint ，多...
摘要：在互聯(lián)網(wǎng)時代，建筑業(yè)數(shù)據(jù)的價值和重要性將逐步體現(xiàn)，充分運(yùn)用大數(shù)據(jù)制定企業(yè)發(fā)展戰(zhàn)略進(jìn)行戰(zhàn)略決策。此外，在智慧城市智能建筑方面需要大量采用物聯(lián)網(wǎng)技術(shù)。1． 大數(shù)據(jù)技術(shù)大數(shù)據(jù)是以容量大、類型多、存取速度快、應(yīng)用價值高為主要特征的數(shù)據(jù)集合。建筑業(yè)是產(chǎn)生大量數(shù)據(jù)的行業(yè)之一，又是數(shù)據(jù)電子化程度較低的行業(yè)。在互聯(lián)網(wǎng)＋時代，建筑業(yè)數(shù)據(jù)的價值和重要性將逐步體現(xiàn)，充分運(yùn)用大數(shù)據(jù)制定企業(yè)發(fā)展戰(zhàn)略、進(jìn)行戰(zhàn)略決策。研...
摘要：踩坑記錄前端請求如果攜帶信息，那么后端不能為知識點(diǎn)前端發(fā)出的請求如果是附帶身份驗(yàn)證而后端的如果設(shè)置的是那么這個請求會失敗，在預(yù)請求時會被攔截下來。來源文檔踩坑記錄在一個文件上傳的接口出現(xiàn)問題。 踩坑記錄-前端請求如果攜帶Cookie信息，那么后端Access-Control-Allow-Origin不能為* 知識點(diǎn) 前端發(fā)出的請求如果是附帶身份驗(yàn)證（withCredentials：tr...
摘要：本文主要針對小程序無聊廣場的前端開發(fā)內(nèi)容做總結(jié)，記錄常見的一些老生常談的進(jìn)階手法，對小程序中的動畫音頻等踩坑做出解決方案。 背景 一個交互不復(fù)雜，對刷新頻率和動畫效果要求不高的小游戲，不需要使用canvas主導(dǎo)的解決方案，使用dom操作一樣可以完成。節(jié)省了cocos creater的學(xué)習(xí)成本，值得一試。本文主要針對小程序無聊廣場的前端開發(fā)內(nèi)容做總結(jié)，記錄常見的一些老生常談的進(jìn)階手法，對...
閱讀 1950·2021-11-15 11:46
閱讀 1163·2021-10-26 09:49
閱讀 1898·2021-10-14 09:42
閱讀 3432·2021-09-26 09:55
閱讀 876·2019-08-30 13:58
閱讀 1098·2019-08-29 16:40
閱讀 3523·2019-08-26 10:27
閱讀 655·2019-08-23 18:18
