子匠_Zijor | 前端开发 / 程序媛 / 潜心学艺。

【实战】HTML5摄像头拍照组件的封装

摄像头调用主要使用了navigator.getUserMedia()函数。为了将摄像头的画像实时展现,可以将录像数据流导入到video或者canvas中。在展示的时候,建议使用video作为视频流容易,因为canvas绘画视频帧时存在一定的卡顿。
在像素数据分析和将画像转成图片,则应将视频流导到canvas中,使用canvas API中进行数据提取。

在这里,我使用了一个隐藏…

+ 阅读更多

【小笔记】MySQL中批量update数据的sql语句

UPDATE my_table
    SET my_field_1 = CASE id
        WHEN 1 THEN 'my_value_11'
        WHEN 2 THEN 'my_value_12'
        WHEN 3 THEN 'my_value_13'
    END,
    my_field_2 = CASE id
        WHEN 1 THEN 'my_value_21'
        WHEN 2 THEN 'my_value_22'
+ 阅读更多

获取DOM元素的兼容函数库封装(兼容至IE6)

缘由:虽然jQuery的DOM操作兼容性的封装简直堪称完美,而且IE8+浏览器也能使用强大的document.querySelector,然而。。。

然而却还有一些网页并不引用jQuery,而且还希望能兼容至IE6,真是太尴尬了。。。

所以封装获取DOM元素的方法库,备不时之需,权当练手。

直接上代码:

var domUtil = {
    // 获取DOM元素
    get: function(query) {
        var _this = this;
+ 阅读更多

【实战】数字线性变化的动画实现(原生JS || jQuery)

在一些数据展示的专题页里,有时候希望数字能动态从某一个数变化到另一个数,以此来吸引用户眼球,突出数据。

于是有了下文。

在这里,我用了两种方式:一种是原生的JavaScript,另一种是jQuery插件。

数字线性变化的原理很简单,就是让数字增量变化,并循环动画。

原生JS版

首先获取DOM元素。为了兼容到IE6,兼容性方法如下:

var domUtil = {
    // 获取DOM元素
    get: function(query)
+ 阅读更多

摄影:上海行(复旦、同济、外滩)-20170212

闻说周四上午,上海飘雪了。所以,怀着一颗侥幸的心理,说不定上海周六也能下一场大雪吧,Maybe。。。于是买好了周六去上海的票,去复旦大学找我舍友。

舍友做化学实验,很忙,只能下午四点之后陪我。所以,我一个人在校园里闲逛,闲逛,闲逛。。。

一. 复旦大学-江湾校区

DSC03056.jpg-302.8kB

DSC03061.jpg-204.4kB

DSC03078.jpg-271.1kB

DSC03081.jpg-310.7kB

DSC03088.jpg-194.9kB

DSC03117.jpg-857.1kB

DSC03119.jpg-745.8kB

DSC03124.jpg-702.8kB

DSC03136.jpg-910.8kB

DSC03145.jpg-138.1kB

DSC03150.jpg-184.6kB

DSC03155.jpg-435.7kB

DSC03161.jpg-252kB

DSC03162.jpg-209.3kB

DSC03163.jpg-210.5kB

DSC03166.jpg-688.5kB

二. 复旦大学-邯郸校区

DSC03190.jpg-801.4kB

DSC03202.jpg-587.5kB

DSC03204.jpg-404.2kB

DSC03214.jpg-628.5kB

DSC03220.jpg-243.7kB

三. 同济大学

DSC03224.jpg-325.8kB

DSC03233.jpg-822.1kB

DSC03235.jpg-189.5kB

DSC03238_1.jpg-647.3kB

DSC03257.jpg-190kB

DSC03260.jpg-650.6kB

DSC03265.jpg-249.4kB

DSC03272.jpg-436.4kB

DSC03273.jpg-430.7kB

四. 外滩

DSC03169.jpg-539.9kB

DSC03174.jpg-546.6kB

DSC03182.jpg-397.7kB

DSC03186.jpg-423.6kB

+ 阅读更多

最美我家乡系列(二)– 20170130

摄于2017年的大年初二下午和大年初三早上。

初二这天,天空蓝得接近纯色,空气特别干净,阳光甚好,白云依稀。真是个拍照的好机会呀!所以下午一探完外公回家,就马上跑到家楼顶,咔嚓咔嚓嗯快门。几乎不用后期,美得一塌糊涂。

DSC03002-min.jpg-865.3kB

DSC03001-min.jpg-1060.2kB

DSC03003-min.jpg-955.9kB

DSC03006-min.jpg-854.4kB

DSC03007-min.jpg-1106.8kB

闻说初三这天要下雨,然而并没有下。揉搓惺忪睡眼的时候已是将近八点,看到阳台上的晨光依稀,再看看东方,却见一轮将要破晓的黄金,缝里漏了些许霞光。好机会呀!赶紧一溜烟上楼顶,拍下了这张照片。…

+ 阅读更多

最美我家乡系列(一)– 20170128

我家乡 —— 广东信宜市的一个小村落里。有山有水有树林。

摄于2017年的年初一。阳光很好,天空不算太蓝。可能是因为早上各家各户都放最大封的鞭炮,所以走在路上依然能依稀闻到一股火药味,空气不算干净。

摄于我家楼顶。图四是我家,桃红色与白色混搭的小楼,一个让游子魂牵梦绕的地方。

DSC02992-min.jpg-894.6kB

DSC02994-min.jpg-1406.7kB

DSC02995-min.jpg-1043.1kB

DSC02998-min.jpg-979.7kB

+ 阅读更多

2017年1月份个人小结

此处输入图片的描述

准备要回家过年啦,下旬应该是不接触网络不接触技术潮流的乡下生活了,准备在广东信宜老家好好陪陪爷爷奶奶他们。所以余下三分之一的时间也不会有什么大变动,先写小结。

这个月负面情绪相对较多,真是尴尬。都是小事,都不算委屈,却暗中拨动了一种孤单的思绪,老想家。但是每次老妈一通电话过来谈到男朋友的时候,我每次都乐呵…

+ 阅读更多

Webstorm(Mac版)快捷键整理

用Webstorm来调试Node代码简直太赞了,断点调试、属性方法快速等特性让我快速脱离了用Sublime text + node-inspector那种刀耕火种的痛苦状态,幸福指数嗖嗖嗖的就上来了~~~~

不吹捧啦,但是做Node开发的话,建议珍爱生命,远离ST,使用Webstorm~

欲善其功,必先利其器。我总是记不住WebStorm的快…

+ 阅读更多

Mocha+Chai单元测试并没有想象中难

作为过来人,首先想说的是:不要怕!

刚从前端转来做Node的,从来没接触过单元测试,一听这个名词就觉得高大上。加上周围一些前端儿也基本没有接触过单元测试,总把单元测试看得比较遥远,中文教程也点到即止并有点过分重视命令行参数的讲解,让我迟迟不敢轻易入坑。

然而,当项目确实希望用到单元测试的时候,我决定抛开内心的恐惧,硬着头皮认认真真地读英文版的Mocha和chai Assert文档,发现,真的不过如…

+ 阅读更多

bluebird中的常用 Promsie API整理

bluebird是一个第三方的Promise类库,并且根据Promise A+规范实现,在ECMAScript 2015的基础上添加了很多扩展方法,如.spread()展开结果集、Promise.promisifyAll()将一个模块的属性方法包装成一个Promise实例。

blueBird的API文档可以查看这里

本文主要列举几个常用的API,方便在熟悉阶段的时候查用。

一. 核心API

new Promise()

+ 阅读更多

【实战】捣鼓一只自定义的video组件(目前只能在Mobile中使用)

这是一只只能在Mobile下使用的Video自定义组件。

为什么只能在Mobile下使用?。。。因为我将鼠标事件都换成了Touch事件。。。等我有空了再添加兼容手势库吧。

Talk is cheak, show you the code. 直接上代码:

JS组件代码:

/**
 * video插件Mobile版(只兼容mobile)
 * @params: options对象,属性如下:
 *     ele   {String/jQuery DOM/Javascript
+ 阅读更多

学习笔记:Linux文件的五个查找命令

最近在学习Linux,下面是一些笔记。

一. Linux查找命令一览

Linux的查找命令有5个,分别如下:

  • which:在PATH变量指定的路径中,搜索某个系统命令的位置,并且返回第一个搜索结果;
  • type:用于区分某个命令到底是由shell自带的,还是由shell外部的独立二进制文件
+ 阅读更多

学习笔记:Linux文件操作命令

一. 特殊目录:

目录 说明
. 表示当前目录
.. 表示上一层目录
表示前一个工作目录
~ 表示“目前用户身份”所在的主文件夹
~account 表示account这个用户的主文件夹(account是个账号名称)

二. 目录操作命令:

  • ls:显示指定目录和文件的信息;
  • pwd:Print Working Directory,显示当前目录名称;
  • cd:Change Directory,进入指定的目录;
  • mkdir:Make Directory,创建
+ 阅读更多

学习笔记:vim基础 —— 多窗口功能

一般的编辑软件都有“切割窗口或冻结窗口”的功能,使得一个文件或多个文件放在多个窗口里展示。vim也有这个功能。

下面总结一下Vim中的多窗口操作方法。

一. 窗口的打开与关闭

1.1 打开新分隔窗口

:sp [filename]  // 在新窗口打开新文件
:sp  // 默认打开同一个文件

如果要打开一个新窗口并开始 编辑一个空的缓冲区,可使用:

:new

1.2 关闭窗口

:close

:close可以关闭当前窗口。

实际上,任何退出文件编辑的命令象”:q”和”ZZ…

+ 阅读更多

学习笔记:vim基础 —— 命令行备忘录

缘由:又一次被队友吐槽:咋连vim都不会用?!~( ╯□╰ )~。。。这就尴尬了,于是赶紧找一波资料,做一下笔记,方便下次查找和理解。

一. vim的三种模式

vim共有三种模式,分别是一般模式编辑模式命令行模式。这三种模式分别如下:

1.1 一般模式

以vim打开一个文件就直接进入一般模式(默认模式)。在该模…

+ 阅读更多

西溪湿地之行 —— 20160107

开心的是,经历了一整周的浓霾天后,难得遇见阳光明媚的蓝天白云。于是背上相机,出门去。

然而尴尬的是,我选择的地点太远了。。。来到武林广场的时候依然是蓝天白云好一派春光明媚,暖暖的好舒服。然而等到终于来到西溪湿地公园的时候,天气突然骤变,蓝天被遮拦无余,阴风冷冷的。。。 。。。好心情都被扫没了。

然而最尴尬的是,等我回到滨江的时候,发现滨江上空竟然有一大块蓝天,还能看到落日的余晖。。。这,,,,

看图。

psb (9).jpeg-3495.5kB

psb (4).jpeg-5877kB

psb (2).jpeg-4384.9kB

psb (3).jpeg-2587.4kB

psb (6).jpeg-3002.6kB

psb.jpeg-4070.2kB

psb (1).jpeg-2129.8kB

+ 阅读更多

2016年年度小结

踩着2016年的尾巴,码下了这篇年度小结。窗外的街道上放着欢快的新年歌,我默默地坐在台灯下码字。

这一整年基本都在一种时间匆匆的状态中度过,每每有一种感觉:“啊啊啊?一天又结束了啊?又周五了?咋又周一了?我的天哪,怎么又到月底了?。。。” 不知道时间都去哪了,总觉得时间很不够用,总是还没好好开始感受,时间就从指缝间飞逝了。然后,一年就这么糊里糊涂地过去了。

所幸的是,并不焦虑,基本不熬夜。基本都是老人家的睡眠习惯,十二点睡七八点起,平均每日…

+ 阅读更多

山水交融的湘湖 —— 20161224

圣诞节快到了,然而我孤零零地待在家里码代码… …

闻说周六天气可能还算可以,多云转晴,运气好的话也许能遇见阳光。所以周六早起,背上相机到湘湖去走走。

湘湖算是西湖的一个子湖,却又有着不同于西湖的气质。湘湖最大的特色应该是山水交融,相互环绕。初冬的周末这里人很少。满塘残荷让我有些惊喜之余,莫名地生了几分感伤。孤单如我,一如这满塘冬荷。

  • 摄于2016年12月24日。阳光
+ 阅读更多

2016年12月份小结

额,一个月过去得真快。

碎碎念:

总没啥时间概念。常常有种“一周中只有周一、周五和周六,其余时间被狗吃了”的错觉,常常不知道为什么一天就这样过去了,然后日复一日,总希望能抓住点什么,却又没抓住什么,然后一不留神一个月就这样溜走了。不知道这种时间总不够用的感觉是好是坏。总希望时间能过得慢一点,再慢一点,再慢一点点。。。

工作:

这个月明显是要比上个月忙碌许多。我喜欢忙碌的感觉。

用Vue.js + Vuex开发了一个图形交…

+ 阅读更多

秋末的西湖沿岸-20161217

搞掂了一波大推,终于可以愉快轻松地背上相机出门外拍去啦~

这一波跟同事一起去,到了浴鹄湾、茅家埠、郭庄和南宋御街,从世外桃源到市井生活,阳光大好,体验很赞。

摄于2016年12月17日。阳光明媚,轻度雾霾,13摄氏度左右。 器材:Sony微单 ILCE-6000L + E PZ 16-50mm单电动变焦镜头。

DSC02654.jpg-3571.8kB

DSC02660.jpg-3181kB

DSC02678.jpg-6573.1kB

DSC02685.jpg-5196kB

DSC02701.jpg-2877.9kB

DSC02715.jpg-4020.9kB

DSC02718.jpg-2628.4kB

DSC02719.jpg-3202.3kB

DSC02722.jpg-3381.4kB

DSC02729.jpg-1244.7kB

DSC02732.jpg-4391.3kB

DSC02738.jpg-4517.5kB

DSC02740.jpg-4521.8kB

DSC02741.jpg-4377.3kB

DSC02751.jpg-3756.7kB

DSC02752.jpg-5783.8kB

DSC02753.jpg-4305.5kB

DSC02755.jpg-4820.4kB

DSC02764.jpg-2617.5kB

DSC02771.jpg-3256.6kB

DSC02772.jpg-5068.3kB

DSC02775.jpg-2691.9kB

DSC02776.jpg-2589.5kB

DSC02789.jpg-2668.5kB

DSC02816.jpg-5322.4kB

DSC02818.jpg-5400.7kB

DSC02822.jpg-6063.4kB

DSC02825.jpg-3642.9kB

+ 阅读更多

【实战】用原生JavaScript封装一个hash路由组件

事起缘由:最近做了不少的活动页面,其中一些页面需要用到单页面的技术做切换。因为常用,所以考虑封装。

虽然市面上有不少路由库,但是如果为了这么简单的一个小功能就去引入一个庞大的库,显然是不优雅的。最优雅的方式是亲手撸一个~(•‾̑⌣‾̑•)~

还好几十行代码就能搞得掂。

组件代码:

/**
 * 路由配置组件
 * 方法:
        @method set(_hash, callback)  # 配置路由信息,
+ 阅读更多

【实战】封装一个audio音频组件

备注:因为懒得去重复些一堆的事件兼容性函数,先用jQuery库快速捣鼓一个audio音频组件。等以后有空了,再干掉jQuery库的依赖,用纯JavaScript重构一下。

这个组件包含进度条拖拽,支持自定制audio的样式。体验如下:

直接上代码:

组件代码:

/*
* 音频组件
* options参
+ 阅读更多

【小技巧】解决iPhone中video视频的行内播放

如果我们希望在一个<div>内播放<video>视频,我们可能会这么写:

// CSS: 
video {width: 100%; height: auto;}

// HTML: 
<div style="width: 500px; height: 300px;">
    <video src="test.mp4" controls></video>
</div>

这在Android系统…

+ 阅读更多

北国的秋天是五颜六色的 – 20161204

今天多云转晴。原计划着今天去取景的,不料早晨阴天 + 浓雾霾,压根不适合拍照呀。准备午睡的时候,一缕阳光洒入,突然放晴了,看着渐渐消散的霾,我决定穿好衣服拎起摄影包就走!

还好光线什么的都很不错呀。原不打算去太子湾公园的,只是因为在苏堤下车了看见里面的枫叶红了,然后完全被征服住了!这真的太美的,比九溪还要美!除了水很脏以外,其他都超级无敌赞~

摄于2016年12月4日下午,太子湾公

+ 阅读更多

美丽的风景在路上(杭州,秋)-20161203

难得这一周杭州的天气都非常撩人,阳光明媚甚是不错,暖暖的很是舒服。趁着阳光正好,于是背上相机去公司,沿途取景。

摄于2016年12月3日清晨。阳光明媚,无雾霾,温度十分宜人。
器材:Sony微单 ILCE-6000L + E PZ 16-50mm单电动变焦镜头。

DSC02376.jpg-676.6kB

DSC02360.jpg-988.7kB

DSC02361.jpg-1020.3kB

DSC02369.jpg-871.8kB

DSC02352.jpg-271.4kB

DSC02367.jpg-273.6kB

DSC02380.jpg-514.9kB

DSC02384.jpg-219.5kB

+ 阅读更多

2016年11月份月度小结

psb1.jpg-1096.6kB

这个十一月,大概可以用一句话来概括我想得最多的问题:

冥冥中,这是我唯一要走的路。

这个十一月,跟往常都不太一样 —— 我独自背井离乡来到了千里之外的远方求抱大腿。这是一段几乎全新的生活。但是我没有害怕,也没有觉得有任…

+ 阅读更多