如何实现一个颜色选择器

在开发公司UI组件库的过程中,颜色组件ColorPicker由于时间关系没有去深入研究,看着花花绿绿的色谱图,以为实现起来会很复杂,就直接将一个开源的颜色选择器封装了一下。这大概是半年以前的事了,这篇文章也在我的博客中以草稿形式(只有标题没有内容,当时是做了一个记录,想着后来有时间了去研究,目前这种草稿还有很多😂)存放了半年了。前段时间请教了公司UI同事一些颜色相关的概念,又去搜索了下这方面的知识,收获还是蛮大的,尤其是知乎色彩空间中的 HSL、HSV、HSB 有什么区别?这篇提问中,@Forrest近乎大白话的回答,超赞👍。

基于Webpack/TypeScript/Koa的环境配置

TypeScript是一种开源编程语言,在软件开发社区中越来越受欢迎。TypeScript带来了可选的静态类型检查以及最新的ECMAScript特性。
作为Javascript的超集,它的类型系统通过在键入时报告错误来加速和保障我们的开发,同时越来越多对的库或框架提供的types文件能够让这些库/框架的API一目了然。我对这门语言垂涎已久,但是迟迟无法找到练手的地方。
很显然的,个人博客又一次的成了我的学习试验田😸。我放弃了上一版Vue单页面的框架,改为基于TypeScript/Koa的多页面应用。在改造的过程中,我试着将服务端(Koa)代码以及前端代码都使用TypeScript来开发,中间使用了webpack作为开发时前后端的桥梁。

前端跨页面通信技术

在浏览器中,我们可以同时打开多个Tab页,每个Tab页可以粗略理解为一个“独立”的运行环境,即使是全局对象也不会在多个Tab间共享。然而有些时候,我们希望能在这些“独立”的Tab页面之间同步页面的数据、信息或状态。

正如下面这个例子:我在列表页点击“收藏”后,对应的详情页按钮会自动更新为“已收藏”状态;类似的,在详情页点击“收藏”后,列表页中按钮也会更新。

Vue2.0利用vue-resource上传文件到七牛

关于上传,总是有很多可以说道的。
16年底,公司项目番茄表单的前端部分,开始了从传统的jqueryvue 2.0的彻底重构。但是上传部分,无论是之前的传统版本,还是Vue新版本,都是在使用着FileAPI这款优秀的开源库,只是进行了简单的directive化。为什么呢?因为兼容性。没办法,公司项目不等同于个人项目,必须要考虑大多数浏览器。否则,上传部分完全可以利用Vue-Resource以及FormData来抛开对FileAPI的依赖。这让我深感遗憾,幸好这个简单的遗憾在个人博客Vue化重构的时候得以弥补。

Vue实现一个分页组件

分页是WEB开发中很常用的功能,尤其是在各种前后端分离的今天,后端API返回数据,前端根据数据的count以及当前页码pageIndex来计算分页页码并渲染到页面上已经是一个很普通很常见的功能了。从最开始的jquery时代到现在的各种各样的前端框架时代,分页功能都是必不可少的。
分页大多数(基本上)情况下都是对异步数据列表的处理,这里首先需要明白一下分页的流程。
在已知每页显示数据量pageSize以及当前页码pageIndex的情况下:

Mongoose简要API

Mongoose是在node.js环境下对mongodb进行便捷操作的对象模型工具

因此,要使用mongoose,则必须安装node.js环境以及mongodb数据库。mongoose使mongodb操作更简单便捷。可以在github中获得其源码,也可以在这里查看api文档,英文的,文档内容较多,因此本文特意总结下mongooseschema数据模型定义以及简单的增删改查api。

HTML5音乐列表播放器SMusic开发总结

前段时间写过一篇介绍简单音乐播放器效果开发的博文《为你的博客添加简单的CSS3音乐播放器》,实现了单曲循环播放效果,这个效果也是我的博客首页一直有的效果,同时文中也介绍了一些简单的HTML5 Audio标签的属性和方法,如 play() , paused()等。当然,之前的效果只适合诸如博客或者某个单页面(如专题页面)使用。而现在的可以称之为完整版的播放器弥补了之前的不足,增加了列表播放,音量控制,播放进度,播放时间以及播放模式,上一曲,下一曲等功能,除了歌词外,基本就是个播放器了(本来就是播放器)。

升级总结:phantomjs在Centos上的安装过程

想着在年前把博客更新升级一下,于是顺手修复了一些已知的BUG,优化了留言模块,升级了nginx,更是为了利于SEO,在webpack的编译中加入了prerender-spa-plugin预渲染模块。经本地window主机测试后,一切OK。这便着手在线上Linux主机中配置,nginx, node, mongod 等的升级一切顺利,但就是在项目中 npm install 的时候卡住了,而且这一卡就是一天多!难道是我安装姿势不对,需要起来重睡? 查看npm报错原因,就出现在本文的主角phantomjs上。

关于phantomjs,无论是在之前的项目中写单元测试,录制UIrecorder测试用例时都遇到过,但仅仅也是遇到而已,只以为仅仅是一个依赖模块,照着文档npm install一下,对其甚至连基本的了解都没有,于是问题就出现了。

看懂前端脚手架你需要这篇webpack

Webpack 是当下最热门的前端资源模块化管理和打包工具。它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源。还可以将按需加载的模块进行代码分隔,等到实际需要的时候再异步加载。通过loader 的转换,任何形式的资源都可以视作模块,比如 CommonJs 模块、 AMD 模块、 ES6 模块、CSS、图片、 JSON、Coffeescript、 LESS 等。
Webpack 官网
Webpack 中文指南

Mongoose 多条件模糊查询的实现

这是今天手头项目中遇到的一个问题,关于mongoose如何实现类似于SQL中 nick LIKE '%keyword%' or email LIKE '%keyword%' 这种多条件模糊搜索的问题。 查阅了mongoose文档才得以实现,特此记录一下。

主要用到了query.$orquery.$regex这两个find参数。

其中query.$or用于实现多条件查询,其值是一个数组。相关文档

JavaScript学习笔记之Dom知识点总结

JavaScript的window对象对应着浏览器窗口本身,因此这个对象的属性和方法统称为BOM(浏览器对象模型),如window.open(),window.location等。

JavaScript的document对象是指文档对象模型,主要是处理网页内容。DOM(Document Object Model)即文档对象模型,是针对 HTML 和 XML 文档的 API 。字母D指document(文档),字母O指object(对象),字母指Model(模型)。DOM 描绘了一个层次化的节点树。节点表示一个连接点,文档是由节点构成的集合,DOM的节点主要分为三类:元素节点、文本节点(不是文本内容)、属性节点

微信公众平台开发 JS-SDK开发(图像接口实例)

本文并非是对微信JS-SDK说明文档的复制,而是通过一个简单的例子来更深入的了解使用微信JS-SDK,具体文档请参考官方说明文档《微信JS-SDK说明文档》。微信公众平台面向开发者开放微信内网页开发工具包(微信JS-SDK),通过微信JS-SDK提供的11类接口集,开发者不仅能够在网页上使用微信本身的拍照、选图、语音、位置等基本能力,还可以直接使用微信分享、扫一扫、卡券、支付等微信特有的能力,为微信用户提供更优质的网页体验。

微信JS-SDK提供的11类接口(分享接口、图像接口、音频接口、智能接口、设备信息、界面操作、地理位置、微信扫一扫、微信小店、微信卡券、微信支付)在使用方式上完全相同,唯一需要注意的是,这11类接口并不是都开放的,有些接口非认证用户是没有权限的,比如分享接口,小店接口、卡券接口、支付接口则必须通过微信认证后才能使用。具体权限问题可参考你的接口权限表

利用新浪微博接口生成漂亮的微博卡片

新浪微博开放平台(http://open.weibo.com/)提供了大量的接口API,如粉丝,微博,评论,用户读取等26个接口,共分为微博相关API,公共服务API,地理信息API等三大板块API。开发者只需注册开放平台App Key,即可利用开放平台提供的API测试工具测试各个不同的接口。本站很多地方都用到这些接口,如留言板中的地理位置,博客右侧的新浪用户卡片……

本文主要说的是利用新浪用户读取(https://api.weibo.com/2/users/show.json)接口生成一个漂亮的用户微博卡片。新浪接口授权相对严格,而此接口需要access_token和(uidscreen_name)两个必填参数,其中参数uidscreen_name二者必选其一,且只能选其一;并且接口升级后,对未授权本应用的uid,将无法获取其个人简介、认证原因、粉丝数、关注数、微博数及最近一条微博内容。 完整URL如下:https://api.weibo.com/2/statuses/public_timeline.json?access_token=你的access_token&uid=要获取信息的用户uid,该接口返回一个包含了该用户各种信息的json对象。