【周记】2018.03.19-2018.03.25


title: 【周记】2018.03.19-2018.03.25
date: 2018-03-25
tags: [周记]
categories: 琐事


关键字:

  1. 需求提测
  2. 阅读zent-alert/swiper源码
  3. react-tiny-swiper
  4. npm link
  5. npm publish
  6. 使用gh-pages展示react项目
  7. mix content错误
  8. webpack

工作

  1. 订阅管理提测-修复。
  2. 采购单位新增驻外地信息字段 开发-提测-修复-发布。这个feature让我见到了代码能够有多乱,写业务代码倘若为了复用行丧失了维护性,那可真是糟糕。不过写得好的代码也很难应对无止尽的需求,尽量拆的越小越好,抽离出公共的,不要混杂在一起,单一职责。
  3. 这周六就可以回学校了,哈哈哈哈哈。

学习

  1. 封装了 react-tiny-swiper 组件并发布到了npm。学会了如何编写组件,搭建组件开发环境,开发打包测试一条龙服务。
  2. 重新老老实实的学习webpack,理一遍概念,在看慕课视频的同时看这篇文章-从零搭建React全家桶框架教程
  3. 利用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 / deploy script命令
      "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
      
  4. 在进行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。
  5. 在编写 react-tiny-swiper 过程中看了一下zeng-alert/swiper源码,学习到了一些东西。
    • 让繁琐的if else逼格高一点点,这是我很久之前看的一篇文章,在自己也在践行,zent中处理样式的时候也是这种方式
    • 代码尽可能的小,这个是我最大的收获了。
      改动前:
    window.onblur = () => {
      clearInterval(this.autoTimer)
    }
    
    改动后:
    stopAutoPlay = () => {
      clearInterval(this.autoTimer)
    }
    
    window.onblur = () => {
      this.stopAutoPlay()
    }
    
    通过方法名去自己解释自己,不用再去细看代码是如何实现的了,阅读性大大增加,虽然自己一直知道这一点,但是对比两份代码,羞愧的低下了头。

我的博客
music-react
react-tiny-swiper

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • This project was bootstrapped with Create React App. Belo...
    unspecx阅读 5,231评论 0 2
  • 用到的组件 1、通过CocoaPods安装 2、第三方类库安装 3、第三方服务 友盟社会化分享组件 友盟用户反馈 ...
    SunnyLeong阅读 14,711评论 1 180
  • 在认识爬虫中我给自己设定一个目标就是学习模拟登录。但是目前的知乎、豆瓣都要输入验证码,本以为可爱的简书是不会的,结...
    xuzhougeng阅读 4,725评论 3 9
  • 当迪伦爬出火车箱后,吵闹的感觉消失的无影无踪,那种悄然无声的寂静让她急需找到同伴。也许当意外来临时,那种恐惧感让我...
    静谧夜空阅读 199评论 0 0
  • lerna### Lerna 是一个用来优化托管在git\npm上的多package代码库的工作流的一个管理工具,...
    pgf阅读 40,922评论 5 13