Messiah
Published with Ghost
Messiah的前端笔记
在世界中心呼唤爱の怪兽
Messiah的前端笔记
聊聊像素(Pixel)

作为一个网页开发者,是绕不开和像素一词打交道的。 哪怕不进行web编程,只要上网,就一定会接触到这个词。无论是图片的分辨率,还是显示器的分辨率,浏览器里的CSS像素, PS里的像素。他们使用的都是同一个词,“像素”,但在概念里,却不尽相同, 因此人们常常会对此感到迷惑。 本文将先介绍图像/位图的构成,进而介绍屏幕的分辨率,最后再是图像在屏幕中的显示问题。尽量做到简单易懂。 位图(Bitmap) 位图(Bitmap),又称栅格图(英语:Raster graphics)或点阵图, 是使用像素阵列(Pixel-array/Dot-matrix点阵)来表示的图像。与之相对应的图像叫做矢量图。 位图的每个像素都分配有特定的颜色值,每个像素的颜色信息由RGB组合或者灰度值表示。如果由RGB组合而成,则可以用(0, 0, 0) ~ (255, 255, 255)来进行表示。而想在计算机的硬盘中存储图像的话,针对每个像素, ...

写在2018年初

又回到这座小镇,这里的风景似乎不曾变过,天空和小吃大概是唯一会让人感到自豪的地方。小镇之所以叫小镇,自然是因为它很小,即使是由中心贸易区辐射开来,到目的地也只需步行即可。除此之外,由小镇延伸出来的,是它慢节奏的主旋律。这里的生活很慢很慢,空气也很清新,似乎是个适合养老的地方,可是对于拥有热血的小孩子来说却显得不那么友好。在这里呆久了,如果试着不去使用网络,那么你的世界就会越来越小,渐渐地,这个小镇就是你的世界。 而我也一样,在这里呆久了,仿佛要忘记了外面的世界。 时间从来不是让人产生生疏感的东西,真正的原因是人们的成长,成长固然和时间的长短相挂钩,但人生的不同时期成长自然也是不同的。有的时候,一件事情就会让人成长,有的时候,成长却需要长时间的磨砺。因此一个人的成熟并非完全和年龄相挂钩,这也印证了那句“吾师道也,夫庸知其年之后生于吾乎?”。人的成熟与否自然也是一个多维度的东西,也是无法直接去衡量或者描述的,大多数人都会希望自己趋向于成熟,然而生活中却并不如此,即使大家都在摆着一副成年人的姿态。 可惜的是, 即使想去成为一个成熟的人,生活也不一定会过的更好,反而可能更糟。因为某种意义上成熟是远离世俗的,如果你每件事情都要仔细衡量,你可能会避免很多坑, ...

事件模型

在讲解事件知识点之前,我想先举个例子,读者可以想想怎么优雅的实现这个功能。 我们经常会有这样的需求:浏览器内部有个弹窗元素,当你点击弹窗外部的元素时,这个弹窗消失。但当你点击这个弹窗本身时,不会有任何影响。 虽然听起来很简单,但如果不能理解事件模型的话,还是会感到很头疼的。 因为当你点击弹窗的时候,实际上也等于点击了外部的元素。 而如果只是给外部元素绑定事件来使内部元素消失, 那当你点击内部弹窗的时候,依然会触发外部元素的事件。 事件传播 我们知道,网页是由一层一层的HTML代码组成。就像同心圆一般,当我们点击内部的同心圆时,实际上也是点击了外部的同心圆。 那么,浏览器具体是如何表现的呢? 这里假设我们的HTML代码结构如下 <body> <div class="outer"> <div class="inner"></div> ...

如何正确的克隆对象

之所以要聊这个话题,得从今天遇到的一个问题说起了。 首先这是一段vue代码 export default { data() { return { obj: { a: 'a', b: 'b', } } }, computed: { val() { return this.obj } }, methods: { click() { delete this.obj.b } } } 其实我真正的需求是下面的这个代码,原理上和下面代码差不多,写上面的代码是为了其他人能看得懂。 //main.js const store = new Vuex.Store({ state: { obj: { a: 'a', b: 'b', } }, mutations: { click(state) { delete state.b } } }) //组件内 ...

从文件上传说起

文件上传应该算前端里比较重要的知识点,用的多,也涉及了许多HTML5里的知识点。 本文简单讲解 File Blob FileReader readAsText readAsArrayBuffer readAsDataURL readAsBinaryString FormData File API 什么时候会经常用到File API? <input type='file'> el.ondrop = function (e) { e.preventDefault() console.log(e.dataTransfer.files) } File的格式是什么样的? File { lastModified, lastModifiedDate, name: 'xxx', size: 'xxx, type: 'xxx' webkitRelativePath: 'xxx', __proto__: File ...