june01 png的故事:获取图片信息和像素内容
In Web开发 on 2017年03月16日 by view: 1,417
8

前言

现在时富媒体时代,图片的重要性对于数十亿互联网用户来说不言而喻,图片本身就是像素点阵的合集,但是为了如何更快更好的存储图片而诞生了各种各样的图片格式:jpeg、png、gif、webp等,而这次我们要拿来开刀的,就是png。

简介

首先,png是什么鬼?我们来看看wiki上的一句话简介:

Portable Network Graphics (PNG) is a raster graphics file format that supports lossless data compression.

也就是说,png是一种使用无损压缩的图片格式,而大家熟知的另外一种图片格式——jpeg则是采用有损压缩的方式。用通俗易懂的方式来讲,当原图片数据被编码成png格式后,是可以完全还原成原本的图片数据的,而编码成jpeg则会损耗一部分图片数据,这是因为两者的编码方式和定位不同。jpeg着重于人眼的观感,保留更多的亮度信息,去掉一些不影响观感的色度信息,因此是有损耗的压缩。png则保留原始所有的颜色信息,并且支持透明/alpha通道,然后采用无损压缩进行编码。因此对于jpeg来说,通常适合颜色更丰富、可以在人眼识别不了的情况下尽可能去掉冗余颜色数据的图片,比如照片之类的图片;而png适合需要保留原始图片信息、需要支持透明度的图片。

june01 模块加载工具制造指南
In Web开发 on 2017年01月10日 by view: 3,193
4

前言

看到这个标题,估计有同学会想,又要重复造轮子么?其实重复造轮子在大多数情况下确实是不太可取的,既浪费了精力又浪费了时间。但这并不能说明重复造轮子完全不可取,比如你想要某个轮子的精简版,又比如你想学习某个轮子的制造方法,重复造轮子也可以是有意义的。

简介

接下来,我们就来学学某个轮子简易版制造方法,这个轮子就是模块加载工具。

说起模块加载工具,估计大家就会想起webpack、commonjs等,更“久远”一点的会想起requirejs和seajs。这些工具都源于前端的模块化思想。

为什么前端需要模块化?这主要得益于前端技术的发展,使得前端不再像以前那样只能展示一下静态内容,撑死加上几个飞来飞去的动画。现在的前端内容越来越丰富,我们可以播放视频,可以协同工作,还可以玩游戏。这就导致了前端代码量剧增。当代码行数噌噌噌往上涨时,模块化思想就自然而然地出来了。

june01 实现一个简单的模板引擎
In JavaScript,Web开发 on 2016年10月22日 by view: 2,218
4

简介

模板引擎,其实就是一个根据模板和数据输出结果的一个工具。

我们要开发一个将模板文件转换成我们实际要使用的内容的工具,这个工具就是模板引擎。我们把模板文件里的内容当成字符串传入到模板引擎中,然后模板引擎根据一定语法对该字符串进行解析处理,然后返回一个函数,之后我们在执行函数时把数据传输进去,即可拿到根据模板和数据得到的新字符串。最后我们想怎么处理该字符串就看需求了,如果用于前端模板生成的话,则可以用dom的innerHTML这个属性来追加内容。

目前前端的模板引擎多得数不胜数,语法特性也花样百出,用行内的话来说,我们要实现的是一种基于字符串的模板引擎。