title: 【周記】2018.03.19-2018.03.25
date: 2018-03-25
tags: [周記]
categories: 瑣事
關鍵字：
- 需求提測
- 閱讀zent-alert/swiper源碼
- react-tiny-swiper
- npm link
- npm publish
- 使用gh-pages展示react項目
- mix content錯誤
- webpack
工作
- 訂閱管理提測-修復。
- 采購單位新增駐外地信息字段 開發-提測-修復-發布。這個feature讓我見到了代碼能夠有多亂，寫業務代碼倘若為了復用行喪失了維護性，那可真是糟糕。不過寫得好的代碼也很難應對無止盡的需求，盡量拆的越小越好，抽離出公共的，不要混雜在一起，單一職責。
- 這周六就可以回學校了，哈哈哈哈哈。
學習
- 封裝了
react-tiny-swiper組件并發布到了npm。學會了如何編寫組件，搭建組件開發環境，開發打包測試一條龍服務。 - 重新老老實實的學習webpack，理一遍概念，在看慕課視頻的同時看這篇文章-從零搭建React全家桶框架教程。
- 利用
gh-pages將music-react在線展示。不需要同原來一樣去修改publicPath，新建gh-pages分支了，大致操作如下(除了第一步，你build之后react都會告訴你如何操作)：-
BrowseRouter添加basename屬性<BrowserRouter basename="/music-react/"> -
package.json文件添加homepage字段"homepage": "http://worldzhao.github.io/music-react", - 安裝
gh-pages包npm install gh-pages --save-dev -
package.json添加predeploy/deployscript命令"scripts": { "start": "node scripts/start.js", "build": "node scripts/build.js", "test": "node scripts/test.js --env=jsdom", "predeploy": "npm run build", // 新增 "deploy": "gh-pages -d build" // 新增 }, - 執行命令
npm run build # 或npm run predeploy npm run deploy
-
- 在進行3的過程中，發現
gh-pages是https網頁，里面禁止http請求（css,js,img會報warning,其他請求ajax等直接block報error）。music-react，如下圖：
error.png
warning.png
原來展示是可以的，因為使用的是自定義域名http://blog.hackerwen.tech，沒有使用https://worldzhao.github.io這個域名，要么重新自定義域名，要么升級服務到https。 - 在編寫
react-tiny-swiper過程中看了一下zeng-alert/swiper源碼，學習到了一些東西。- 讓繁瑣的if else逼格高一點點，這是我很久之前看的一篇文章，在自己也在踐行，zent中處理樣式的時候也是這種方式
- 代碼盡可能的小，這個是我最大的收獲了。
改動前：
改動后：window.onblur = () => { clearInterval(this.autoTimer) }
通過方法名去自己解釋自己，不用再去細看代碼是如何實現的了，閱讀性大大增加，雖然自己一直知道這一點，但是對比兩份代碼，羞愧的低下了頭。stopAutoPlay = () => { clearInterval(this.autoTimer) } window.onblur = () => { this.stopAutoPlay() }
