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

zsy888 發布于2019-08-23 18:18 / 600人閱讀

摘要：最近在前端開發的過程中踩了不少坑，先記錄下來，往后整理路由實例更新里每一次進行路由導航，對應路由的組件都會生成一個新的實例簡稱，不注意這一點話會掉坑。原因就是此時路由中的不再是第一次創建監聽時指向的了。

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

路由實例更新

vue.js里每一次進行路由導航，對應路由的vue.js組件都會生成一個新的vue實例(簡稱vm)，不注意這一點話會掉坑。

比如在/home路由里，在mounted()中，我在window下監聽了一個鍵盤事件，為了避免事件重復綁定多次，我設立一個全局變量來標記創建的狀態，只有第一次進入時才創建監聽事件。

    if(!window.keyupFlag){
        let myFunc = ()=>{console.log(this.$refs.input1)}; //這里用箭頭函數能直接在函數內拿到指向當前的vm的this
        window.addEventListener("keyup",myFunc);
        window.keyupFlag = 1;
    }

但是這樣會導致一個問題，在我跳轉到別的路由，比如/about后在跳轉回/home，我在myFunc函數中this.$refs.input1就會返回undefined。
原因就是此時/home路由中的vm不再是第一次創建監聽時this指向的vm了。

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

    let myFunc = ()=>{console.log(this.$refs.input1)}; 
    
    let oldMyFunc = this.$store.state.myFunc; //第一次進入/home時這里還沒有被myFunc賦值,第二次進入路由時就有正確的值了
    window.removeEventListener("keyup",oldMyFunc);
    
    window.addEventListener("keyup",myFunc);
    this.$store.commit("setMyFunc",myFunc);

使用Axios發起POST請求時，產生OPTIONS請求問題

原因是跨域發起復雜請求時，按照新的標準瀏覽器會先發起一個預檢請求OPTIONS請求來測試請求是否能被服務器接受，如果服務端對此沒有相應的處理，就會出現請求失敗的問題。
具體的方案待施工，先丟幾個參考

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

Oauth2.0授權請求

相關的教程很多，但是有兩點鮮有提及

授權服務端要設置請求中的回調域名或ip地址

當使用code來請求access_token時，發起的請求頭Header中要設置"Authorization": ...,
具體的Authorization值可能不同的服務端會有區別，我的項目中用的是

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

GPU云服務器云服務器對記錄中元素的分離 asp中怎么記錄日志域名中的記錄值前端開發用什么前端開發

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/104996.html

2019年我的 TypeScript 輪子這樣寫

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

Baaaan 2019-08-26 10:19 評論0 收藏0
大數據、云計算、物聯網如何與建筑融合？

摘要：在互聯網時代，建筑業數據的價值和重要性將逐步體現，充分運用大數據制定企業發展戰略進行戰略決策。此外，在智慧城市智能建筑方面需要大量采用物聯網技術。1．大數據技術大數據是以容量大、類型多、存取速度快、應用價值高為主要特征的數據集合。建筑業是產生大量數據的行業之一，又是數據電子化程度較低的行業。在互聯網＋時代，建筑業數據的價值和重要性將逐步體現，充分運用大數據制定企業發展戰略、進行戰略決策。研...

mingzhong 2019-04-29 18:25 評論0 收藏0
踩坑記錄-前端請求如果攜帶Cookie信息，那么后端Access-Control-Allow-Ori

摘要：踩坑記錄前端請求如果攜帶信息，那么后端不能為知識點前端發出的請求如果是附帶身份驗證而后端的如果設置的是那么這個請求會失敗，在預請求時會被攔截下來。來源文檔踩坑記錄在一個文件上傳的接口出現問題。踩坑記錄-前端請求如果攜帶Cookie信息，那么后端Access-Control-Allow-Origin不能為* 知識點前端發出的請求如果是附帶身份驗證（withCredentials：tr...

Bowman_han 2019-08-22 18:32 評論0 收藏0
FE.WX-小程序“無聊廣場”游戲前端性能優化與踩坑攻略

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

qpal 2019-08-22 18:26 評論0 收藏0
SUI踩坑記錄

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

honhon 2019-08-20 13:51 評論0 收藏0