2014年小事记

一月

我依旧在老家昏昏碌碌的过着日子,湖北的冬季依然格外的寒冷.我心中没底,年后的我会在哪里,何去何从,一切未知,但是辞职近半年的我,内心逼迫自己走上”绝路”.是时候做点什么了.依旧心怀感恩的迎接新年,心中的愧疚达到极端,已经没有什么脸面让我依旧留在父母身旁,一心想着撞破脑袋也要走出去.决定立即按照最初的想法执行…

二月

鼓足勇气的我,踏入广州.那段艰辛努力,几乎是曾经没有的,只让我想起了09年8月的初出校园求职的日子…一生都无法忘记.当然来到广州后永远不会忘记小熊的帮助和指导…我经过努力,一周内跑遍了广州大部分区,面试公司一二十家,一个本子上记满了各个公司的基本信息…那段日子,忙碌,我找了个便宜简陋的旅店,住了一周,记得是400块吧,当时就是无论如何一周内找好工作和解决固定住宿问题,幸运的是,我成功了.经过努力,我进入了太平洋,对我而言,这里环境是比之前的公司好太多,我抱着虚心的态度,不谈别的,踏踏实实找到一份理想的工作便好.面试的情景依然历历在目,感谢接待我的Z翠纯,感谢二面的汤哥和家明哥,感谢最后机试的树姐,和终极谈话的Gatty,我当时真的很菜.感谢各位给我了这个机会.我只觉得我当时是世界上最幸运的.

三月

继续阅读2014年小事记

IScroll的click单击事件变为双击多次触发解决

前阵子做WAP端的项目,用到了iScroll插件,结果发现有很多问题,起初并未用多个设备进行测试,以为并没有什么问题,结果进入项目尾声进行测试的时候,竟被这个插件折腾了好几天简直让人抓狂.其间收集了一些资料,但是苦于项目上线后一直都比较忙,也就没有什么时间总结这个iscroll插件的一些问题,距离项目上线已经有了半个月了,我下文写的不好还请见谅.

首先iscroll是为了让wap端页面的的某个层内能够固定滚动而特别制作的,我起初想这个东西使用好像还是比较广泛的,问题应该不多吧.之前同事也有使用过,不过基本上使用的是简单的功能,而我这次进行的更多是复杂的交互效果,因此,让我纠结了很久的就是android手机在不同系统版本上,在不同浏览器上以及不同系统版本和不同版本浏览器这三种情况都可能发生各种问题.

参考资料:

https://github.com/cubiq/iscroll/issues/674

https://github.com/cubiq/iscroll/issues/547


以上内容是一个月前写的…我已记不清了,大概是处理不同设备的click事件遇到了很多问题,,,这篇文章放在草稿箱许久了,是时候终结了!

这个iscroll插件的确有很多需要注意的地方,仔细阅读了文档重要部分好几遍,结果写的代码还是问题很多,本文就iscroll使用上的一些问题总结一下与大家分享分享.

我们先来看一个demo(从项目中提出可能有部分冗余代码),主要用于分类选择,菜单弹出功能,(实际应用效果见太平洋电脑网手机端产品库页面,当然后期可能改版,实际效果与demo略有差异)如,用到zepto库,iscroll插件.其中iscroll主要是处理固定高度的滑动效果,它能够自适应并兼容很多设备,所以我选择了插件.

当然每个可以上下滑动的区域都需要创建一个IScroll实例,只需要简单的一句话即可,但是要遵守它的HTML代码结构,详细可以参考官方文档.这里就不讲基本的使用方法了,底部有资料写的很清楚了.我就简要说一下关于这个DEMO中的注意事项.

首先是这是一个带有弹出层的页面,每次点击导航会有一个向下滚出的层,那么弹出后就会创建对应的一个或两个iscroll实例,当点击顶部收回的时候,容易忽略一点,刚创建的实例依然存在,假设收回不销毁新建的实例,就会出问题!

其次,iscroll内的的click事件处理,默认是false,这在ios系统的手机上会出现click执行两次,也就无效的情况,需要改成true,所以需要对创建的示例增加参数.但是问题在于兼容了ios后,android各个版本会出现同样的问题.解决方案,对不同的安卓设备采取不同的click属性值处理,但是经过大量机器测试,依然可能出现无法兼容的情况(实际上是通过一个正则处理的,见代码)

function iScrollClick(){ //设备识别来控制iscroll的click真假
    if (/iPhone|iPad|iPod|Macintosh/i.test(UA)) return true;
    if (/Chrome/i.test(UA)) return (/Android/i.test(UA));
    if (/Silk/i.test(UA)) return false;
    if (/Android/i.test(UA)) {
        var s = UA.match(/Android [\d+.]{1,5}/)[0].replace('Android ','');
        return parseFloat(s[0]+s[2]+s[4]) <= 442 && parseFloat(s[0]+s[2]+s[4]) > 430 ? true : false;
    } //测试大量机器总结的规律,可能会有极小部分机器在选择功能上依然出现问题
}

其实官方文档中有一个options.preventDefault的属性可以配置,但是不知道是哪里出了问题,经过反复测试都没起到作用.于是这个问题折腾了很久…直到有一天…

虽然早起处理这个问题的时候就知道有fastclick,或许可以解决,但是又是一个插件,毕竟一个项目中用太多的插件不好,所以未采纳,前几天研究移动端的touch事件和普通的pc端click等事件时,更清楚的明白了一些东西,例如事件冒泡等…反复琢磨测试,觉得fastclick或许也是可行的,既然之前的方案不够完美,不妨试试这个demo,去掉了iscroll对click的配置(即默认都是false),并添加了fastclick插件及全局配置后,测试了很多机器,发现,并未出现问题.那么目前来看针对iscroll出现的双击,穿透,或是点击延时等问题应该全部处理好了!

毕竟这个内容过去太久,凭借回忆来写的,可能有些混乱,建议有遇到类似问题的朋友仔细看看两个demo的区别,一个是正则处理iscroll的click属性的demo,一个是用fastclick插件的iscroll demo,只需要注意两个demo的js的区别即可!

最后附上相关参考资料:

官方资料: IScroll官方网站 IScroll PDF参考手册 IScroll Github

其他: iScroll 5 API 中文版


后来发现,原来这不是万金油,总会有些坑爹的情况.比如魅族原生浏览器,还有chrome…竟然也会出问题,太失望了.

也就是说,在魅族原生浏览器下,需要设置为click : true才能正常运作,魅族原生浏览器如果false则会出现两次点击,而产生意外情况.而chrome则是当false时,整个iscroll容器内的事件全部被阻止了..没有办法只得打补丁了.于是加了以下代码…

var clickBoolean = false;
if (/Chrome/i.test(UA)) clickBoolean = true;
if (/534.30/i.test(UA)) {
    if (/UCBrowser/i.test(UA)) clickBoolean = false; //覆盖同版本
    else clickBoolean = true; //魅族原生?
}

我本来想通过UA标识来区分魅族浏览器,因为我这个写了534.30来区分魅族的方法风险太大因为UC也是这个版本,所以又加了一条如果是uc还是要用false,想在魅族的UA上处理,但是魅族原生浏览器真的很坑,UA上面根本无法下手.只能临时采用下策了.

这几点是需要大家注意的…(2015年2月2日18:54:00)

轻轻地

风拂过脸颊,
寒冷的冬并不死寂,
放学的路上,
孩子们戏耍着你追我打,
忙碌的人们穿梭在狭窄的巷道间。

我轻轻的走着,
想着些许故事,
欢笑迟迟未来,
脸上的肌肉似乎有些酸。

看不出的心被外表迷惑,
朋友们啊,
我亲爱的朋友,
那久违的快乐难忘,
欢喜让人迷恋,
忘记了很多,
轻轻地,
我思念的人呢?

继续阅读轻轻地

国行KindleVoyage小玩有感

十月底终于狠心买了个kindle voyage电子阅读器,2000块钱的阅读器对我来说是很奢侈的.因为我压根并不是一个读书爱好者,只是出于期望自己不要像个文盲一样,以后能看更多书籍的初心,买了下来,其实这也是意见来自父亲和阿姨的生日礼物了,再次感谢!闲话少说先上图…

还是比较忙,暂时更新这几张图片咯.关于使用感受,因为使用总时间还不到三个小时,不敢轻易评价,简单说说目前的感觉.

在观看普通pdf文档的时候,其实是相当不方便的,较好的是分辨率较高,如果不嫌麻烦,依旧可以正常阅读,但是字很小.

不过阅读AZW,MOBI等相关格式的文档要好得多,我想kindle voyage恐怕真的不适合阅读技术文档了.

另一方面,网上流传的阴阳屏问题的确比较严重,我的也是,不过白天是不影响的,就看个人心情了.后续我会继续完善此文,给想了解kindle voyage的朋友提供一些参考

安装express后验证显示没有相应命令

要总结什么规律,想自己写点东西出来,但是java的东西,公司已经限定死了,不使用优秀的开源框架,前端的js是不限制的,发现nodejs可以使用来开发后台的东西,直接操作文件也是可以的,于是就想使用nodejs来写。

安装了一个web的框架exress,是安装网上说的方法

sudo npm install -gd express

在命令行里敲express -V没有反映,出现/usr/bin/env:node No such file or directory的错误,别的说什么要安装一个工具集,

sudo npm install -g express-generator

擦,搞完之后敲express -V还是没有用,后来找usr/local/bin里面的express文件打开看,开头引用的是:#!/usr/bin/env node

引用的是node命令,但是node命令在安装了nodejs后一直使用的是nodejs的命令,在user/bin中可以找到nodejs的可执行文件,也就是在环境变量里只有nodejs,没有node,所以我直接在这个文件夹里sudo cp nodejs node

事实上我觉得,直接在这个文件夹下建立一个软链接,貌似也是可以用的,只是没有测试过。有兴趣可以自己试一下。

搞完之后直接敲express -V,ok,出来想要的东西了。其实还有很多nodejs的包在用npm下载之后是默认调用的node这个命令。因此,在环境变量中添加一个node命令还是比较靠谱的说。

chrome 39 有时候出现无法调试?

这几天做东西发现chrome 39的多个版本上,在带有参数的url链接上出现无法调试的情况,而且相当频繁,实在是让人恼火又着急.本机的是版本 39.0.2171.71 m,包括办公室的另一个chrome 39也这鸟样…

不知道其他人有遇到过吗,尤其是这个error.竟然搜不到- -!也是醉了.

chrome_debug_error
chrome_debug_error

现实出现console面板带抖动,文字变得不清晰,然后刷新页面几次就出现Failed to get text for stylesheet  1 : No style sheet with given id found, 其中的数字会每次刷新后累加…莫名其妙!

要问我解决办法,只能带着淡淡的忧伤的心情告诉你,我开了两个chrome,新版的是为了同步数据,旧版的是为了调试 :cry:

PS:

或者在地址栏输入chrome://flags 全部重置为默认值(不过不敢保证有效- -)

或参考Error shows “Failed to get text for stylesheet (#): No style sheet with given id found”, what does this mean?不过似乎也并未提出良好的解决方案