基础回顾（三）

Author Avatar
Silas Shen 4月 26, 2019

最近的一段时间，相较于之前还算是写了不少的东西。想要提高技术能力，最主要还是需要不断地练习。在练习的过程中去解决问题，这才是高效的学习方式。不知不觉中自己工作已经将近一年了。一年的时间，不长不短。但仔细想想，有效的时间又有多少呢？我想要在技术这条道路上不断的进步，我害怕自己停滞不前，只是重复业务（其实目前业务也不太多）。

之前看过一篇文章——《写代码水平的几个发展阶段》，我也会在想，现在的我处在哪个阶段。可能现在的我还是停留在会用的阶段吧。也仿照element封装了部分页面组件，从一开始看element源码很吃力，到现在大致能理解它的实现方式，这个理解的过程本身也是学习进步的过程。
只会使用API，而不去思考。不过是把搬砖换了种形式而已。所以，我倾向于在学习技术时，尝试搞懂它的原理。就像git一样，如果只是单纯的使用不过是几条命令而已。其实搞懂一些原理，不过是让自己更加清晰过程而已。

写的东西

chuizi_weather

仿照锤子天气app用原生js写的一个简单的页面

css部分

  • 布局：整体使用flex布局，单位：使用vw, vh
  • 纯css实现switch button
<div class="switch">
  <input type="radio" name="switch" id="switch-off">
  <input type="radio" name="switch" id="switch-on" checked>
  <!-- 切换华氏度和摄氏度 -->
  <label for="switch-off">°C</label>
  <label for="switch-on">°F</label>
  <!-- 切换按钮 -->
  <span class="toggle"></span>
</div>

/* 使用一般元素选择符~，实现元素不同状态之间的切换 */
/* off,on颜色切换动画 */
.switch input:checked~label:nth-of-type(1) {
  color: #EFEFEF;
}
.switch input:checked~label:nth-of-type(2) {
  color: #737373;
}
.switch input~:checked~label:nth-of-type(1) {
  color: #737373;
}
.switch input~:checked~label:nth-of-type(2) {
  color: #EFEFEF;
}
/* 滑动切换动画效果 */
.switch input:checked~.toggle {
  left: 2px;
}
.switch input~:checked~.toggle {
  left: 46px;
}
  • 伪元素的使用 => 实现按钮内的样式
<div class="button refresh"></div>

.button {
  width: 32px;
  height: 32px;
  background: #F6F6F6;
  border-radius: 50%;
  box-shadow:0 0 10px #C9C9C9;
  border: 1px solid rgba(0,0,0,0.1);
}
.refresh {
  position: relative;
  overflow: hidden;
}
/* 按钮内圆圈 */
.refresh::before {
  content: "";
  position: absolute;
  width: 50%;
  height: 50%;
  border-radius: 50%;
  border: 2px solid #696969;
  /* 垂直水平居中 */
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}
/* 竖杠将圆圈分割 */
.refresh::after {
  content: "";
  position: absolute;
  background: #F6F6F6;
  width: 10%;
  height: 80%;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%) rotate(-45deg);
}
  • css transform => 卡片翻转动画
<div class="card">
  <div class="front"></div>
  <div class="back"></div>
</div>

.front, .back {
  backface-visibility: hidden;
  transform-style: preserve-3d;
  transition: all .5s;
}
/* 翻转效果 */
.back {
  transform: rotateY(-180deg);
}
.flip .back {
  transform: rotateY(0deg);
}
.flip .front {
  transform: rotateY(180deg);
}

js部分

  • fetch
fetch(apiDaily)
    .then(response => {
      return response.json()
    })
    .then(data => {
      //...
    })
  • 使用js对象
// 从api中获取天气数据信息
const weatherData = data.results[0];
// 获取json中的温度，文本，及天气图标代码
const { temperature, text, code } = weatherData.now;
// DOM操作
currentTemperature.textContent = temperature;
textWeather.textContent = text;
  • 模板字符串 => 动态加载天气图标
<img src="" class="weather-icon">

let weatherIcon = document.querySelector('.weather-icon')
//动态加载天气图标
weatherIcon.src = `./icon/${code}.png`;
  • classList.toggle() => 使用原生js实现jquery toggleClass方法
//card翻转
flipLeft.addEventListener("click", () => {
  flip.classList.toggle('flip')
})
flipRight.addEventListener("click", () => {
  flip.classList.toggle('flip')
})

github

Brooklyn Screensaver

一个开源的Mac OS屏保程序

  • issues => Can’t modify configuration
  • solve: git proxy的问题，导致brew无法更新。与项目本身无关，故以后提issues前，先全面排查自己环境的问题。

RSSHub

RSSHub 是一个轻量、易于扩展的 RSS 生成器，可以给任何奇奇怪怪的内容生成 RSS 订阅源

  • pull requests
    • add 7x24小时快讯
    • add 观察者风闻话题
    • add 数英网专题内容

这是自己在github上参与的第一个开源项目，收获还是挺多的。学会了使用cheerio爬取网页的信息，和node一些API的使用。以及如何规范的给开源项目提交pr。当解决别人提出的需求，然后被其关注和感谢后。还是有不少的成就感的。

继续做的

-[ ] 继续写vue组件库，熟练掌握vue的使用。
-[ ] 完成一个完整的TODO App。设计稿参考dribble，后端尝试使用LeanCloud。
-[ ] 使用vue重构之前的Chuizi weather。