成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

前端開發(fā) 踩坑記錄(施工中...)

zsy888 / 669人閱讀

摘要：最近在前端開發(fā)的過程中踩了不少坑，先記錄下來，往后整理路由實(shí)例更新里每一次進(jìn)行路由導(dǎo)航，對(duì)應(yīng)路由的組件都會(huì)生成一個(gè)新的實(shí)例簡稱，不注意這一點(diǎn)話會(huì)掉坑。原因就是此時(shí)路由中的不再是第一次創(chuàng)建監(jiān)聽時(shí)指向的了。

最近在前端開發(fā)的過程中踩了不少坑，先記錄下來，往后整理

路由實(shí)例更新

vue.js里每一次進(jìn)行路由導(dǎo)航，對(duì)應(yīng)路由的vue.js組件都會(huì)生成一個(gè)新的vue實(shí)例(簡稱vm)，不注意這一點(diǎn)話會(huì)掉坑。

比如在/home路由里，在mounted()中，我在window下監(jiān)聽了一個(gè)鍵盤事件，為了避免事件重復(fù)綁定多次，我設(shè)立一個(gè)全局變量來標(biāo)記創(chuàng)建的狀態(tài)，只有第一次進(jìn)入時(shí)才創(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;
    }

但是這樣會(huì)導(dǎo)致一個(gè)問題，在我跳轉(zhuǎn)到別的路由，比如/about后在跳轉(zhuǎn)回/home，我在myFunc函數(shù)中this.$refs.input1就會(huì)返回undefined。
原因就是此時(shí)/home路由中的vm不再是第一次創(chuàng)建監(jiān)聽時(shí)this指向的vm了。

那么轉(zhuǎn)換思路，改成每次進(jìn)入/home都創(chuàng)建監(jiān)聽事件，且在創(chuàng)建前先清除之前創(chuàng)立的事件。
以及要注意的是，清除事件的target.removeEventListener(type, listener[, options]);，其中傳入的參數(shù)要和創(chuàng)建時(shí)的一致，且type和listener這兩個(gè)參數(shù)都是必須的，具體的可以參閱MDN文檔
這里我選擇用vuex來保存監(jiān)聽的回調(diào)函數(shù)

    let myFunc = ()=>{console.log(this.$refs.input1)}; 
    
    let oldMyFunc = this.$store.state.myFunc; //第一次進(jìn)入/home時(shí)這里還沒有被myFunc賦值,第二次進(jìn)入路由時(shí)就有正確的值了
    window.removeEventListener("keyup",oldMyFunc);
    
    window.addEventListener("keyup",myFunc);
    this.$store.commit("setMyFunc",myFunc);
使用Axios發(fā)起POST請(qǐng)求時(shí)，產(chǎn)生OPTIONS請(qǐng)求問題

原因是跨域發(fā)起復(fù)雜請(qǐng)求時(shí)，按照新的標(biāo)準(zhǔn)瀏覽器會(huì)先發(fā)起一個(gè)預(yù)檢請(qǐng)求OPTIONS請(qǐng)求來測試請(qǐng)求是否能被服務(wù)器接受，如果服務(wù)端對(duì)此沒有相應(yīng)的處理，就會(huì)出現(xiàn)請(qǐng)求失敗的問題。
具體的方案待施工，先丟幾個(gè)參考

http://www.ruanyifeng.com/blo...
https://juejin.im/post/5c68b2...
https://segmentfault.com/a/11...

Oauth2.0授權(quán)請(qǐng)求

相關(guān)的教程很多，但是有兩點(diǎn)鮮有提及

授權(quán)服務(wù)端要設(shè)置請(qǐng)求中的回調(diào)域名或ip地址

當(dāng)使用code來請(qǐng)求access_token時(shí)，發(fā)起的請(qǐng)求頭Header中要設(shè)置"Authorization": ...,
具體的Authorization值可能不同的服務(wù)端會(huì)有區(qū)別，我的項(xiàng)目中用的是

//BASE64編碼字符串"clientId:clientSecret"
"Basic " + window.btoa(clientId + ":" + clientSecret);

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/104996.html

相關(guān)文章

  • 2019年我的 TypeScript 輪子這樣寫

    摘要：本文近日施工中與各位分享近期筆者寫一個(gè)較繁復(fù)的輪子的過程，以及其中的踩坑與思考。拿常用的庫作比較的話，這個(gè)庫性質(zhì)類似這種輔助的工具庫，這種范式有函數(shù)式和響應(yīng)式編程的味道，具體是屬于數(shù)據(jù)流編程的一種。 （本文近日施工中...） 與各位分享近期筆者寫一個(gè)較繁復(fù)的輪子的過程，以及其中的踩坑與思考。若有更佳實(shí)踐，還望不吝賜教。 要素察覺：目錄結(jié)構(gòu)， git 分支策略， TS 與 Lint ，多...

    Baaaan 評(píng)論0 收藏0

  • 大數(shù)據(jù)、云計(jì)算、物聯(lián)網(wǎng)如何與建筑融合？

    摘要：在互聯(lián)網(wǎng)時(shí)代，建筑業(yè)數(shù)據(jù)的價(jià)值和重要性將逐步體現(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)用價(jià)值高為主要特征的數(shù)據(jù)集合。建筑業(yè)是產(chǎn)生大量數(shù)據(jù)的行業(yè)之一，又是數(shù)據(jù)電子化程度較低的行業(yè)。在互聯(lián)網(wǎng)＋時(shí)代，建筑業(yè)數(shù)據(jù)的價(jià)值和重要性將逐步體現(xiàn)，充分運(yùn)用大數(shù)據(jù)制定企業(yè)發(fā)展戰(zhàn)略、進(jìn)行戰(zhàn)略決策。研...

    mingzhong 評(píng)論0 收藏0

  • 踩坑記錄-前端請(qǐng)求如果攜帶Cookie信息，那么后端Access-Control-Allow-Ori

    摘要：踩坑記錄前端請(qǐng)求如果攜帶信息，那么后端不能為知識(shí)點(diǎn)前端發(fā)出的請(qǐng)求如果是附帶身份驗(yàn)證而后端的如果設(shè)置的是那么這個(gè)請(qǐng)求會(huì)失敗，在預(yù)請(qǐng)求時(shí)會(huì)被攔截下來。來源文檔踩坑記錄在一個(gè)文件上傳的接口出現(xiàn)問題。 踩坑記錄-前端請(qǐng)求如果攜帶Cookie信息，那么后端Access-Control-Allow-Origin不能為* 知識(shí)點(diǎn) 前端發(fā)出的請(qǐng)求如果是附帶身份驗(yàn)證（withCredentials：tr...

    Bowman_han 評(píng)論0 收藏0

  • FE.WX-小程序“無聊廣場”游戲前端性能優(yōu)化與踩坑攻略

    摘要：本文主要針對(duì)小程序無聊廣場的前端開發(fā)內(nèi)容做總結(jié)，記錄常見的一些老生常談的進(jìn)階手法，對(duì)小程序中的動(dòng)畫音頻等踩坑做出解決方案。 背景 一個(gè)交互不復(fù)雜，對(duì)刷新頻率和動(dòng)畫效果要求不高的小游戲，不需要使用canvas主導(dǎo)的解決方案，使用dom操作一樣可以完成。節(jié)省了cocos creater的學(xué)習(xí)成本，值得一試。本文主要針對(duì)小程序無聊廣場的前端開發(fā)內(nèi)容做總結(jié)，記錄常見的一些老生常談的進(jìn)階手法，對(duì)...

    qpal 評(píng)論0 收藏0

  • SUI踩坑記錄

    摘要：踩坑記錄最近做了個(gè)項(xiàng)目選型了和做單頁應(yīng)用。下面記錄一下踩坑經(jīng)歷介紹文檔是一套基于開發(fā)的庫。下面記錄一下主要的注意事項(xiàng)默認(rèn)開啟了前端路由。如果需要禁用路由功能那么可以在之后之前使用來禁用相關(guān)的坑的有個(gè)可以自定義里面的內(nèi)容但是把這塊刪了。 SUI踩坑記錄 最近做了個(gè)項(xiàng)目選型了SUI和vue做單頁應(yīng)用。下面記錄一下踩坑經(jīng)歷SUI 介紹 sui文檔：http://m.sui.taobao.or...

    honhon 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<