记录一下几个简单的ES6的字符串和数值方法
字符串查找（当前版本Chrome已支持）
let a = "hello world!"; a.startsWith("hello"); //true a.endsWith("!"); //true a.includes("w"); //true //第二个参数表示搜索位置索引 a.startsWith("ello" , 1); //true a.endsWith("hello" , 5); //true a.includes("hello" , 5); //false |
最近粗略看了一下ES6的一些特性，如果运用成熟，写JS的感觉将比ES5要愉悦很多。随着微信小程序开发量的增加，自己也觉得是时候拿起ES6了。买了一本阮一峰的《ES6标准入门》，从第二章开始慢慢看了起来。在自己的博客上也整理一些笔记，记录学习轨迹。
let 和 const 命令声明的变量，有严格的块级作用域限制，当前{}内声明的变量，在当前{}外无法使用；同一作用域下在变量声明之前，也不能使用；否则都会报错。另外，不允许重复声明同一变量。
for(let i=0 ; i<3; i++){ let i="a"; console.log(i); //输出三次a；在()内声明的i和在{}内声明的i并不在同一作用域内 } console.log(i); //报错 |
做项目的时候，正则表达式其实用得很少，而且大部分用得到的正则表达式都可以通过搜索引擎找到。因此这么多年来虽然已经多次研读正则表达式的文档，但偶尔要自己写的时候还是会脑子卡壳，求助谷歌…
好吧，再好好的理解一下，做个笔记，争取减少求助搜索引擎的次数。本文并非系统整理正则表达式的概念，而是加强巩固自己淡忘的一些概念和知识点。
正则表达式通过构造函数使用方法
var str = "He is a boy. She is not a boy." var reg = new RegExp("\\bis\\b"); str.replace(reg, "IS"); //"He IS a boy. She is not a boy." var reg = new RegExp("\\bis\\b" , 'g'); str.replace(reg, "IS"); //"He IS a boy. She IS not a boy." //另一种写法：正则表达式前后用/包含，g参数加在最后 str.replace(/\bis\b/g, "IS"); |
今天在做一个H5项目的时候，发现使用JS的focus命令在iOS浏览器（包括微信）中无法调出键盘。试过N种方法都不起作用，谷歌了一些国外的帖子后，才知道iOS下，通过JS调用键盘是被禁止的，亦或许是一个bug。在这种情况下，其实focus事件已经执行了，只是iPhone键盘跳不出来，比较蛋疼。
因此在输入框上调用focus事件，无论原生，还是jQuery类似下面的JS代码无效：
$("#inputElement").focus(); |
但是可以监听其他点击事件，在回调中添加这个命令就可以了，比如 查看详细
用jQyery UI的draggable可以很方便地在PC端实现页面元素的可拖放，不过jQyery UI不是为移动端而写的，因此这个draggable方法在手机上无效。这么普通的问题，当然已经有了现成的解决方法，那就是再加一个jQuery UI Touch Punch插件即可。jQuery UI Touch Punch下载点这里。
这样组合后在手机上测试基本完美，不过很快发现在安卓手机上，无论是原生浏览器还是微信内置浏览器上，都无法在draggable的元素上执行click点击事件，其子元素也不行；在iOS上倒是一切正常。经过排查，发现其实并非click事件不能执行，而是安卓上对touch的敏感度实在太大，太容易覆盖掉click事件，其实快速的多点几次click还是有一定概率能执行的。但这样显然不符合项目的要求了，于是我考虑用touchstart-touchmove-touchend来做一些代替click的事。其实就是判断一下手指滑动的距离，距离大的就什么都不变，当做滑动，距离小的就当作click事件去做点击的事。
这种low问题就不多展开了，直接上代码， 查看详细
稍微有点经验的前端应该知道IE7-有一个经典的渲染问题，表现在对display为inline-block的元素的不友好上。我们也知道只要重新给这个元素单独宣布一条display:inline，就能解决问题。但今天我要说的不是这个，最近新完成的一个网站，在IE7下浏览，就有包括导航和热图这样的大块元素没有正常显示：
经过检查，发现这些没有正常显示的元素，都有一个共同的CSS属性- position:relative，导致这些元素在IE7中没有被正常的渲染到，就没有显示出来。百度了一下，这个问题归类为-IE重绘问题。当然并非所有position为relative的元素都不能在IE7中正常显示，实际情况要比我这里所指的复杂的多。由于布局的硬性需要（比如滚动图片的移动效果），使我没有办法不用relative属性，所以要解决在IE7中的渲染问题，就必须另外想办法。 查看详细
瀑布流主要应用在图片展示页面上。如果有一大批图片需要展示，原始图片尺寸不一致，又希望每张图片都能不剪裁，完整显示，那么就要给图片规定一个宽度，解放它们的高度。利用网页高度不限这个特性，充分利用页面的空间，尽可能的展示多的图片。瀑布流的实现方法挺多，但能做到响应式列数变化，自由布局的并不多。这次自己开发了一个作品集页面，正好研究一下响应式瀑布流的实现方法。
1. 响应式多列：960px宽以上呈4列，750-960呈3列，400-750呈2列，400宽以下变成1列；
2. 由于需要做响应式，那么每块的宽度就不固定，导致高度更加不可能固定。后端输出的时候，图片（块）的高度本来就是未知的，要用JS实时取到它们的高度，以便调整布局。
3. 异步加载：页面拖到最低端的时候加载更多，这个很常见。 查看详细
首先，本文以及本站所有文章都是技术探讨文章，不鼓励任何人去fan qiang以及做任何违法的事情。接下来是正文：
谷歌基本上是被和谐透了，谷歌地图API自然也打不开了，于是公司网站上那些谷歌地图都变成空白了…总不能让访客都自己fan qiang吧。纠结了一阵子才知道原来谷歌地图的服务并没有完全被屏蔽，只是我们以前访问的域名maps.google.com访问不了了。
这个域名的谷歌地图还是能正常访问的：http://ditu.google.cn
那么把原来的JS引用地址maps.googleapis.com替换成ditu.google.cn就解决了。
1 | <script>http://ditu.google.cn/maps/api/js?v=3&key=xxxxxxx&sensor=false</script> |
接下来是谷歌字体问题， 查看详细
自己造轮子写个原生拖放，要做到简单调用，考虑拖放对象所在的环境，还要兼容老IE，还是挺锻炼人的。
主要碰到几个问题：
今年年初Google Map就向所有采用API2开发的网站发了通知函，说5月份会停止API2，今后所有的Gmap项目都要基于API3开发，并且建议把API2项目都升级到API3。我公司网站上有一个Gmap的页面，通过读取一个feed实现所有酒店位置的显示，这是页面地址 – http://www.vhr.com/hotels.aspx。 由于太忙，一直都没时间去给这个地图做升级，等到11月，突然发现这个基于API2开发的地图不能用了，而且由于Google关闭了引用的JS，导致连调试都不能了，不得不去研究API3的文档，重新开发了。API2到API3的升级不是简单的几个函数和方法替换的事儿，API3的语法比起API2来显得更加的面向对象，还是整理思路重做吧… 查看详细