javascript

JavaScript 中的高阶函数 (Higher-order functions)

在学习 JavaScript 的函数式编程的过程中遇到了一个高阶函数的概念,于是对其进行了一翻搜索,找到了一些相关的内容,特在这里进行一下梳理记录,以便理解。 什么是高阶函数 高阶函数的概念来自数学,维基百科中对它有如下定义: 在数学和计算机科学中,高阶函数是至少满足下列一个条件的函数: 接受一个或多个函数作为输入 输出一个函数 具体来说,在 JavaScript 中,我们可以将一个函数 A 作为参数传给另一个函数 B,或者,在函数 B 中将函数 A 作为返回值返回。那么这里的函数 B 就是上面所说的高阶函数。 举例 这种应用场景在我们日常的编码中会经常见到,

  • Kevin Yue
    Kevin Yue
3 min read
前端开发

移动端上传图片翻转的解决方案

最近在处理移动端选择图片实时预览并上传时遇到一个问题:上传前图片预览正常,但上传到服务器上的图片展示到页面上时,有时会出现图片翻转的问题,一般是翻转 90 度。后经一翻研究找到了问题所在,特在此记录一下。 问题描述 接上面提到的问题,经过一些测试,发现:如果选取的图片是在横屏状态下拍摄的,则上传后不会出现图片翻转的问题;反之,如果是在竖屏状态下拍摄的,上传后就会出现图片翻转的问题。 问题分析 首先,图片在本地预览时正常,而且前端最后提交到后端的数据是用 FormData 来封装处理的,用 FormData 可以保证提交的数据和通常的表单提交没有什么区别,对后端来说是透明的,后端的处理逻辑不用修改就可以处理带文件的 Ajax 提交。因此,我猜想问题可能出在了后端。

  • Kevin Yue
    Kevin Yue
5 min read
postcss

PostCSS 究竟是个什么鬼?

如果你还没有使用过 PostCSS,那么从现在开始,找个项目尝试一下,给 PostCSS 一个机会,你会发现,她几乎可以完成你所有和 CSS 相关的工作(包括 Sass 和 Less 这些预处理器的工作),极大的提高你处理 CSS 的效率。 用过 PostCSS 的同学可能会存在些疑问:这货和日常用的 CSS 预处理器有什么区别,有什么优势?CSS 后处理器又是个什么东西... ...?OK,下面的内容希望可以解开你心中的疑问。 以下内容摘自 PostCSS Deep

  • Kevin Yue
    Kevin Yue
9 min read
CSS

你可能不知道的 background-position

background-position 这个属性相信做过前端的都不会太陌生,尤其是在使用 CSS Sprite 的时候。但是一直以来,它都有一个缺陷——只能相对于容器的左边和上边来定位。这使得很多需求处理起来很 trick。比如,我想让图标定位到容器的左上角,距离上边和右边各 10px。如何实现这种效果呢? 通常情况下,如果容器是定宽的话,我们可以具体的设置 background-position 的 x 和 y 来绝对的定位背景图片的位置。但是如果不定宽话,就稍微麻烦一些,这时我们可能会选择用百分比来大约的定位背景图片的位置,但是不怎么精确,另一种方式就要借助于 JS 计算了:(。 好消息是

  • Kevin Yue
    Kevin Yue
1 min read
javascript

canvas 在高清屏下绘制图片变模糊的解决方法

之前我在 SF 上回答过「html5 canvas绘制图片模糊的问题」,但是可能是由于我给出的答案过于简略,加上答案中的 demo 链接已经失效,很多人反映这种办法并不好使。但是我在给出答案之前是在小米2 和 iPhone 上测试过的,没有任何问题。下面我会一步一步地描述具体的步骤。 前提条件 假设我们要在 canvas 中绘制一张 300 x 90 的图片,并且要保证它在高清屏中不模糊。那么我们首先要准备一张 600 x 180 的图片,处理过高清屏的同学应该会有这方面的经验。 问题重现 OK,

  • Kevin Yue
    Kevin Yue
3 min read
javascript

JS 使用正则表达式来解析 URL 参数

将 url 中的参数解析成一个对象的需求在日常的开发中比较常见,如,将 window.location.search 解析成一个对象。有很多方法来实现这个功能,比较常见也比较容易理解的方法是先用 String.prototype.split() 按 & 来拆分成参数对,然后再按 = 拆分每个参数对,组装成对象返回。 下面来分享一个用正则表达式来解析 url 请求参数的方法: 首先是要构造出正则。 以 window.location.search 为例,它的值通常为 ?foo=1&

  • Kevin Yue
    Kevin Yue
2 min read
CSS 处理神器 —— PostCSS
CSS

CSS 处理神器 —— PostCSS

缘起 之前一直使用 Autoprefixer 来处理 CSS 的前缀,配合着 grunt 或 gulp 等构建工具,用起来非常的方便。但不知从什么时候起,grunt-autoprefixer 的首页不推荐使用了,转而推荐使用 PostCSS。经过一番折腾,发现了 PostCSS 这一神器,推荐给需要的朋友。 PostCSS PostCSS 是一款用 JS 插件来转换样式的工具。 PostCSS 会将 CSS 代码解析成抽象的语法树,并对外提供 API

  • Kevin Yue
    Kevin Yue
2 min read