GitHug通关指南

前言 GitHug是一个帮助Git用户提升Git使用技能的工具。Git初学者可以通过GitHug提升自己的技能。 说明:使用GitHug时,每完成一步,执行一次githug命令,GitHug会自动检测上一步是否被正确完成。如果正确完成,就会提示通过并自动跳到下一步;如果错误完成,将会显示报错信息。如果你不懂如何正确完成这一步,执行githug hint使GitHug显示提示信息。必要时可以参阅下文中的附加链接。 通关指南 1. init ******************************************************************************** * Githug * ******************************************************************************** No githug directory found, do you wish to create one? [yn] y Welcome to Githug! Name: init Level: 1 Difficulty: * A new directory, `git_hug`, has been created; initialize an…

再谈移动端适配

引言 移动端适配一向是很令人头大的问题,因为随着移动设备型号数量的爆发式增长,手机屏幕尺寸越来越多样化,网页内容自适应屏幕尺寸进行显示的需求也就越来越强烈。原本可能通过百分比/媒体查询等简单手段就可以常见的适配问题,但是对于页面有复杂结构或者视觉上有特殊要求的,就需要通过其他手段来解决了。 像素基础 像素 像素是一个老生常谈的问题了。不论是做前端开发还是做UI设计,都离不开这个话题。其实真要深究起来,像素是一个十分复杂的概念。追溯到上世纪6、70年代,计算机的输出设备还是点阵式打印机,如何使打印机打印出文字和图形?科学家们研究出了很多点组成的阵列,通过控制每一个点的黑白,最终组成文字和图形。现代计算机的显示器也借鉴了这个设计,发明了像素。 像素分为两种: 物理像素 又称设备像素(Device Pixel, DP),这是组成显示设备的最小单位。可以理解为显示器上的一个一个的点,这些点组成一个个阵列。因为这些点间隔太短,排布太密集,所以肉眼观察不到颗粒感,物理像素通过RGB显色系统,分别控制RGB三基色通道的明与暗,形成了各种颜色。这就是所谓的视觉欺骗效果。任何显示设备的物理像素的数量都是不变的,出厂前就已经设定好。 物理像素的单位是pt,计算公式为: 1pt = 1 / 72 inch 设备独立像素…

Await/Async 与 Promise

我经常会遇到这种问题:我想向后端POST几张图片,然后得到后端返回的文件名,这一步调用的函数是A函数。当所有图片都上传成功并且拿到文件名之后,再将文件名传给下一个调用的函数进行下一步处理,这一步调用的函数是B函数。我希望只需要用户触发一次就能按顺序执行这两个函数。然而,事与愿违,Javascript的函数调用似乎是同步的——执行A的同时,B也开始执行!这让我十分苦恼。 异步调用 后来我才了解到,其实Javascript是可以实现异步调用的,但是ES5中只能使用回调的方法实现异步,这将无法避免“回调地狱”的发生。于是,ECMA组织意识到这个问题,并在ES6中提出了Promise的概念。紧接着,ES7又基于Promise提出了async/await的概念。 引用一段对这个概念的评价: async/await是写异步代码的新方式,以前的方法有回调函数和Promise。 async/await是基于Promise实现的,它不能用于普通的回调函数。 async/await与Promise一样,是非阻塞的。 async/await使得异步代码看起来像同步代码,这正是它的魔力所在。 一个简单的例子 有一段这样的代码: async function test () { return 'hello world' } let result…

VueJS组件库爬坑记 (4) - 基于官方文档制作模态框

开篇序在家园工作室已经有半年之久了,在这期间,我学会了很多实用的技能。曾经认为很难驾驭的Vue.js,到现在已经能够很熟练地用它开发大大小小的项目。不久之前,我加入了云家园项目组,开始正式参与云家园项目的研发与维护。在此期间,我浏览了一遍云家园的前端代码,发现整体的架构还是相当复杂、庞大,并且过于繁冗。我参考了云家园项目中Bootstrap的引入方式与使用方式,发现项目中基本没有出现可复用组件(当然,也有一部分的组件是几位先辈封装的),但是Vue组件化的概念并未贯彻整个项目的代码中。于是我萌生出想要开发一个属于家园工作室自己的可复用的UI组件库的想法。这个想法提出来,有两位学长表示他们早就想做这个,然后用这个UI组件库去重构云家园的前端代码。所以我们三人在3天前的3月21日开启了制作一套基于Vue.js 2.0的UI组件库之旅。从这片文章开始,我将会记录我们在开发这套UI组件库中遇到的种种困难与解决这些问题的方案。实践性的内容将占到绝大部分,也有少部分偏理论的内容。我们可以将这个系列的博客理解为从零开始开发Vue.js组件库到其初具雏形再到其羽翼丰满的全过程的记录,一颗牙当作经验的积累。简介这片文章主要记录了基于Vue.js官方文档中关于模式组件而开发的一个模态框组件的过程。开发过程代码分析根据官方文档,一个受推荐的模式组件的代码应当形如下面:进一步观察发现,官方提供Demo在技术上具有如下特性:采用v-if控制模态框的显示与隐藏,而不是国内某些UI组件库普遍采用的v-model采用<transition>控制模态框的过渡动效采用Div编写模式组件,而不是常用的iframe组件内采用$emit回传动作信息(…

JS中on函数的回调方法

这个坑是我在开发寒假比赛项目的时候踩到的。大致的需求就是实现一个图片旋转方法,当图片的旋转角为逆时针90度时将图片传递给这个函数,在函数内部生成Canvas进行顺时针旋转90度的处理,最后将处理之后的结果返回出来。复现问题为了便于复现这个坑,我并没有重新写一个Demo,而是直接将代码展示出来。当时我的代码如下:utils.jsconst utils = { rotateImg: (imgSrc, vue) => { function getObjectURL (object) { return (window.URL) ? window.URL.createObjectURL(object) : window.webkitURL.createObjectURL(object) } function dataURLtoBlob (dataurl) { var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1], bstr = atob(arr[1]), n = bstr.…

寒假比赛总结(八) - 比赛总结

前言到今天(2018-03-01)20点,为期一个多月的寒假比赛就结束了。按照惯例,每次比赛结束都写一些总结,把比赛过程中学到了什么、有哪些地方做得好的、哪些地方没做好的都记录一下。也可以当作反思。在比赛中吸取经验,这样会成长得更快。学到了什么规范的操作无论做什么事情,规范是必需遵守的。在比赛时,为了更好地与后端进行合作,我从前端页面的角度制定了一篇文档,在上面详细描述了每个页面所需接口的字段名、方法等等。(这篇文档目前还在:http://docs.lenconda.top/petlog/)在实际的操作中,我前端这边是严格按照文档规定的格式编写调用后端接口的逻辑。然而,后端似乎并没有认真按照这篇文档的规范进行编写:很多接口都是规定GET方法,后端却只允许POST方法;有很多接口的字段存在拼写错误(avatar拼成avater、字段名中少了s或多了s、follow漏了ed(原本是followed)等等),给前后端对接交互造成很大的麻烦,也浪费了很多时间(我们从2月26日开始对接,到2月28日修改完Bug进入预备阶段,前后花了两天的时间),而且后端接口初次测试十有八九都是500,这些500中肯定有很多是没有遵守规范造成的。这件事给我很深的感触,我认为前后端分离的开发模式下,规范一定是要严格遵守的东西。但是就我这次和两位后端的合作过程来看,家园的研发培训时并没有强调规范的重要性,或者说家园研发的新生并没有很强的规范意识,…

寒假比赛总结(七) - 各种坑

前言在开发的过程中遇到了一些奇妙的坑。与其说坑,倒不如说自己以前从来没有遇见过或者考虑过这些东西。甚至其中某几个还曾一度被我认为是Bug。在查阅资料后发现那种设计还是有其道理的。1. 关于伪元素在比赛中用到伪元素的地方不多也不少,其实我认为伪元素的出现给开发带来了很多方便,代码也变得很干净整洁。因为伪元素并不是真正的元素,却又和真正的元素没什么差别。但是,伪元素也有其限制。现有需求如下图:因为头像右下角的相机在样式上是不变的,所以首选应该就是伪元素。于是我开始编写此代码:HTML:<img src="avatar.png" /> img { width: 83px; height: 83px; border-radius: 50%; position: relative; &::after { content: ''; position: absolute; bottom: 0; right: 0; display: block; width: 22.5px; height: 22.…

寒假比赛总结(六) - 关于使用到的一些从未遇见过的东西

前言此文章用于记录在寒假比赛的过程中遇到的一些需求及其解决方法。主要涉及到之前工作学习的过程中未遇见过的技巧。既是为了复现一遍以增强理解,也为了在以后需要的时候能够随时记起。1. 自定义单/复选框HTML单/复选框是由类型为Radio的Input元素实现的,但是这个类型的元素会形成一个小圆圈/小方框,并且随浏览器样式的不同而不同。如果需要自定义这些组件,我的解决方法是将Input元素本身隐藏起来,然后在外层添加一个<label>元素包裹Input,再添加一个Input的兄弟元素,这个兄弟元素就是自定义的,用于表示该组件被选中与否的元素。以下列出代码:HTML:<label> <input type="radio" v-model="value" value="value1" style="display: none" /> <i class="indicator"></i> </label> LESS:…