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() }
