分类：前端

使用JavaScript库jQuery.qrcode生成二维码

在线二维码生成器

使用开源二维码库 jquery.qrcode.js (https://github.com/jeromeetienne/jquery-qrcode)在浏览器上直接生成二维码，不需要后端程序支持。该库对中文不友好。

生成二维码

$('#qrcode')
	.empty(()
	.qrcode({
		render: window.CanvasPattern ? 'canvas' : 'table',
		width: 300,
		height: 300,
		text: 'blog.zhengxianjun.com'
	});

jquery.qrcode 核心是 qrcode.js，jquery.qrcode.js 将其封装成了 jQuery 扩展，封装代码很少。以表格 table 模式可以使在不支持 canvas 的浏览器下也能正常运行。

二维码配置

var options = {
	render        : "canvas", // 渲染方式 table|canvas
	width         : 256, // 二维码宽度
	height        : 256, // 二维码高度
	typeNumber    : -1, // 计算模式
	correctLevel  : QRErrorCorrectLevel.H, // 纠错等级
	background    : "#ffffff", // 背景色
	foreground    : "#000000" // 前景色
};

中文二维码

jquery.qrcode 使用 charCodeAt 转码，charCodeAt 使用的 2 位的 Unicode 编码，中文字符采用 3 位的 UTF8 编码，两者长度不匹配，导致生成二维码的源字符流有误。

需要先将 UTF16 转 UTF8，实现来自 http://www.onicos.com/staff/iz/amuse/javascript/expert/utf.txt

function utf16to8(str) {
	var out, i, len, c;
	out = '';
	len = str.length;
	for(i = 0; i < len; i++) { c = str.charCodeAt(i); if ((c >= 0x0001) && (c <= 0x007F)) { out += str.charAt(i); } else if (c > 0x07FF) {
			out += String.fromCharCode(0xE0 | ((c >> 12) & 0x0F));
			out += String.fromCharCode(0x80 | ((c >>  6) & 0x3F));
			out += String.fromCharCode(0x80 | ((c >>  0) & 0x3F));
		} else {
			out += String.fromCharCode(0xC0 | ((c >>  6) & 0x1F));
			out += String.fromCharCode(0x80 | ((c >>  0) & 0x3F));
		}
	}
	return out;
}

2016年2月29日

微信 WebView User-Agent

Mozilla/5.0 (iPhone; CPU iPhone OS 8_4 like Mac OS X) AppleWebKit/600.1.4 (KHTML, like Gecko) Mobile/12H143 MicroMessenger/6.2.2 NetType/WIFI Language/zh_CN

2016年2月23日

HTTP Content-Type 对照表

Content Type 对照表

Content-Type(Mime-Type)	扩展名	Content-Type(Mime-Type)	扩展名
application/fractals	.fif	application/futuresplash	.spl
application/hta	.hta	application/mac-binhex40	.hqx
application/msaccess	.mdb	application/msword	.wiz
application/octet-stream	.*	application/pdf	.pdf
application/pics-rules	.prf	application/pkcs10	.p10
application/pkcs7-mime	.p7m	application/pkcs7-signature	.p7s
application/pkix-crl	.crl	application/postscript	.ai
application/rat-file	.rat	application/sdp	.sdp
application/smil	.smil	application/streamingmedia	.ssm
application/vnd.adobe.edn	.edn	application/vnd.adobe.pdx	.pdx
application/vnd.adobe.rmf	.rmf	application/vnd.adobe.workflow	.awf
application/vnd.adobe.xdp	.xdp	application/vnd.adobe.xfd	.xfd
application/vnd.adobe.xfdf	.xfdf	application/vnd.android.package-archive	.apk
application/vnd.fdf	.fdf	application/vnd.iphone	.ipa
application/vnd.ms-excel	.xls	application/vnd.ms-pki.certstore	.sst
application/vnd.ms-pki.pko	.pko	application/vnd.ms-pki.seccat	.cat
application/vnd.ms-pki.stl	.stl	application/vnd.ms-powerpoint	.pwz
application/vnd.ms-project	.mpx	application/vnd.ms-wpl	.wpl
application/vnd.rn-realmedia	.rm	application/vnd.rn-realmedia-secure	.rms
application/vnd.rn-realmedia-vbr	.rmvb	application/vnd.rn-realplayer	.rnx
application/vnd.rn-realsystem-rjs	.rjs	application/vnd.rn-realsystem-rjt	.rjt
application/vnd.rn-realsystem-rmj	.rmj	application/vnd.rn-realsystem-rmx	.rmx
application/vnd.rn-recording	.rec	application/vnd.rn-rn_music_package	.rmp
application/vnd.rn-rsml	.rsml	application/vnd.symbian.install	.sisx
application/vnd.visio	.vtx	application/x-001	.001
application/x-301	.301	application/x-906	.906
application/x-a11	.a11	application/x-anv	.anv
application/x-bittorrent	.torrent	application/x-bmp	.bmp
application/x-bot	.bot	application/x-c4t	.c4t
application/x-c90	.c90	application/x-cals	.cal
application/x-cdr	.cdr	application/x-cel	.cel
application/x-cgm	.cgm	application/x-cit	.cit
application/x-cmp	.cmp	application/x-cmx	.cmx
application/x-cot	.cot	application/x-csi	.csi
application/x-cut	.cut	application/x-dbf	.dbf
application/x-dbm	.dbm	application/x-dbx	.dbx
application/x-dcx	.dcx	application/x-dgn	.dgn
application/x-dib	.dib	application/x-drw	.drw
application/x-dwf	.dwf	application/x-dwg	.dwg
application/x-dxb	.dxb	application/x-dxf	.dxf
application/x-ebx	.etd	application/x-emf	.emf
application/x-epi	.epi	application/x-frm	.frm
application/x-g4	.ig4	application/x-gbr	.gbr
application/x-gl2	.gl2	application/x-gp4	.gp4
application/x-hgl	.hgl	application/x-hmr	.hmr
application/x-hpgl	.hpg	application/x-hpl	.hpl
application/x-hrf	.hrf	application/x-icb	.icb
application/x-icq	.uin	application/x-iff	.iff
application/x-igs	.igs	application/x-img	.img
application/x-internet-signup	.isp	application/x-iphone	.iii
application/x-javascript	.mocha	application/x-laplayer-reg	.lar
application/x-latex	.latex	application/x-lbm	.lbm
application/x-ltr	.ltr	application/x-mac	.mac
application/x-mi	.mi	application/x-mil	.mil
application/x-mmxp	.mxp	application/x-ms-wmd	.wmd
application/x-ms-wmz	.wmz	application/x-msdownload	.exe
application/x-netcdf	.cdf	application/x-nrf	.nrf
application/x-out	.out	application/x-pc5	.pc5
application/x-pci	.pci	application/x-pcl	.pcl
application/x-pcx	.pcx	application/x-perl	.pl
application/x-pgl	.pgl	application/x-pic	.pic
application/x-pkcs12	.pfx	application/x-pkcs7-certificates	.spc
application/x-pkcs7-certreqresp	.p7r	application/x-plt	.plt
application/x-ppm	.ppm	application/x-pr	.pr
application/x-prn	.prn	application/x-prt	.prt
application/x-ps	.ps	application/x-ptn	.ptn
application/x-ras	.ras	application/x-red	.red
application/x-rgb	.rgb	application/x-rlc	.rlc
application/x-rle	.rle	application/x-sam	.sam
application/x-sat	.sat	application/x-sdw	.sdw
application/x-shockwave-flash	.swf	application/x-silverlight-app	.xap
application/x-slb	.slb	application/x-sld	.sld
application/x-smk	.smk	application/x-stuffit	.sit
application/x-sty	.sty	application/x-tdf	.tdf
application/x-tg4	.tg4	application/x-tga	.tga
application/x-troff-man	.man	application/x-vda	.vda
application/x-vpeg005	.vpg	application/x-wb1	.wb1
application/x-wb2	.wb2	application/x-wb3	.wb3
application/x-wk3	.wk3	application/x-wk4	.wk4
application/x-wkq	.wkq	application/x-wks	.wks
application/x-wmf	.wmf	application/x-wp6	.wp6
application/x-wpd	.wpd	application/x-wpg	.wpg
application/x-wq1	.wq1	application/x-wr1	.wr1
application/x-wri	.wri	application/x-wrk	.wrk
application/x-ws	.ws2	application/x-x509-ca-cert	.der
application/x-x_b	.x_b	application/x-x_t	.x_t
application/x-xlw	.xlw	application/x-xwd	.xwd
audio/aiff	.aiff	audio/basic	.snd
audio/mid	.rmi	audio/mp1	.mp1
audio/mp2	.mp2	audio/mp3	.mp3
audio/mpegurl	.m3u	audio/rn-mpeg	.mpga
audio/scpls	.xpl	audio/vnd.rn-realaudio	.ra
audio/wav	.wav	audio/x-la-lms	.lmsff
audio/x-liquid-file	.la1	audio/x-liquid-secure	.lavs
audio/x-mei-aac	.acp	audio/x-ms-wax	.wax
audio/x-ms-wma	.wma	audio/x-musicnet-download	.mnd
audio/x-musicnet-stream	.mns	audio/x-pn-realaudio	.rmm
audio/x-pn-realaudio-plugin	.rpm	drawing/907	.907
drawing/x-slk	.slk	drawing/x-top	.top
image/fax	.fax	image/gif	.gif
image/jpeg	.jpg	image/pnetvue	.net
image/png	.png	image/tiff	.tiff
image/vnd.rn-realpix	.rp	image/vnd.wap.wbmp	.wbmp
image/x-icon	.ico	java/*	.java
java/class	.class	message/rfc822	.nws
text/asa	.asa	text/asp	.asp
text/css	.css	text/h323	.323
text/html	.xhtml	text/iuls	.uls
text/plain	.txt	text/scriptlet	.wsc
text/vnd.rn-realtext	.rt	text/vnd.rn-realtext3d	.r3t
text/vnd.wap.wml	.wml	text/webviewhtml	.htt
text/x-component	.htc	text/x-ms-odc	.odc
text/x-vcard	.vcf	text/xml	.xslt
video/avi	.avi	video/mpeg	.mpv2
video/mpeg4	.mp4	video/mpg	.mpv
video/vnd.rn-realvideo	.rv	video/x-ivf	.IVF
video/x-mpeg	.mps	video/x-mpg	.mpa
video/x-ms-asf	.asx	video/x-ms-wm	.wm
video/x-ms-wmv	.wmv	video/x-ms-wmx	.wmx
video/x-ms-wvx	.wvx	video/x-sgi-movie	.movie

PHP 数组

$ar_type = array(
	'*' => 'application/octet-stream',
	'001' => 'application/x-001',
	'301' => 'application/x-301',
	'323' => 'text/h323',
	'906' => 'application/x-906',
	'907' => 'drawing/907',
	'IVF' => 'video/x-ivf',
	'a11' => 'application/x-a11',
	'acp' => 'audio/x-mei-aac',
	'ai' => 'application/postscript',
	'aif' => 'audio/aiff',
	'aifc' => 'audio/aiff',
	'aiff' => 'audio/aiff',
	'anv' => 'application/x-anv',
	'apk' => 'application/vnd.android.package-archive',
	'asa' => 'text/asa',
	'asf' => 'video/x-ms-asf',
	'asp' => 'text/asp',
	'asx' => 'video/x-ms-asf',
	'au' => 'audio/basic',
	'avi' => 'video/avi',
	'awf' => 'application/vnd.adobe.workflow',
	'biz' => 'text/xml',
	'bmp' => 'application/x-bmp',
	'bot' => 'application/x-bot',
	'c4t' => 'application/x-c4t',
	'c90' => 'application/x-c90',
	'cal' => 'application/x-cals',
	'cat' => 'application/vnd.ms-pki.seccat',
	'cdf' => 'application/x-netcdf',
	'cdr' => 'application/x-cdr',
	'cel' => 'application/x-cel',
	'cer' => 'application/x-x509-ca-cert',
	'cg4' => 'application/x-g4',
	'cgm' => 'application/x-cgm',
	'cit' => 'application/x-cit',
	'class' => 'java/class',
	'cml' => 'text/xml',
	'cmp' => 'application/x-cmp',
	'cmx' => 'application/x-cmx',
	'cot' => 'application/x-cot',
	'crl' => 'application/pkix-crl',
	'crt' => 'application/x-x509-ca-cert',
	'csi' => 'application/x-csi',
	'css' => 'text/css',
	'cut' => 'application/x-cut',
	'dbf' => 'application/x-dbf',
	'dbm' => 'application/x-dbm',
	'dbx' => 'application/x-dbx',
	'dcd' => 'text/xml',
	'dcx' => 'application/x-dcx',
	'der' => 'application/x-x509-ca-cert',
	'dgn' => 'application/x-dgn',
	'dib' => 'application/x-dib',
	'dll' => 'application/x-msdownload',
	'doc' => 'application/msword',
	'dot' => 'application/msword',
	'drw' => 'application/x-drw',
	'dtd' => 'text/xml',
	'dwf' => 'application/x-dwf',
	'dwg' => 'application/x-dwg',
	'dxb' => 'application/x-dxb',
	'dxf' => 'application/x-dxf',
	'edn' => 'application/vnd.adobe.edn',
	'emf' => 'application/x-emf',
	'eml' => 'message/rfc822',
	'ent' => 'text/xml',
	'epi' => 'application/x-epi',
	'eps' => 'application/x-ps',
	'etd' => 'application/x-ebx',
	'exe' => 'application/x-msdownload',
	'fax' => 'image/fax',
	'fdf' => 'application/vnd.fdf',
	'fif' => 'application/fractals',
	'fo' => 'text/xml',
	'frm' => 'application/x-frm',
	'g4' => 'application/x-g4',
	'gbr' => 'application/x-gbr',
	'gif' => 'image/gif',
	'gl2' => 'application/x-gl2',
	'gp4' => 'application/x-gp4',
	'hgl' => 'application/x-hgl',
	'hmr' => 'application/x-hmr',
	'hpg' => 'application/x-hpgl',
	'hpl' => 'application/x-hpl',
	'hqx' => 'application/mac-binhex40',
	'hrf' => 'application/x-hrf',
	'hta' => 'application/hta',
	'htc' => 'text/x-component',
	'htm' => 'text/html',
	'html' => 'text/html',
	'htt' => 'text/webviewhtml',
	'htx' => 'text/html',
	'icb' => 'application/x-icb',
	'ico' => 'image/x-icon',
	'iff' => 'application/x-iff',
	'ig4' => 'application/x-g4',
	'igs' => 'application/x-igs',
	'iii' => 'application/x-iphone',
	'img' => 'application/x-img',
	'ins' => 'application/x-internet-signup',
	'ipa' => 'application/vnd.iphone',
	'isp' => 'application/x-internet-signup',
	'java' => 'java/*',
	'jfif' => 'image/jpeg',
	'jpe' => 'image/jpeg',
	'jpeg' => 'image/jpeg',
	'jpg' => 'image/jpeg',
	'js' => 'application/x-javascript',
	'jsp' => 'text/html',
	'la1' => 'audio/x-liquid-file',
	'lar' => 'application/x-laplayer-reg',
	'latex' => 'application/x-latex',
	'lavs' => 'audio/x-liquid-secure',
	'lbm' => 'application/x-lbm',
	'lmsff' => 'audio/x-la-lms',
	'ls' => 'application/x-javascript',
	'ltr' => 'application/x-ltr',
	'm1v' => 'video/x-mpeg',
	'm2v' => 'video/x-mpeg',
	'm3u' => 'audio/mpegurl',
	'm4e' => 'video/mpeg4',
	'mac' => 'application/x-mac',
	'man' => 'application/x-troff-man',
	'math' => 'text/xml',
	'mdb' => 'application/msaccess',
	'mfp' => 'application/x-shockwave-flash',
	'mht' => 'message/rfc822',
	'mhtml' => 'message/rfc822',
	'mi' => 'application/x-mi',
	'mid' => 'audio/mid',
	'midi' => 'audio/mid',
	'mil' => 'application/x-mil',
	'mml' => 'text/xml',
	'mnd' => 'audio/x-musicnet-download',
	'mns' => 'audio/x-musicnet-stream',
	'mocha' => 'application/x-javascript',
	'movie' => 'video/x-sgi-movie',
	'mp1' => 'audio/mp1',
	'mp2' => 'audio/mp2',
	'mp2v' => 'video/mpeg',
	'mp3' => 'audio/mp3',
	'mp4' => 'video/mpeg4',
	'mpa' => 'video/x-mpg',
	'mpd' => 'application/vnd.ms-project',
	'mpe' => 'video/x-mpeg',
	'mpeg' => 'video/mpg',
	'mpg' => 'video/mpg',
	'mpga' => 'audio/rn-mpeg',
	'mpp' => 'application/vnd.ms-project',
	'mps' => 'video/x-mpeg',
	'mpt' => 'application/vnd.ms-project',
	'mpv' => 'video/mpg',
	'mpv2' => 'video/mpeg',
	'mpw' => 'application/vnd.ms-project',
	'mpx' => 'application/vnd.ms-project',
	'mtx' => 'text/xml',
	'mxp' => 'application/x-mmxp',
	'net' => 'image/pnetvue',
	'nrf' => 'application/x-nrf',
	'nws' => 'message/rfc822',
	'odc' => 'text/x-ms-odc',
	'out' => 'application/x-out',
	'p10' => 'application/pkcs10',
	'p12' => 'application/x-pkcs12',
	'p7b' => 'application/x-pkcs7-certificates',
	'p7c' => 'application/pkcs7-mime',
	'p7m' => 'application/pkcs7-mime',
	'p7r' => 'application/x-pkcs7-certreqresp',
	'p7s' => 'application/pkcs7-signature',
	'pc5' => 'application/x-pc5',
	'pci' => 'application/x-pci',
	'pcl' => 'application/x-pcl',
	'pcx' => 'application/x-pcx',
	'pdf' => 'application/pdf',
	'pdx' => 'application/vnd.adobe.pdx',
	'pfx' => 'application/x-pkcs12',
	'pgl' => 'application/x-pgl',
	'pic' => 'application/x-pic',
	'pko' => 'application/vnd.ms-pki.pko',
	'pl' => 'application/x-perl',
	'plg' => 'text/html',
	'pls' => 'audio/scpls',
	'plt' => 'application/x-plt',
	'png' => 'image/png',
	'pot' => 'application/vnd.ms-powerpoint',
	'ppa' => 'application/vnd.ms-powerpoint',
	'ppm' => 'application/x-ppm',
	'pps' => 'application/vnd.ms-powerpoint',
	'ppt' => 'application/vnd.ms-powerpoint',
	'pr' => 'application/x-pr',
	'prf' => 'application/pics-rules',
	'prn' => 'application/x-prn',
	'prt' => 'application/x-prt',
	'ps' => 'application/x-ps',
	'ptn' => 'application/x-ptn',
	'pwz' => 'application/vnd.ms-powerpoint',
	'r3t' => 'text/vnd.rn-realtext3d',
	'ra' => 'audio/vnd.rn-realaudio',
	'ram' => 'audio/x-pn-realaudio',
	'ras' => 'application/x-ras',
	'rat' => 'application/rat-file',
	'rdf' => 'text/xml',
	'rec' => 'application/vnd.rn-recording',
	'red' => 'application/x-red',
	'rgb' => 'application/x-rgb',
	'rjs' => 'application/vnd.rn-realsystem-rjs',
	'rjt' => 'application/vnd.rn-realsystem-rjt',
	'rlc' => 'application/x-rlc',
	'rle' => 'application/x-rle',
	'rm' => 'application/vnd.rn-realmedia',
	'rmf' => 'application/vnd.adobe.rmf',
	'rmi' => 'audio/mid',
	'rmj' => 'application/vnd.rn-realsystem-rmj',
	'rmm' => 'audio/x-pn-realaudio',
	'rmp' => 'application/vnd.rn-rn_music_package',
	'rms' => 'application/vnd.rn-realmedia-secure',
	'rmvb' => 'application/vnd.rn-realmedia-vbr',
	'rmx' => 'application/vnd.rn-realsystem-rmx',
	'rnx' => 'application/vnd.rn-realplayer',
	'rp' => 'image/vnd.rn-realpix',
	'rpm' => 'audio/x-pn-realaudio-plugin',
	'rsml' => 'application/vnd.rn-rsml',
	'rt' => 'text/vnd.rn-realtext',
	'rtf' => 'application/msword',
	'rv' => 'video/vnd.rn-realvideo',
	'sam' => 'application/x-sam',
	'sat' => 'application/x-sat',
	'sdp' => 'application/sdp',
	'sdw' => 'application/x-sdw',
	'sis' => 'application/vnd.symbian.install',
	'sisx' => 'application/vnd.symbian.install',
	'sit' => 'application/x-stuffit',
	'slb' => 'application/x-slb',
	'sld' => 'application/x-sld',
	'slk' => 'drawing/x-slk',
	'smi' => 'application/smil',
	'smil' => 'application/smil',
	'smk' => 'application/x-smk',
	'snd' => 'audio/basic',
	'sol' => 'text/plain',
	'sor' => 'text/plain',
	'spc' => 'application/x-pkcs7-certificates',
	'spl' => 'application/futuresplash',
	'spp' => 'text/xml',
	'ssm' => 'application/streamingmedia',
	'sst' => 'application/vnd.ms-pki.certstore',
	'stl' => 'application/vnd.ms-pki.stl',
	'stm' => 'text/html',
	'sty' => 'application/x-sty',
	'svg' => 'text/xml',
	'swf' => 'application/x-shockwave-flash',
	'tdf' => 'application/x-tdf',
	'tg4' => 'application/x-tg4',
	'tga' => 'application/x-tga',
	'tif' => 'image/tiff',
	'tiff' => 'image/tiff',
	'tld' => 'text/xml',
	'top' => 'drawing/x-top',
	'torrent' => 'application/x-bittorrent',
	'tsd' => 'text/xml',
	'txt' => 'text/plain',
	'uin' => 'application/x-icq',
	'uls' => 'text/iuls',
	'vcf' => 'text/x-vcard',
	'vda' => 'application/x-vda',
	'vdx' => 'application/vnd.visio',
	'vml' => 'text/xml',
	'vpg' => 'application/x-vpeg005',
	'vsd' => 'application/vnd.visio',
	'vss' => 'application/vnd.visio',
	'vst' => 'application/vnd.visio',
	'vsw' => 'application/vnd.visio',
	'vsx' => 'application/vnd.visio',
	'vtx' => 'application/vnd.visio',
	'vxml' => 'text/xml',
	'wav' => 'audio/wav',
	'wax' => 'audio/x-ms-wax',
	'wb1' => 'application/x-wb1',
	'wb2' => 'application/x-wb2',
	'wb3' => 'application/x-wb3',
	'wbmp' => 'image/vnd.wap.wbmp',
	'wiz' => 'application/msword',
	'wk3' => 'application/x-wk3',
	'wk4' => 'application/x-wk4',
	'wkq' => 'application/x-wkq',
	'wks' => 'application/x-wks',
	'wm' => 'video/x-ms-wm',
	'wma' => 'audio/x-ms-wma',
	'wmd' => 'application/x-ms-wmd',
	'wmf' => 'application/x-wmf',
	'wml' => 'text/vnd.wap.wml',
	'wmv' => 'video/x-ms-wmv',
	'wmx' => 'video/x-ms-wmx',
	'wmz' => 'application/x-ms-wmz',
	'wp6' => 'application/x-wp6',
	'wpd' => 'application/x-wpd',
	'wpg' => 'application/x-wpg',
	'wpl' => 'application/vnd.ms-wpl',
	'wq1' => 'application/x-wq1',
	'wr1' => 'application/x-wr1',
	'wri' => 'application/x-wri',
	'wrk' => 'application/x-wrk',
	'ws' => 'application/x-ws',
	'ws2' => 'application/x-ws',
	'wsc' => 'text/scriptlet',
	'wsdl' => 'text/xml',
	'wvx' => 'video/x-ms-wvx',
	'x_b' => 'application/x-x_b',
	'x_t' => 'application/x-x_t',
	'xap' => 'application/x-silverlight-app',
	'xdp' => 'application/vnd.adobe.xdp',
	'xdr' => 'text/xml',
	'xfd' => 'application/vnd.adobe.xfd',
	'xfdf' => 'application/vnd.adobe.xfdf',
	'xhtml' => 'text/html',
	'xls' => 'application/vnd.ms-excel',
	'xlw' => 'application/x-xlw',
	'xml' => 'text/xml',
	'xpl' => 'audio/scpls',
	'xq' => 'text/xml',
	'xql' => 'text/xml',
	'xquery' => 'text/xml',
	'xsd' => 'text/xml',
	'xsl' => 'text/xml',
	'xslt' => 'text/xml',
	'xwd' => 'application/x-xwd',
);

JSON 字符串

2015年11月4日

在浏览器端使用less.js解析less文件
非常喜欢 less 的变量、混合以及嵌套。当不断重复书写 CSS 时，嵌套 CSS 必不可少，却又略显多余。因为大部分情况下，它并没有提升编写 CSS 的能力，只是不断地重复。

了解到有多种 CSS 的扩展语言，首先尝试使用 less。

less 的特性有很多，支持变量、混合、嵌套、函数、运算、颜色函数、命名空间、作用域、文件引入、甚至 JavaScript 表达式。

利用 less.js 解析 less

第一步，引入 style.less 文件
```
<link rel="stylesheet/less" type="text/css" href="/static/ran/less/site/common.less?1.0.0"/>
```
注意 rel 属性需要设置为 stylesheet/less。

第二步，引入 less.js 文件
```
<script src="http://cdn.bootcss.com/less.js/2.5.3/less.min.js?1.0.0"></script>
```
一定要在所有 less 文件之后引入 less.js。

第三部，保证 common.less 可以通过 AJAX 输出

因为 less.js 通过 ajax 下载 common.less 文件，所以若 common.less 与当前网站不在同域，可能会导致无法下载。
若 common.less 与当前网站不同域，需要在 header 信息中增加 Access-Control-Allow-Origin，允许网站通过 AJAX 访问。
2015年10月26日

动画事件 webkitAnimationStart webkitAnimationEnd

var d = document.getElementById('animation');
d.addEventListener('webkitAnimationStart', listener);
d.addEventListener('webkitAnimationEnd', listener);
function listener(e) {
	console.log(e.type, e);
}

AnimationEvent 事件对象具有

animationName	动画名称
elapsedTime	动画运行时间(秒)
type	animationstart
以及其他事件属性

2015年9月1日

使用html新属性download自定义下载文件

在 HTML5 中可以设置 a 标签的 download 属性，实现点击超链接时直接下载文件而不是打开超链接。

代码示例：

<a href="woxinfeishi-bukezhuanye.jpg" download="我心匪石.jpg">点击下载图片</a>

Demo 示例：html-download.html

目前该属性仅 Chrome、Firefox 支持。

使用 download 属性需要注意，只有同域（来源相同）时才会得到完整支持。这一点 w3school 并没有明确指出。Mozilla 的开发文档里有一行小字：This attribute is only honored for links to resources with the same-origin.

在 Chrome 下，当 href 不同域，会以原始的名称下载文件。在 Firefox 下，当 href 不同域时，会当做普通 a 处理，直接在浏览器中打开该连接。

我们知道通过程序下载文件时，设置 Content-Disposition 头信息，可以告诉浏览器文件存储的名字。火狐浏览器会优先使用 Content-Disposition 给出的文件名。

2015年8月30日

键盘数值对照表

按键	数值	描述
DOM_VK_CANCEL	3	Cancel key
DOM_VK_HELP	6	Help key
DOM_VK_BACK_SPACE	8	退格键
DOM_VK_TAB	9	Tab键
DOM_VK_CLEAR	12	“5” key on Numpad when NumLock is unlocked. Or on Mac, clear key which is positioned at NumLock key
DOM_VK_RETURN	13	Return/enter key on the main keyboard
DOM_VK_ENTER	14	Reserved, but not used
DOM_VK_SHIFT	16	Shift 键
DOM_VK_CONTROL	17	Ctrl 键
DOM_VK_ALT	18	Alt 键(Mac上为Option 键)
DOM_VK_PAUSE	19	Pause key
DOM_VK_CAPS_LOCK	20	Caps lock
DOM_VK_ESCAPE	27	Escape 键
DOM_VK_SPACE	32	空格键
DOM_VK_PAGE_UP	33	Page Up key
DOM_VK_PAGE_DOWN	34	Page Down key
DOM_VK_END	35	End key
DOM_VK_HOME	36	Home key
DOM_VK_LEFT	37	Left arrow
DOM_VK_UP	38	Up arrow
DOM_VK_RIGHT	39	Right arrow
DOM_VK_DOWN	40	Down arrow
DOM_VK_SELECT	41	Linux support for this keycode was added in Gecko 4.0
DOM_VK_PRINT	42	Linux support for this keycode was added in Gecko 4.0
DOM_VK_EXECUTE	43	Linux support for this keycode was added in Gecko 4.0
DOM_VK_PRINTSCREEN	44	Print Screen key
DOM_VK_INSERT	45	Ins(ert) key
DOM_VK_DELETE	46	Del(ete) key
DOM_VK_0	48
DOM_VK_1	49
DOM_VK_2	50
DOM_VK_3	51
DOM_VK_4	52
DOM_VK_5	53
DOM_VK_6	54
DOM_VK_7	55
DOM_VK_8	56
DOM_VK_9	57
DOM_VK_COLON	58	Colon (“:”) key
DOM_VK_SEMICOLON	59	Semicolon (“;”) key
DOM_VK_LESS_THAN	60	Less-than (“<“) key
DOM_VK_EQUALS	61	Equals (“=”) key
DOM_VK_GREATER_THAN	62	Greater-than (“>”) key
DOM_VK_QUESTION_MARK	63	Question mark (“?”) key
DOM_VK_AT	64	Atmark (“@”) key
DOM_VK_A	65
DOM_VK_B	66
DOM_VK_C	67
DOM_VK_D	68
DOM_VK_E	69
DOM_VK_F	70
DOM_VK_G	71
DOM_VK_H	72
DOM_VK_I	73
DOM_VK_J	74
DOM_VK_K	75
DOM_VK_L	76
DOM_VK_M	77
DOM_VK_N	78
DOM_VK_O	79
DOM_VK_P	80
DOM_VK_Q	81
DOM_VK_R	82
DOM_VK_S	83
DOM_VK_T	84
DOM_VK_U	85
DOM_VK_V	86
DOM_VK_W	87
DOM_VK_X	88
DOM_VK_Y	89
DOM_VK_Z	90
DOM_VK_CONTEXT_MENU	93
DOM_VK_NUMPAD0	96	0 on the numeric keypad
DOM_VK_NUMPAD1	97	1 on the numeric keypad
DOM_VK_NUMPAD2	98	2 on the numeric keypad
DOM_VK_NUMPAD3	99	3 on the numeric keypad
DOM_VK_NUMPAD4	100	4 on the numeric keypad
DOM_VK_NUMPAD5	101	5 on the numeric keypad
DOM_VK_NUMPAD6	102	6 on the numeric keypad
DOM_VK_NUMPAD7	103	7 on the numeric keypad
DOM_VK_NUMPAD8	104	8 on the numeric keypad
DOM_VK_NUMPAD9	105	9 on the numeric keypad
DOM_VK_MULTIPLY	106	* on the numeric keypad
DOM_VK_ADD	107	+ on the numeric keypad
DOM_VK_SEPARATOR	108
DOM_VK_SUBTRACT	109	– on the numeric keypad
DOM_VK_DECIMAL	110	Decimal point on the numeric keypad
DOM_VK_DIVIDE	111	/ on the numeric keypad
DOM_VK_F1	112	F1 键
DOM_VK_F2	113	F2 键
DOM_VK_F3	114	F3 键
DOM_VK_F4	115	F4 键
DOM_VK_F5	116	F5 键
DOM_VK_F6	117	F6 键
DOM_VK_F7	118	F7 键
DOM_VK_F8	119	F8 键
DOM_VK_F9	120	F9 键
DOM_VK_F10	121	F10 键
DOM_VK_F11	122	F11 键
DOM_VK_F12	123	F12 键
DOM_VK_F13	124	F13 键
DOM_VK_F14	125	F14 键
DOM_VK_F15	126	F15 键
DOM_VK_F16	127	F16 键
DOM_VK_F17	128	F17 键
DOM_VK_F18	129	F18 键
DOM_VK_F19	130	F19 键
DOM_VK_F20	131	F20 键
DOM_VK_F21	132	F21 键
DOM_VK_F22	133	F22 键
DOM_VK_F23	134	F23 键
DOM_VK_F24	135	F24 键
DOM_VK_NUM_LOCK	144	Num Lock key
DOM_VK_SCROLL_LOCK	145	Scroll Lock key
DOM_VK_CIRCUMFLEX	160	Circumflex (“^”) key
DOM_VK_EXCLAMATION	161	Exclamation (“!”) key
DOM_VK_DOUBLE_QUOTE	162	Double quote (“””) key
DOM_VK_HASH	163	Hash (“#”) key
DOM_VK_DOLLAR	164	Dollar sign (“$”) key
DOM_VK_PERCENT	165	Percent (“%”) key
DOM_VK_AMPERSAND	166	Ampersand (“&”) key
DOM_VK_UNDERSCORE	167	Underscore (“_”) key
DOM_VK_OPEN_PAREN	168	Open parenthesis (“(“) key
DOM_VK_CLOSE_PAREN	169	Close parenthesis (“)”) key
DOM_VK_ASTERISK	170	Asterisk (“*”) key
DOM_VK_PLUS	171	Plus (“+”) key
DOM_VK_PIPE	172	Pipe (“\|”) key
DOM_VK_HYPHEN_MINUS	173	Hyphen/Minus (“-“) key
DOM_VK_OPEN_CURLY_BRACKET	174	Open curly bracket (“{“) key
DOM_VK_CLOSE_CURLY_BRACKET	175	Close curly bracket (“}”) key
DOM_VK_TILDE	176	Tilde (“~”) key
DOM_VK_COMMA	188	Comma (“,”) key
DOM_VK_PERIOD	190	Period (“.”) key
DOM_VK_SLASH	191	Slash (“/”) key
DOM_VK_BACK_QUOTE	192	Back tick (“`”) key
DOM_VK_OPEN_BRACKET	219	Open square bracket (“[“) key
DOM_VK_BACK_SLASH	220	Back slash (“\”) key
DOM_VK_CLOSE_BRACKET	221	Close square bracket (“]”) key
DOM_VK_QUOTE	222	Quote (”’) key
DOM_VK_META	224	Command key on Mac
DOM_VK_ALTGR	225	AltGr key on Linux
DOM_VK_WIN	91	Windows logo key on Windows. Or Super or Hyper key on Linux
DOM_VK_KANA	21	Linux support for this keycode was added in Gecko 4.0
DOM_VK_EISU	22	“英数” key on Japanese Mac keyboard
DOM_VK_JUNJA	23	Linux support for this keycode was added in Gecko 4.0
DOM_VK_FINAL	24	Linux support for this keycode was added in Gecko 4.0
DOM_VK_HANJA	25	Linux support for this keycode was added in Gecko 4.0
DOM_VK_KANJI	25	Linux support for this keycode was added in Gecko 4.0
DOM_VK_CONVERT	28	Linux support for this keycode was added in Gecko 4.0
DOM_VK_NONCONVERT	29	Linux support for this keycode was added in Gecko 4.0
DOM_VK_ACCEPT	30	Linux support for this keycode was added in Gecko 4.0
DOM_VK_MODECHANGE	31	Linux support for this keycode was added in Gecko 4.0
DOM_VK_SLEEP	95	Linux support for this keycode was added in Gecko 4.0

数值到按键名对照关系

var mapCodeName = {
    3: "cancel",
    6: "help",
    8: "back_space",
    9: "tab",
    12: "clear",
    13: "return",
    14: "enter",
    16: "shift",
    17: "control",
    18: "alt",
    19: "pause",
    20: "caps_lock",
    27: "escape",
    32: "space",
    33: "page_up",
    34: "page_down",
    35: "end",
    36: "home",
    37: "left",
    38: "up",
    39: "right",
    40: "down",
    41: "select",
    42: "print",
    43: "execute",
    44: "printscreen",
    45: "insert",
    46: "delete",
    48: "0",
    49: "1",
    50: "2",
    51: "3",
    52: "4",
    53: "5",
    54: "6",
    55: "7",
    56: "8",
    57: "9",
    58: "colon",
    59: "semicolon",
    60: "less_than",
    61: "equals",
    62: "greater_than",
    63: "question_mark",
    64: "at",
    65: "a",
    66: "b",
    67: "c",
    68: "d",
    69: "e",
    70: "f",
    71: "g",
    72: "h",
    73: "i",
    74: "j",
    75: "k",
    76: "l",
    77: "m",
    78: "n",
    79: "o",
    80: "p",
    81: "q",
    82: "r",
    83: "s",
    84: "t",
    85: "u",
    86: "v",
    87: "w",
    88: "x",
    89: "y",
    90: "z",
    93: "context_menu",
    96: "numpad0",
    97: "numpad1",
    98: "numpad2",
    99: "numpad3",
    100: "numpad4",
    101: "numpad5",
    102: "numpad6",
    103: "numpad7",
    104: "numpad8",
    105: "numpad9",
    106: "multiply",
    107: "add",
    108: "separator",
    109: "subtract",
    110: "decimal",
    111: "divide",
    112: "f1",
    113: "f2",
    114: "f3",
    115: "f4",
    116: "f5",
    117: "f6",
    118: "f7",
    119: "f8",
    120: "f9",
    121: "f10",
    122: "f11",
    123: "f12",
    124: "f13",
    125: "f14",
    126: "f15",
    127: "f16",
    128: "f17",
    129: "f18",
    130: "f19",
    131: "f20",
    132: "f21",
    133: "f22",
    134: "f23",
    135: "f24",
    144: "num_lock",
    145: "scroll_lock",
    160: "circumflex",
    161: "exclamation",
    162: "double_quote",
    163: "hash",
    164: "dollar",
    165: "percent",
    166: "ampersand",
    167: "underscore",
    168: "open_paren",
    169: "close_paren",
    170: "asterisk",
    171: "plus",
    172: "pipe",
    173: "hyphen_minus",
    174: "open_curly_bracket",
    175: "close_curly_bracket",
    176: "tilde",
    188: "comma",
    190: "period",
    191: "slash",
    192: "back_quote",
    219: "open_bracket",
    220: "back_slash",
    221: "close_bracket",
    222: "quote",
    224: "meta",
    225: "altgr",
    91: "win",
    21: "kana",
    22: "eisu",
    23: "junja",
    24: "final",
    25: "hanja",
    28: "convert",
    29: "nonconvert",
    30: "accept",
    31: "modechange",
    95: "sleep"
};

2015年8月18日

使用 Firefox 在 Android 设备上进行网页调试

通过 Firefox 提供的开发者工具——远程调试安卓版Firefox浏览器，能够实现在是 PC 浏览器上调试手机浏览器中的网页。相比较通过使用 Chrome 在 Android 设备上进行网页调试，配置过程略复杂一点。

2015年8月8日
整合 Advanced lazy load 与 Responsive Lightbox
因为博客文章展示页面宽度有限制，一些文章使用到的图片原始宽度会超出，导致图像显示时必须压缩宽度，使得图像模糊。比如浏览器如何加载网页 — JavaScript PerformanceTiming中的第一张图片。所以考虑增加一个图像浏览插件，使得点击图像使得点击图片使能够弹出较大的对话框，尽可能按原始宽度展示图像。

今天尝试了几款，最终选择了 Responsive Lightbox by dFactory。

在使用这款插件时遇到了几个问题：
1. 文章的图像没有设置链接，点击图像没有响应
2. 文章的图像使用了懒加载，无法识别正确的图像地址
关于第一点，在试用的插件中均遇到了这个问题，也就意味着即使今后在文章中添加图片时一并添加链接，以前的文章仍然无法使用这个功能。(修改所有历史文章不是一个明智的选择)

关于第二点，由于这些插件都没有解决第一个问题，所以刚开始考虑把懒加载去掉。

查看了一下 Responsive Lightbox 的文件 responsive-lightbox/js/front.js ，发现它是查询特定 a 标签：
```
$( 'a[rel*="' + rlArgs.selector + '"], a[data-rel*="' + rlArgs.selector + '"]' )
```
设想可以通过 JavaScript 给图片追加 a 标签：
```
$('img[src]').each(function() {
	var src, img = $(this);
	if (img.parent().prop('tagName') == 'A') {
		return;
	}
	// 1, 兼容 lazy load; 2, 兼容未设置链接的图片
	src = img.attr('imageholder') || img.attr('src');
	if (src) {
		$('<a data-rel="' + rlArgs.selector + '[lightbox[gallery-AAAA]" href="' + src + '" target="_blank"></a>')
			.insertBefore(img)
			.append(img);
	}
});

if (window.innerWidth < 480) {
	return false;
}
```
判断 window.innerWidth，是因为在手机上展示效果不够理想。

至此，在改动较少且不影响体验和增加图片下载的前提下整合了 Advanced lazy load 和 Responsive Lightbox。
2015年7月19日

分类： 前端