陈材华
* 最近在忙一个运营活动，测试在多用户交叉测试时，发现一个诡异的问题： * 登录用户A，访问活动页，看到了A的相关信息，也可以进行相应的操作，然后退出用户A，在进活动页，有几率看到的页面还是用户A的信息。 ### 检测用户退出的代码： ``` localStorage.clear(); location.reload(); ``` 可以看到明确的调用了clear方法。 但是localStroage就是没有清除，这个可以由fiddler 的抓包数据可以证明。 ### 这是碰上什么鬼？ 百度了下：可以查到 https://segmentfault.com/q/1010000002739402 这个帖子，但回答的牛头不对马嘴 还是得靠google了，可以查到如下的地址 http://stackoverflow.com/questions/7667958/clear-localstorage 和 https://github.com/thoughtbot/capybara-webkit/issues/301 看上去似乎是webkit的事啊，那么在无法控制webkit升级的情况下，怎么解决这个问题呢？ ### 我尝试了如下代码 ``` localStorage.clear(); setTimeout(function(){ if(localStorage.length>0){ window.localStorage.clear();...
### 事件起因 事情是这样的：产品上线发布，突然出现了问题。运营Gg过来反应， 当场给露珠演示， 运营同事的手机是iphone，bug确实是存在的。奇怪的是露珠用了其他iphone手机（借别人的，露珠的是吊死安卓机），却没有发现这个问题。仔细询问，同事说他最近刚刚升级的ios9，于是问题最初定位在操作系统上。接下来检查代码，发现运行正常，逻辑也没错。问题就卡到这里了。没办法，线上问题，fiddler替换本地脚本调试，一级一级alert，从项目文件到底层库，最后定位到了backbone。查看backbone源码，发现问题结症：_updateHash方法中有改变hash值的方法，location.hash和location.replace两个，不管执行的是哪个，hash值不会立即改变！也就是说早ios9中hash在地址栏中变化有延迟！ ### backbone的hash跳转机制 一、代码层：在backbone（以下简称bk）中，利用的是route.navigate方法进行路由的跳转，bk框架会根据你传入的hash值，手动替换地址栏中的hash，接着调用loadUrl方法去内存中读取传入的路由配置，执行回掉函数。大概流程类似如下代码： route.navigate（手动调用跳转）--->_updateHash（更新地址栏中的url）->loadUrl（去内存中读取注册的路由事件）->callback（执行回掉函数）; 二、浏览器层：浏览器层是不受代码控制的，但是浏览器提供给了js监听url的事件，现代浏览器中都支持onhashchange事件，当然，这你也可以在start中配置默认采用popstate事件监听，如果是老旧的浏览器，bk采取的是定时器时刷新的监听方式。不管哪一种方式，都是为了检测地址栏中hash值得变化。通过浏览器的回退和前进功能，hash值会跟随变化，而浏览器本身不会刷新，所以，通过各种对url变化事件的监听，可以做到响应自定义的事件。大概流程类似如下的代码： back/forward（浏览器前进或者后退）------>onhashchange（出发hash值变化）----->checkUrl(执行loadUrl之前检测url，该方法主要应付的事浏览器的行为，代码层则会return)---->loadUrl（通过查找内存找到对应路由的回掉）---->callback(执行自定义回掉函数); 一切都井井有条地进行着，直到ios9的发布，而你们这群有钱人又急着把自己的果机升级。结果是，如果你在回掉函数中需要处理url的话，那么你得到的是旧的url不会是最新的。 ### 补救和兼容 为了查找结症，露珠在百度无果后google到了同样在这方面遇到的问题的同行。没想到为了这个bug，老外在github上炸开了锅，各种吐槽ios9，不管是bk或者anglar都存的开发者都遇到了这个hash改变延迟的问题。然后还有的大神给出了解决的方案（链接在文章末尾中露珠会发出来）。同时卤煮为了验证，自己在ios9真机上调试了。以下是露珠的代码调试和输出的结果，问题都出在_updateHash这个方法上面: ### IOS9.0中hash值的bug与解决方案 为了解决延迟问题，我们的方案当然也是延迟。通过测试，hash值的变化大概在ios9下游9~30ms（一次一次地alert结果，不太准确），所以，我们可以将回掉函数延迟>30ms时间执行。我们把loadUrl延迟了大概50ms，50ms对于用户来说是一个很短的过程，所以，对于那些没有出毛病的系统来说也是可以接受的。于是，我们把源码（1599行左右）改成一下面这样的: ``` if (options.trigger) { var self = this;//this存入全局变量中 setTimeout(function(){//延迟50ms执行 return self.loadUrl(fragment); },...
> 金额转换，比如：服务端返回 0 > 0.00 0.1 > 0.10 等 ## 一开始由于服务端返回的金额基本都是大于0的，因此，转换函数是这么写的 ``` function format(v){ if(!v) return '0.00' v = parseFloat(v).toFixed(2); v = v.toString().split('.'); return (+v[0]).toLocaleString() + '.' + (v[1] >=...
# 不依赖Flash，实现剪贴板复制 > 本文转载自：[众成翻译](http://www.zcfy.cc) > 译者：[奈末](http://www.zcfy.cc/@Naeemo) > 链接：[http://www.zcfy.cc/article/806](http://www.zcfy.cc/article/806) > 原文：[https://hacks.mozilla.org/2015/09/flash-free-clipboard-for-the-web/](https://hacks.mozilla.org/2015/09/flash-free-clipboard-for-the-web/) 推动Web平台进步，促使Web支持更多新设备的努力尝试从未停止，其中一项便是减少Web对[Flash](https://en.wikipedia.org/wiki/Adobe_Flash)的依赖。作为这项工作的一部分，我们正在为全Web平台标准化并实现一些有效的特性，虽然当前这些特性只能依赖Flash。 很多站点仍未抛弃Flash的原因之一，是复制和粘贴这两个剪贴板API。Flash提供一个API，能够在点击按钮时动态复制文本到用户的剪贴板。它备用来实现一些便利的功能，比如说GitHub的“copy to clipboard”(复制到剪贴板)按钮。同时，在开发类似文本编辑器UI的场景里它也很有价值：与其让用户使用键盘快捷键或者右键菜单，不如一键复制来得好。 但是，Web APIs尚未提供通过JavaScript复制文本到剪贴板的功能。这也是为什么禁用Flash访问GitHub时，一个灰色丑陋的区块取代了原本的复制按钮。令人庆幸的是，我们已经有了一个办法。HTML Editing APIs提供了[`document.execCommand`](https://developer.mozilla.org/en-US/docs/Web/API/Document/execCommand)作为执行一些文本编辑命令的入口。之前网页环境下禁用了复制`copy`和剪切`cut`两个名令，但是从Firefox 41开始，用户触发的回调JavaScript已经可以使用这两个命令了。 使用 ` execCommand ("cut"/"copy") ` --- `execCommand("cut"/"copy")` API只能在用户触发的回调里使用，比如说一次click事件。如果在其他环境下尝试调用，`execCommand`将会返回`false`，表征该命令执行失败。运行`execCommand("copy")`会将当前选中的内容复制到剪贴板， 现在我们来实现一个基本的一键复制按钮。 ``` //...
这周末，老单位2个同事参加了2016前端开发峰会，看到群里面的照片和文字，真心觉得办的不错，有很多干货啊。可惜啊，现在还听不到他们2位的参会分享了。 ## 微信-安卓用户排行： GT-N7000 MI-4LTE HM NOTE 1S GT-I9300 HM-2A HM NOTE 1LTE MI 2S MI 3 REDMI NOTE 2 GT-NT7100 #### 以上估计就代表了安卓在中国区市场的流行手机了 ## 微信黑科技：//triggerWebViewCacheCleanUp 这个是微信清除缓存的指令，只要在消息框输入发送就好了 安卓系统以后再也不用怕没有刷新功能了 苹果系统再也不用担心系统的超级缓存了 ## 微信X5升级blink...
>>前段时间，在面试一个资深前端开发时，偶然想到了一道面试题：用一个正则表达式来计算一个字符串中有多少个英文字符。 ## 首先把面试题简化下 ### 怎样在一个字符串中找到指定的字符 #### str.search ``` var str='1a2b3c4d5ef'; str.search('a') ``` #### str.indexOf ``` var str=‘1a2b3c4d5ef’; str.indexOf('a') ``` #### str.match ``` var str=‘1a2b3c4d5ef’; str.match('a') ``` ### 怎样在一个字符串中找到指定字符的个数 #### for/while等循环...
在手机端实现跑马灯效果，可以直接使用css3实现； 具体代码实现： - 首先指定溢出时滚动： overflow:-webkit-marquee; - 跑马灯样式，分三种： -webkit-marquee-style:scroll | slide | alternate; > scroll，从一端滚动到另一端，内容完全滚入（消失）时重新开始。 > slide，从一端滚到另一端，内容接触到另一端后，立马重新开始。(ios实测和scroll一致) > alternate，内容不跑到显示区域外，在里面来回碰壁反弹。这里主要用第一种。 - 跑马灯跑的次数：-webkit-marquee-repetition:infinite | number > infinite 为无限多次，不结束。或者可以用正整数设置滚动的次数。 *跑动的方向：-webkit-marquee-direction:up | down | left...
# parseURL 主要的作用，把一个http地址，转换的类似的local对象，原理是利用a标签实现的。 经过转换后，返回的对象是和location基本一致的结构； ## 源码如下： ``` javascript $.extend($,{ parseURL:function(url) { var a = document.createElement('a'); a.href = url; return { source: url, protocol: a.protocol.replace(':',''), host: a.hostname, port: a.port, query: a.search,...
# 前端框架现状调查 – 中期结果 > 本文转载自：[众成翻译](http://www.zcfy.cc) > 译者：[chajn](http://www.zcfy.cc/@chajn) > 链接：[http://www.zcfy.cc/article/1144](http://www.zcfy.cc/article/1144) > 原文：[https://medium.com/@sachagreif/the-state-of-javascript-front-end-frameworks-1a2d8a61510#.798c7ttfz](https://medium.com/@sachagreif/the-state-of-javascript-front-end-frameworks-1a2d8a61510#.798c7ttfz) [Sacha Greif](https://medium.com/@sachagreif?source=post_header_lockup)，巴黎设计师，现居大阪。Sidebar和Folyo社区的创始人，Discover Meteor的合著者 ---  ### 前端框架现状调查 #### 一些初步的结果 我也没想到我的 [JavaScript现状](http://stateofjs.com/) 调查能进展的这么顺利。仅仅进行了三天，就已经收到了3000多份回复。兴奋之余，我想先就目前的数据统计一下，看看能不能初步得出一些有趣的结论。 之所以说“初步”，是因为我希望有更多的开发人员参与到这个调查中来。倒不是说要把调查规模搞的多大，毕竟，反馈多了就更具有普遍代表性了是不是，不然就很难得出更精准的结果。 顺便一说，这也是为什么我没把这个调查推广给 [Discover Meteor](http://discovermeteor.com) 的读者的原因。要是我这么搞的话，估计 [Meteor](http://meteor.com)...
公司网站涉及交易，所有H5移动站用JDK禁止了微信的分享功能 ``` wx.config({ jsApiList: ['hideOptionMenu'] }); wx.ready(function(){ wx.hideOptionMenu(); }) ``` 使用了以上的代码后，在微信中，点击右上角后，是不会出现分享功能了。 ## bug 描述 公司网站大部分页面采用了路上的代码，是禁止分享的。 但公司的活动宣传需要开启微信的分享功能，活动页面也不调用以上的代码，而是调用 ``` wx.config({ debug: false, appId: d.appId, // 必填，公众号的唯一标识 timestamp: d.timestamp, // 必填，生成签名的时间戳 nonceStr: d.noncestr,...