使用simulator来debug网页时，在审核面板中出现"data-custom" is too new to run on this inspected page，让整个网页无法debug，网上竟然完全没有任何信息。我这边这个问题是在使用迁移助理换电脑后出现的这个问题，解决方案是彻底删除Xcode，然后从App Store重装Xcode就行。

岗位描述： 主要负责海外银行及 Bank+ 的中后台系统、移动端产品等研发工作； 负责海外银行的前端开发工作； 通过工具，平台等方式，来解决复杂业务系统的UI 及业务逻辑绑定工作，提高工作效率；提升海外印象整体用户体验和前端技术； 有良好的洞察能力，能够通过新技术、业界优秀产品的分析调研来提升我们的产品体验； ...

在视频场景中，经常需要实现镜头平移的效果，摄影术语上这叫做Panning Shot，动画中实现镜头平移效果的方法很多种，比如在codepen中搜了下，就找到一个利用 background-position来实现的用例

使用chrome sourcemap 在线编辑代码的开发体验非常畅快， 最简单的souorcemap是在线调试原始的css代码， 只需要将项目文件夹添加到chrome中，然后就可以直接在chrome中以所见即所得的方式编辑css了。简单的soucemap调试可以看下这篇文章Chrome 浏览器的 source-map 功能

关于webpack中sourcemap的文章很多，但感觉大部分是翻译官方文档的说明， 缺乏直观的用例，写这篇博客的目的是帮自己厘清这个概念， 也顺便将我自己收集的这方面的干货放在这。本文将尝试先讲清楚webpack中的sourcemap配置项的概念。

网页中的逐帧动画，大致可分为两大类的实现方式， 分别是使用JS控制，和单纯使用CSS实现，两者的优劣总体概括来说就是： JS动画可控性更强，但开销大，实现复杂。 CSS动画实现相对JS更简单。常见的网页动画形式参考：mark? 9种网页动画常用实现方式总结PS：江湖传言CSS动画性能更佳，可web环境过于复杂，哪个性能好可能...

最近的实习有涉及数据可视化的工作，需要用到图表库， 这里用的是百度的echarts，琢磨了一段时间API，总体来说不难，但是百度自己的文档用例不丰富， 大多数只有文字描述（配图都没有），更少有栗子?。 echarts的交互组件中(图例组件 legend、标题组件 title、视觉映射组件 visualMap、数据区域缩放组件 dataZoom、时间...

类型化数组（Typed Array）也是HTML5中新引入的API。用一句话解释类型化数组就是：它是JS操作二进制数据的接口。 众所周知，直接操作二进制数据可以使程序更为高效， 尽管JS对常规数组做了很多优化（JS数组被实现为对象形式），但是不得不承认JS数组的效率一直不高。比如在WebGL中的图像数据传输， 如果使用原生的JS数组...

hashchange与popstate事件都是浏览器历史记录API，两者都是HTML5中的API，相对而言popstate比hashchange更为强大。注意这两种历史记录管理都受同源策略的限制，这里厘清下两者的区别以及相关应用：

过个年一下荒废了个把月。 最近刚接触canvas，将一些概念点简单归纳下，canvas是基于像素的图像API，与svg的最大的区别在于canvas需要重绘(canvas移除图片时需要重新绘制，而SVG可以通过编辑元素节点来编辑图片)，并且基于基于像素绘制(svg顾名思义是矢量)，更详细的对比mark在此：?SVG 与 HTML5 的 canvas 各有什么优点...

使用JavaScript来描述算法和数据结构的教程很少， 目前市面上用JS描述算法和数据结构的书屈指可数，并且就我看过的那本而言（我只看过《数据结构与算法 JavaScript 语言描述》）质量实在堪忧。碰巧有次看到Nicolas博客中的Computer Science in JavaScript系列，觉得写得很好，就索性打算全篇翻译下，非CS科班出身，自己...

使用eclipse加某些插件的模式可以搭建多种开发环境，避免多个应用之间来回切换。在eclipse上安装CDT插件可以搭建C/C+的集成开发环境， 非常方便。不过因为语言编译的原因，有时也会碰到 “launch failed. binary not found” 或者“program not specified”等让人想砸电脑的问题。

拖放（Drag and Drop，DnD）操作因为涉及到与底层OS的结合，所以是较为复杂的交互操作。 这里先实现一个简单的拖拽图片到浏览器显示到操作， 主要用到了HTML5中的FileAPI：

好像网上介绍JS正则库的文章不多，可能也是因为复杂的正则匹配很少需要在客户端运行，所以JS上用的不多，并且我搜JS的正则库还真没找到第二个，囧。但它的一些特性挺实用，有兴趣的同学可以看看。由于没花太多时间去琢磨，所以本文只将该库作简要介绍，本文用例全部来自它的API文档。

最近这段时间帮同学处理一些文档， 涉及到一些结构化文档的工作大部分都得使用正则表达式， 之前对于正则的认识大多来源于语言书上那几页的介绍， 自己也没有用过几次。这里将我之前感到模糊的概念作个整理。因为对JS了解多点，所以也将JS中相关的正则特性归纳下。注意本文将正则与JS中的正则分开讨论。

以往JS控制的动画大多使用setInterval 或者setTimeout 每隔一段时间刷新元素的位置，来达到动画的效果，但是这种方式并不能准确地控制动画帧率，尽管主流的浏览器对于这两个函数实现的动画都有一定的优化，但是这依然无法弥补它们性能问题。主要原因是因为JavaScript的单线程机制使得其可能在有阻塞的情况下无法精确到毫...

一般平时的少量测试代码， 我习惯直接在Chrome的DEV中调试， 一般的调试都没有问题， 但难免一些小概率事件， 比如调试严格模式下的代码（关于严格模式，mark在这里?严格模式）， 这时候如果直接在console里输入"use strict"是无效的，比如如下代码在console里正常输出：

这两天搜了下JS递归的相关文章， 觉得这篇文章很不错， 就顺手翻译了下，也算给自己做个笔记，题目是我自己加的。原文很长，写得也很详尽，这里并非逐字翻译， 而是作者所讲的主要概念加上我自己的一些理解，本文中解决方案的实际意义并不是特别大，但算法的逻辑挺有意思，不过也略抽象，理解需要花点时间（囧，估计我太...

貌似大部分语言中的递归都差不多， 之所以在标题加JS是因为搜了下后感觉网上用js来描述这概念的不多， 简单地说递归就是函数调用自己的过程。下面的栗子可以很直观地展示递归的执行过程：

以前实习的时候因为赶时间直接用bootstrap的插件collapse.js做了个折叠菜单， 对于一个原生控来说还是更倾向于自己写一个， 毕竟为了个折叠菜单引入jq和bootstrap有点太臃肿了。 于是又到了考验山寨能力的时候了-_-# 。原版collapse.js的效果其实也不难，主要是在开合的过程中添加了css3的过渡效果。以下是原版与山寨版d...

不同于jQuery中的bind方法只是简单的绑定事件函数，原生js中bind()方法略复杂，该方法上在ES5中被引入，大概就是IE9＋等现代浏览器都支持了（有关ES5各项特性的支持情况戳这里ECMAScript 5 compatibility table），权威指南上提到在ES3中利用apply模拟该方法的实现（JS权威指南中函数那章）， 但无法真实还原该方法， 这...

Update： MDN的文档中关于该问题有更权威的解释 ?DOM事件处理函数中的 this 《权威指南》中文版455页关于这个问题也有说明，并且提到：IE9之前的attachEvent()作为函数调用其this值是全局（window）对象。当时想这问题的时候没去找文档,书也没看仔细啊！

昨天看了下那本《CSS3秘籍》, 在关于CSS选择器一章中提到应该尽量避免使用ID选择器, 这我就纳闷了, 以前似乎没太注意, 书中的理由是ID选择器权重太高, 缺乏灵活性, 并且引用了一篇文章来阐述原因(原文地址:When using IDs can be a pain in the class...) 这里直接用原文中作者的DEMO原文DEMO地址 来讨论下,作者的意思是...

在移动端的布局开发中经常要考虑到横竖屏所带来的不同布局， 但有时候我们只仅做了横向或纵向布局，为了更好的用户体验在没有做布局的页面放一个提示会更加友好。网上有人写了一些插件来方便开发者一键添加，比如这篇博客中提到的lanscape.js的小插件就比较方便（文章链接：移动页面横竖屏切换提示） 但我看了下它的源码...

@media print打印页面用得较少，对于打印页面中的属性一直比较陌生， orphans与widows（注意不是windows）属性主要用来控制打印页面中排版中保留的最少行问题，理解该属性，也更能体会到CSS在排版上对于各种页面输出的灵活控制。

网上滑动插件有不少，但好像没一个好用的（不是bug太多，就是不灵活）这里用原生JS实现了该功能，不仅代码量不多，逻辑也较简单。移动端H5页面的触控触发事件在我之前的一篇博客中写了挺多.原博地址原生JS实现触控滑动（swipe）图片轮播 （里面大致罗列了HTML5中touch事件的使用方法）

在上周写的博客中，百分比的进度条提示本来也想用原生的JS来实现实时的更改HTML的内容， 比如在上篇博客中我本来打算用innerHTML的属性实时更替loadingPage中的数字，但是在试图用原生代码实现中innerHTML在Safari下问题很多：首先列举下我测试出的问题， 有几个地方也有点不明白，

网页也可以像原生应用那样加入进度条或者其他的loading效果带来更好的等待体验，这里归纳几种我收集的实现loading page的方法，这几种方法在交互上都有利有弊，适用于不同应用。（PS：以下方法在网速较快的情况下loading效果都会一闪而过）：

上周写了段图片自动轮播的代码，感觉应用的局限性还是挺大，实习期间一直在捣鼓移动端网页的开发，这周试了试原生JS实现左右滑动的图片轮播，在网上找了很多滑动插件诸如swipe，hammer，Quo，JQM 用着都不太理想， 最后一咬牙还是自己码，先上DEMO， 用手机打开demo查看效果或用Chrome模拟（在iPhone上测试没有问题，但...

网上的淡入淡出效果大多是依照jquery中fadeIn和fadeOut的方法使用js来控制元素的透明度达到目的，但缺点是有轻微的卡顿感，并且运行效率一般。 这里提供另外一个思路，即通过预先定义好的css样式控制图片透明度的过渡， 这种方法过渡平滑，过渡的效果基于css3的animation，所以效率高些。 思路是将淡入，淡出的效果做成...