文章分类: 前端开发

Javascript,CSS3,HTML5…各种前端开发话题归档

正则表达式学习笔记

做项目的时候,正则表达式其实用得很少,而且大部分用得到的正则表达式都可以通过搜索引擎找到。因此这么多年来虽然已经多次研读正则表达式的文档,但偶尔要自己写的时候还是会脑子卡壳,求助谷歌…
好吧,再好好的理解一下,做个笔记,争取减少求助搜索引擎的次数。本文并非系统整理正则表达式的概念,而是加强巩固自己淡忘的一些概念和知识点。

正则表达式通过构造函数使用方法

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");

查看详细 »

微信小程序中使用地图和定位的一些坑和经验

首先,经过测试,使用GCJ02(火星坐标)比WGS84(GPS)的坐标在计算距离的时候更为精确。在微信小程序中使用内置接口获取用户坐标,代码放在app.js里:

App({
  getLocation: function () {
    var that = this
    wx.getLocation({
      //type: 'wgs84',
      type: 'gcj02',
      success: function (res) {
        that.globalData.latitude = res.latitude
        that.globalData.longitude = res.longitude
        //var speed = res.speed
        //var accuracy = res.accuracy
      }
    })
  }
 
})

查看详细 »

七牛CDN防盗链开启后,微信小程序无法加载其资源问题解决

最近在学习开发微信小程序的时候碰到了形形色色的问题,待我有空多整理一些笔记,这次先记录一个简单的。我习惯用七牛CDN作为自己开发的网站静态资源存储分发,并且为每个资源库设置防盗链白名单。在开发小程序之初,我就已经把这两个域名加入到了白名单中:
*.qq.com
*.wechat.com
因此就想当然的以为这样设置,微信小程序读取CND资源就不会有问题。当然,我在开发过程中为了避免碰到这样那样的问题,是先关闭了防盗链的。小程序完成后提交审核,同时我顺手打开了防盗链,刷一下小程序,结果发现所有云上的图片都打不开,开发工具报403错误:
微信小程序无法加载七牛CDN资源问题
查看详细 »

解决iOS浏览器中无法用focus事件调出手机键盘的问题

今天在做一个H5项目的时候,发现使用JS的focus命令在iOS浏览器(包括微信)中无法调出键盘。试过N种方法都不起作用,谷歌了一些国外的帖子后,才知道iOS下,通过JS调用键盘是被禁止的,亦或许是一个bug。在这种情况下,其实focus事件已经执行了,只是iPhone键盘跳不出来,比较蛋疼。

因此在输入框上调用focus事件,无论原生,还是jQuery类似下面的JS代码无效:

$("#inputElement").focus();

但是可以监听其他点击事件,在回调中添加这个命令就可以了,比如 查看详细 »

让jQuery UI draggable兼容移动端并且模拟click点击事件,兼容安卓

用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问题就不多展开了,直接上代码, 查看详细 »

研究一下响应式图片加载属性srcset和sizes

元旦过后又长一岁,然而活到老学到老这个道理是不变的。这几天把手上一部分WordPress网站升级到最新版4.4,就学到新东西了。发现4.4版给所有在文章内容区的图片都加上了两个属性:srcset和sizes。比如:
srcset
这俩个属性的作用是为不同显示尺寸加载不同的图片源,这样就能在图片本身做到“响应式”,而不仅仅是跟随屏幕尺寸了。 查看详细 »

阻止移动设备自动识别页面上的电话号码、email地址

这个问题主要发生在iOS的浏览器上,他们有时候会有一些“自作聪明”,自动把页面上的一串数字识别成电话号码,这样用户不小心点击这串数字,就拨号了。所以我们习惯给那些要在手机上访问的响应式页面增加一串meta标签,以阻止移动端浏览器的这些自动行为。

1
2
3
4
<meta name="format-detection" content="telephone=no" />
<meta name="format-detection" content="email=no" />
<meta name="format-detection" content="address=no" />
<meta name="format-detection" content="date=no" />

其实之所以iOS的浏览器会自动识别页面上的数字为电话号码,就是因为它默认的format-detection中有一条telephone=yes。人为把它设置成no就阻止了这个功能。那么在我们需要真的实现点击链接播电话的时候,只要在link上用标准的“tel:”写法就可以了:

1
<a href="tel:8602188888888">+86 021 88888888</a>

查看详细 »

给网站添加两套以上谷歌分析代码

今天接到一个奇怪的需求,要给一个网站添加两套谷歌分析代码。按照个人对JS的感觉,直接复制粘帖两段谷歌分析给出的官方代码,会牵涉到对象的不规范重复调用,即使页面不报错,也一定会影响分析数据。既然是谷歌的问题,自然只能到谷歌去找答案。结果倒是也很快找到了。

首先,谷歌官方系统生成的统计代码是这样的,其中UA-×××××××-×是你自己的谷歌分析账号:

1
2
3
4
5
6
7
8
9
<script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
 
  ga('create', 'UA-×××××××-×', 'auto');
  ga('send', 'pageview');
</script>

查看详细 »

第 1 页,共 3 页123