Yusen's Blog

在一些框架和库中都可见到一些创建一个空元素，通过对该元素特性测试来判定当前运行环境是否支持某种特性的运用。jQuery 也是以此来 support 各种环境，与其通过可被随意修改的 UA 测试环境倒不如直接创建元素测试来的准确。我们可利用元素本身特性去做的事并不止于 特性测试。细心一点，你会发现一些元素独一无二的特性可以被巧妙利用来做一些工作。 阅读全文…

某些偏门的 API 真是没有需求一辈子都不知道啊。分享一下最近对于获取移动设备旋转方向的探索。deviceorientationwindow.addEventListener('deviceorientation', function(e){ console.log('absolute: ' + e.absolute) console.log('alpha: ' + e.alpha) console.log('beta: ' + e.beta) console.log('gamma: ' + e.gamma)});之前在 segmentfault 回答过相关问题，当时是从 MDN 翻出了这个事件。原贴：h5 页面如何获取手机陀螺仪的参数该事件在移动端兼容较好：Android Webview 4.3+、Chrome for Android 5.0、iOS 8.4+，据我测试微信也是支持的。没有在低端机上测试过，可能该事件会依赖设备传感器，可以加个 'ondeviceorientation' in window 判断一下。该事件触发频率高，适合对设备旋转精度要求较高的场景或是 3d 场景等，比如上面问题中的平衡球。 阅读全文…

javascript 语言的特色之一便是函数即对象，因此便满足了高级函数的条件。高阶函数在《javascript设计模式和开发实践》中是这样定义的。函数可以作为参数被传递；函数可以作为返回值输出。实际上我们日常开发中会经常用到高阶函数。接下来通过几个经典的应用案例，带你认知高阶函数。 阅读全文…

不止一次有同学在 Issues、邮件等渠道中向我反馈增加站内搜索功能。本来准备什么时候搞个 2.0 版的主题再加上这些新功能，可一直没什么太好的想法，反正也是折腾，就把搜索功能做了一下。搜索方案针对无数据库的静态博客搜索方案一般有两种：第三方搜索服务；序列化站点内容作为数据源，然后自己写查询方法。 阅读全文…

在 Vue 中通常以一个 Vue 实例来表示一个应用，一个应用由若干个组件拼装而成。没错，就像“装机”一样。当你把主板、CPU、显卡、内存、散热器、SSD、电源等摆放到机箱的各个位置后，很明显产生了一个明确的需求：我怎么让这些东西协同工作？回到 Vue 中，处理不同组件之间的数据或状态是一件经常遇到的事。 阅读全文…

自 CSS3 问世以来，在广大开发者的智慧下诞生了很多创造性的设计，如：18个你可能不相信是用CSS制作出来的东西。个人平时也喜欢收藏这些有趣的东西，其中一些设计对单个 HTML 元素的极限利用，很值得我们去学习。以下就来说一说这些神奇的黑科技。 阅读全文…

作为自己做前端开发以来的CSS爬坑总结，内容偏向PC端，不定期补充。只作提示，不深谈。盒子模型1、区分content-box和border-box的尺寸计算。2、行级元素无宽高，但可设内外边距。3、外边距margin可设负值，内边距padding不可以。4、当内外边距值为百分比时是相对于元素宽度计算的。5、border是个好玩的东西，关键字：css三角形。 阅读全文…

起因最近做的一个图片浏览功能，请自行脑补手机图库、微博查看图片等场景。功能做好之后，马上有同学反应：进入图片浏览层时，如果用户触摸手机后退按钮，整个页面都会返回，能否在触摸返回时只关闭浏览层？一般移动端会对 WebView 做一些默认的设置，比如 Hook 用户触摸后退按钮，调用 WebView 后退方法。既然如此，就可以利用这一点，通过操纵浏览记录使用户触摸后退关闭浏览层。history想要操纵浏览记录，就不得不提history对象了。通过常用的back()、forward()、go()方法就可以自由的控制浏览器跳转到任意一个历史记录。而在 HTML5 中，history 又添加一些新的成员，允许你对浏览记录进行添加和修改却不会刷新页面，这就是解决问题的关键了。history.pushState(stateObj, title, url) 用于创建新历史记录；history.replaceState(stateObj, title, url) 用于修改当前历史记录；history.state 读取当前状态，创建历史记录时会添加状态对象；window.onpopstate 是一个事件，当历史记录被修改时会触发。 阅读全文…

使用 gitcafe pages 更新博客只需要敲几条命令，如果因为博客搬到了阿里云，却没有原来操作方便，那便得不偿失了。所以就准备在服务器上建个 Git 远程仓库，用 Git Hooks 实现自动部署。Git HooksGit Hooks 就是一些触发特定事件的脚本。比如 commit、push、merge 等等，也区分本地 Hooks 和服务端 Hooks。我这次使用的是post-receive。当用户在本地仓库执行git-push命令时，服务器上远程仓库就会对应执行git-receive-pack命令，而git-receive-pack命令会调用pre-receive钩子。这需要在服务器上建立一个 Git 远程仓库，和一个用于获取更新（git pull）的本地仓库。远程仓库：最原始的版本库，所有的本地仓库就可以克隆这个仓库。就像你在 Github 创建一个项目，这就是一个远程仓库。本地仓库：这个就是平常的工作目录，容易理解。 阅读全文…

观望阿里云很久了，终于在这个春节来了后，一咬牙、一狠心、一跺脚就买下了一台 ECS。不分昼夜的折腾了几天后，终于在几天前配置好了自己期望的使用环境。由于本人初次接触 Linux，配置期间三度初始化磁盘（等价于手机恢复出厂设置），可以说是一步一个坑的走下来的。现趁热打铁对最后一次正确的安装配置做一下总结，给后人乘凉吧。选择配置作为开发者，选择 Linux 是毋庸置疑的。CPU 单核2G，对于我目前来说绝对是够用了。我会用来做什么？当然是瞎折腾了！一台远程服务器就相当于你多了一台24小时不关机的电脑，可以挂点有趣的服务跑着，比如爬虫之类。或者当个代码仓库，用来项目演示。当然，博客也肯定会迁过去的。带宽 2G，不知道带宽提升是不是会影响远程桌面速度。对于 Linux 的诸多版本之间的优劣，我也不甚了解，就选了个耳濡目染较多的 Ubuntu，版本自然是选最新版的64位。Linux 自带 20G 系统盘，另外我又加了一块 100G 云盘，感觉现在还用不了这么大空间。以上配置一年的价格是 1200+，我选择的地域是青岛，比国内其他地域相对便宜点。另外付款的时候填写推荐码可以优惠 10%，这是我的推荐码：rg2j5m。当然你使用我的推荐码付款后我将得到一定的返比代金卷，可以用来购买阿里云的产品。 阅读全文…