javascript语法特性回顾(持续更新)

发现很多编码过程中都需要运用到一些技巧,而这些技巧恰恰是最细微的语法层面的,也有可能是javascript的一些语法特征,很多时候我们并没有掌握清楚导致运用的不熟悉。因此,本文主要记录了一些遇到的问题和应用,时不时的会更新,所以可能前期会显得凌乱,没有章法,还望见谅。 继续阅读

发表在 前端开发 | 标签为 , , , , , , , , , , | 留下评论

写给过去的2013

如果说2012年感概颇多,那么2013年就是变化颇多。离开阿里,从杭州回到武汉,从传统PC的前端到移动web开发;然后又离开海豚到海伦,从一个“海”跳到另一个“海”,不论是不是瞎折腾,至少我的目的是明确的。每次看到网上很多程序员下海开饭馆、卖水果不亦乐乎,咱也来个更离奇的搞酒吧!后来才发现,真正做起来并没有想象的那么容易,很多事情都是程序员思维无法能搞定的。但很幸运海伦是个非常开放自由的平台,自己建设、完善、发展壮大队伍,所有的同事都能有一颗包容、追求进步的心,能够将互联网的思维在传统行业的尝试。

当然,人生不止有事业,更多的还有生活。陆续看到各个同学朋友,结婚的结婚、生娃的生娃,处处都洋溢着幸福的气息。或许2013就是爱你一生,那么就在这年搞定人生大事。真的很幸运,这一年一气呵成完成了住新房、买新车、娶媳妇三部曲(不过现在才发现压力山大。。。天天靠媳妇给零花钱救济)。当然也有生活中很多的困难,最重要的是有个不争气的哥哥、老婆身体不适、岳父岳母身体都不是很好。人人都说身体是革命的本钱,希望家人在2014年身体好起来,也希望大家保重身体。

对比去年的总结,好像今年没有那么多感慨了,更多的很淡定的叙述,也算是对自己的过往有个交代吧。既不愤世嫉俗,也不豪情万丈,只是需要认真的生活工作。不管他PM100也好,习大大来我们Helen’s玩也好,我只能做好自己的事情,只有对自己负责,对家人和朋友负责,才能做到最好的自己。2014年,一个非常关键的一年,或许事业和家庭不能兼顾的话,或许更多的是事业吧,也希望LD能够理解。当然我也更希望所有的亲朋好友都能够身体健康、幸福安康。因为我们的出发点都是为了让生活更幸福,只是出发点不一样而已!

 

发表在 工作历程, 生活足迹 | 标签为 , , , | 5条评论

javascript学习相关文章及博客推荐

最近面试了很多同学,大家的基础都参差不齐。很多同学都在最后问我有什么建议,说实话我自己也就面试了一两次,但是还是说说自己的体会和招人的标准吧。

首先,对于学生我不期待大家有多么牛的技术,我只期待你和大多数搞技术的人一样对你所在的领域有非常高的兴趣,并能让我看到你能为了你的兴趣去执着的专研过,学习过。那么如何才能让我看到你的执着和兴趣呢?我就会常问大家,为什么搞前端啊,搞了多长时间。然后针对你碰到的某个问题,或者你觉得有意思的问题、有成就感的问题追问下去,看看你到底有没有去搞透彻而已,也并不是说非要把你问倒。

其次,学生我期待的是潜力。潜力怎么体现呢,就是看你机灵不,聪明不?O(∩_∩)O~,我的评价标准其实很简单,给个问题,看看你能想到有哪些解决办法,或者思路。我会给你一个提醒,看你反应得过来么?那么这其实就是一个坑,我一直都不太相信有聪明的人一说(除了极个别,目前我这辈子就见过一两个)。人的聪明程度都是建立在你有接触过,有广的知识面和相应的学习能力基础上的。你再聪明的小孩,我不相信没接触过就可以轻松搞定数理方程。所以,这个还需要同学们平时的多看多学多尝试。 继续阅读

发表在 前端开发 | 标签为 , , , , , , | 一条评论

grunt-manifest-generator缓存文件自动生成工具

上周编写了一个自动合并页面的工具,后来想到把各种js、css合并之后,会出现对应的文件数量、文件的相对路径均发生了变化。所以,这样会导致缓存文件的内容页会变化。这样我们还不得不去手动更新manifest文件的内容,岂不自己找麻烦。于是就趁着对grunt还有一点儿热度,赶紧编写manifest自动扫描生成的工具。

需求:根据配置自动扫描对应的源文件内容,提取所有的源文件html的绝对路径(本文绝对路径指网络的url或者本机的绝对地址,如果是网络url就无需更改,如果是相对当前html文件的路径,就需要转换成绝对路径);html中涉及到的img标签的src文件绝对路径;以及html内容中的style内容中的背景图,字体文件的绝对路径;外联js脚本的绝对路径;外联css样式文件的绝对路径;下载外联css样式文件内容,并提取其中的所有背景图片、字体文件的绝对路径(如果是相对当前css文件的相对路径,需要转换)。当然所有的文件路径都会去重,然后根据配置的条件过滤一些文件,选择性的记录文件列表。然后再将所有的文件列表转换为相对于manifest文件的相对路径。然后再自动生成对应的manifest文件。

这里面主要就是各种路径一定要处理正确,免得最后都晕了。也是搞了半天呵呵,这也是主要的内容,因为生成文件很easy。

下面就看看如何使用吧.

当然是先安装了

或者你直接修改你工程的package.json文件中的依赖加上此npm包即可,然后直接调用以下命令就会帮你下载好所有依赖的。

然后就是在Gruntfile.js中添加此任务了: 继续阅读

发表在 前端开发 | 标签为 , , , , , , , , , , | 留下评论

grunt-combopage页面压缩工具介绍

最近需要对产品进行优化,最开始是用seajs做包管理然后再利用grunt压缩所有的css、js内容为1个文件。后来在实际需求当中,其实还会引用一些其他网站的文件,比如jquery.js或者yui的reset.css等。另外,很多时候,我们写代码都是即兴的在html结构附近写一段对应的style或者js,再或者一个很大的页面,每个部分由不同的人来完成(每个部分都独立有自己的js代码和css代码),最后就会导致整个页面合起来导出布满了css或者js。而最终的发布版本希望把所有的代码都合并起来,还有引用的第三方的代码也一同合并。因此,就诞生了本文所介绍的页面压缩工具。

该工具会将页面所有的style代码,不管是外部引用,还是本地路径引用的,还是代码片段,都一股脑的全部按照出现的先后顺序进行合并、压缩。然后将最终的css代码按照配置,要么放在head的最后,要么单独成一个文件引用进来。

js部分由于具有依赖关系,或者依赖dom结构等而不能全部一股脑合并,所以需要每个部分分开处理,处理完之后放回原来的位置。同样的可以对外部引用,本地路径,代码片段都进行处理的。当然,如果你觉得顺序不重要,可以配置一下将所有的js代码都合并压缩之后放在body的尾部,要么直接填内容到html中,要么作为独立文件引用进来。

当然,有些js或css代码你并不需要处理,可以增加ignore=”true”就可以忽略了。

html部分同样采用了html-minfier作为压缩工具,可以对html结构进行压缩输出。当然html结构压缩的工具还不够完善,需要谨慎使用。

大概的配置就这么几个:

grunt使用起来也非常方便,例如: 继续阅读

发表在 前端开发 | 标签为 , , , , , , , , , | 留下评论

离别,开始

今天是2013年5月16号,离我正式入职两周年还差11天。本来很想等到这个点,可是总有那么一些理由让我无法待那么久。很平淡,很安静,如往常一样的,只是今天晚上开始和同事们聚餐,喝酒。没想到这么快,说实话自己都还没有完全做好准备,不知道这个变化是好是坏,但是阿里有这么一句类似的老话:“改变不一定有机会,但不改变肯定没有机会”。其实,很多时候人都是感性的认识,一股劲的冲过去了,想要的并不是最后的结果,而是这个酣畅淋漓的过程。没有什么选择是需要后悔的,因为你永远不知道其他的选择的结果会是什么;也没有必要去后悔什么,因为你已经站在了新的起跑线上,更重要的是你已经拥有了很多值得回味的记忆和知心的朋友。

两年,该背负的责任需要继续。家庭和生活始终是人生的归宿,工作只是一个开始,正如马云选择了回归生活作为一个新的开始。年轻,应释放的激情需要延续。人生本来就是游戏,角色只是一个看世界的角度,正如莎士比亚塑造的千万个哈姆雷特一般。工作生活两不误,这个是需要时间的积淀,除非你很清楚你应该放下什么,你想要什么。总有一些你需要做出选择,选择就要选择相信,相信就要继续。

最后不管各种TV/AV,还是要感谢阿里的同事们,非常有活力和感召力的年轻人,总感觉这里才是我的归宿一般,谢谢你们带领我一起成长!

Hello,world!

发表在 工作历程, 生活足迹 | 标签为 , | 3条评论

部分IE6中jsonp请求不成功的gzip引发的bug(转载)

bug1描述:
IE6部分版本,某些情况下,开启gzip的资源,会不渲染或不执行(如果是.js的话.)
会引发此bug的条件:
1. 首先,必须由a页跳转到b页面 : 即 a页面有 location.href = b页面.(点链接,form post,replace, assign等方式都会导致问题,包括target=_blank弹窗的情况)
2. b页面自身,或使用动态创建脚本(硬编码script src=xxx 也存在此问题) 的响应头中包含下面情况:
    cache-control 包含下列伪指令:
        (1) no-store
        (2) no-cache + 其他与缓存新鲜度检验有关头共存时, 如 max-age=xxx (xxx无所谓.0 或3000都会触发,) 或 no-cache + must-revalidate 甚至是,no-cache, pre-check=0等情况..
        (3) no-cache独立存在时,体现为一种不稳定情况.可能会触发.但也不是100%.仅仅是偶尔…
   ps: 本bug ,与 http1.0 头域 : Pragma : no-cache ,无关. 也于是否chunked输出无关.
  注意: 不配置cache-control并不写expires 同样会触发.
发表在 前端开发, 网络分享 | 标签为 , , , , , , , , , , , | 留下评论

HTML5 Web Worker介绍、js脚本调试方法以及浏览器兼容实现

最近一有空就开始捣腾我自己的小框架,这几天主要围绕webworker的实现来了。所以也下了点功夫,主要是对webworker的介绍/实现原理/调试几个方面进行了不算深入的了解,并最终成功封装了自己的跨浏览器webworker模块。虽然还比较粗糙,但是已经具备了基本功能,可以让使用者不用关心浏览器的兼容问题,不妨试一下。下面就我最近对webworker的理解做一下梳理。

一、Web Worker的由来

众所周知,javascript的运行都是在单线程中完成的,没有多线程的概念,顶多也就是一个异步加载和setTimeout或者setInterval的使用来模拟。至于具体浏览器内部是如何运作的可以看看jQuery作者John Resig对浏览器的运行时工作的分析文章,具体请移步到http://ejohn.org/blog/how-javascript-timers-work/观摩学习。那重点是今后有没有一个开辟多线程工作的可能呢?比如将一些复杂计算比如3D或者数据处理放到一个线程,webUI和事件的处理放在一个线程,更或者其他的监控放一个线程等等。HTML5肩负救世主的使命,理所应当的必须完成这个光荣的任务,为我们带来一线生机–Web Worker。2008年提出HTML5草案开始到现在其差不多已经定型到能够在独立的运行时环境(不同于页面主线程运行时)中运行,并且通过消息机制完成主线程了worker线程之间的数据通信。

二、Web Worker介绍

Web Worker的创建是在主线程当中通过传入文件的url来实现的。如下所示: 继续阅读

发表在 前端开发 | 标签为 , , , , , , , , , , , , , , , , , , , , , , | 留下评论

javascript异步动态加载js和css文件的实现方法

最近在做自己的小框架的按需加载模块,那么就需要做到异步动态加载js和css文件。我们都知道引入外部的js文件都是动态生成script标签节点,要么是通过设置src引入文件,要么是生成节点附加内容。但关键是如何得知文件加载成功的事件,这个确实重点关注的地方。但是为了保证不出问题,就需要对所有浏览器的异步加载成功事件实现进行一个测试。就目前而言,网络上比较成熟的解决方案有很多,但是没有具体使用过所以也没有一个结论,就去简单分析了一下主要几个框架或者插件是如何实现异步加载事件响应的。

一.LABjs

这个项目位于github上面,其本意就是Loading And Blocking JavaScript,就是一个异步脚本加载器,相对于原始的粗暴script标签方式而言,提供了弹性的性能优化(做到js文件在浏览器中尽可能的并行加载,并且能够提供顺序执行的保证),还能在高级浏览器中实现先加载然后执行的功能。作为一个异步js加载器还是非常优秀的。其在异步加载的成功事件响应方面的实现如下: 继续阅读

发表在 前端开发 | 标签为 , , , , , , , , , , , , , , , , , , , , | 5条评论

服务器与浏览器缓存协商控制机制的总结

引子:昨天中文站出现了大量的用户投诉,投诉内容是运费发生变化,运费金额不正确。可是我们本地怎么测试都没有问题。但是考虑到问题唯一的可能是昨天的一个关于运费模版优化的项目引发的。因为,我昨天中午发布了一个style应用版本,发布时间是11点20分左右,运费模版优化项目的发布是在晚上9点钟左右。但是由于运费模版优化项目在正式发布阶段发现了问题,于是在第二天的凌晨3点左右响应了正式发布失败操作,style应用一起做了回滚处理(即用中午11点20左右那个版本覆盖服务器现有版本)。那么,经过分析很有可能是用户端的前端js文件并没有正常的回滚到中午11点20分左右发布的版本(后续均用merge-ump-old.js来代替此版本),也就是说该用户在当天晚上9点至3点左右(运费模板优化项目正式发布期间)访问过立即订购页面,所以浏览器缓存了运费模版优化项目所产生的版本(后续均用merge-ump-new.js来代替此版本),而浏览器在第二天再次访问立即订购页面的时候,请求服务器的style文件,而服务器直接告诉浏览器缓存文件比我服务器的文件还要新(因为服务器已经回滚merge-ump-old.js,而用户还缓存的是merge-ump-new.js),所以直接返回Status Code:304,浏览器也就仍然在用昨晚缓存的文件,于是就悲剧了,并且是大量的悲剧。 继续阅读

发表在 前端开发, 服务器技术 | 标签为 , , , , , , , , , , , , , , | 10条评论

IE/Chrome浏览器下背景图片居中与内容区对齐1px偏移解决方法

最近在支持行业运营的一个推广页面,遇到了非常规的页面banner图居中的问题,为了解决此问题,做了简单的测试,做了一个小结,为经常做大促页面的兄弟姐妹们提供参考解决方案。 继续阅读

发表在 前端开发 | 标签为 , , , , , , , , , , | 留下评论