看到这个标题的时候,很多人可能会像我一样,脑海里会一下子跳出CSS3的方案来。的确如此,CSS3是实现渐变文字最简单直接的方案,本站就有很多用CSS3实现的双色水平渐变的文字实例。我这里把描述突然从炫彩字转到了渐变字,两者的概念一样吗?我不知道,可能只是各个行业的叫法不一而已。我所在的行业是为LED显示屏提供云节目制作和发布服务的,行业内把这种文本称之为炫彩字媒体,比如大街上司空见惯的显示屏上写着诸如“欢迎光临”的五彩斑斓的文字。受阻于业务需要,CSS的方案是我们最先Pass掉的,为什么呢?
在浏览器中,我们可以同时打开多个Tab页,每个Tab页可以粗略理解为一个“独立”的运行环境,即使是全局对象也不会在多个Tab间共享。然而有些时候,我们希望能在这些“独立”的Tab页面之间同步页面的数据、信息或状态。
正如下面这个例子:我在列表页点击“收藏”后,对应的详情页按钮会自动更新为“已收藏”状态;类似的,在详情页点击“收藏”后,列表页中按钮也会更新。
TypeScript是一种开源编程语言,在软件开发社区中越来越受欢迎。TypeScript带来了可选的静态类型检查以及最新的ECMAScript特性。
作为Javascript的超集,它的类型系统通过在键入时报告错误来加速和保障我们的开发,同时越来越多对的库或框架提供的types
文件能够让这些库/框架的API一目了然。我对这门语言垂涎已久,但是迟迟无法找到练手的地方。
很显然的,个人博客又一次的成了我的学习试验田😸。我放弃了上一版Vue单页面的框架,改为基于TypeScript/Koa的多页面应用。在改造的过程中,我试着将服务端(Koa)代码以及前端代码都使用TypeScript来开发,中间使用了webpack作为开发时前后端的桥梁。
在开发公司UI组件库的过程中,颜色组件ColorPicker由于时间关系没有去深入研究,看着花花绿绿的色谱图,以为实现起来会很复杂,就直接将一个开源的颜色选择器封装了一下。这大概是半年以前的事了,这篇文章也在我的博客中以草稿形式(只有标题没有内容,当时是做了一个记录,想着后来有时间了去研究,目前这种草稿还有很多😂)存放了半年了。前段时间请教了公司UI同事一些颜色相关的概念,又去搜索了下这方面的知识,收获还是蛮大的,尤其是知乎色彩空间中的 HSL、HSV、HSB 有什么区别?这篇提问中,@Forrest近乎大白话的回答,超赞👍。
想着在年前把博客更新升级一下,于是顺手修复了一些已知的BUG,优化了留言模块,升级了nginx,更是为了利于SEO,在webpack的编译中加入了prerender-spa-plugin
预渲染模块。经本地window主机测试后,一切OK。这便着手在线上Linux主机中配置,nginx, node, mongod 等的升级一切顺利,但就是在项目中 npm install
的时候卡住了,而且这一卡就是一天多!难道是我安装姿势不对,需要起来重睡? 查看npm
报错原因,就出现在本文的主角phantomjs
上。
关于phantomjs
,无论是在之前的项目中写单元测试,录制UIrecorder
测试用例时都遇到过,但仅仅也是遇到而已,只以为仅仅是一个依赖模块,照着文档npm install
一下,对其甚至连基本的了解都没有,于是问题就出现了。
分页是WEB开发中很常用的功能,尤其是在各种前后端分离的今天,后端API返回数据,前端根据数据的count
以及当前页码pageIndex
来计算分页页码并渲染到页面上已经是一个很普通很常见的功能了。从最开始的jquery
时代到现在的各种各样的前端框架时代,分页功能都是必不可少的。
分页大多数(基本上)情况下都是对异步数据列表的处理,这里首先需要明白一下分页的流程。
在已知每页显示数据量pageSize
以及当前页码pageIndex
的情况下:
Webpack 是当下最热门的前端资源模块化管理和打包工具。它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源。还可以将按需加载的模块进行代码分隔,等到实际需要的时候再异步加载。通过loader
的转换,任何形式的资源都可以视作模块,比如 CommonJs 模块、 AMD 模块、 ES6 模块、CSS、图片、 JSON、Coffeescript、 LESS
等。
Webpack 官网
Webpack 中文指南
前段时间写过一篇介绍简单音乐播放器效果开发的博文《为你的博客添加简单的CSS3音乐播放器》,实现了单曲循环播放效果,这个效果也是我的博客首页一直有的效果,同时文中也介绍了一些简单的HTML5 Audio
标签的属性和方法,如 play()
, paused()
等。当然,之前的效果只适合诸如博客或者某个单页面(如专题页面)使用。而现在的可以称之为完整版的播放器弥补了之前的不足,增加了列表播放,音量控制,播放进度,播放时间以及播放模式,上一曲,下一曲等功能,除了歌词外,基本就是个播放器了(本来就是播放器)。
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提供的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
和(uid
或screen_name
)两个必填参数,其中参数uid
与screen_name
二者必选其一,且只能选其一;并且接口升级后,对未授权本应用的uid,将无法获取其个人简介、认证原因、粉丝数、关注数、微博数及最近一条微博内容。 完整URL如下:https://api.weibo.com/2/statuses/public_timeline.json?access_token=你的access_token&uid=要获取信息的用户uid,该接口返回一个包含了该用户各种信息的json对象。