检测是否IE

从jQuery的jQuery.browser里面拿出来的,jQuery从1.9开始废弃这个方法,改用jQuery.support来检测浏览器支持的特性。

jQuery的说法是,使用 navigator.userAgent 检测不准确,容易被伪造欺骗。

但我还是觉得,这玩意检测成本低,挺有价值的。至于开发者去伪造它,就让他们伪造去,我只是用来做比较暴力的降级处理。

PS:

预告,下篇文章分享一下使用Git的Branch来维护同一个项目中的差异化代码,最近一个项目用到,挺管用的。

《Node.js开发指南》翻阅笔记

第一天上班,配套的电脑居然没有到货,无聊了一天,就把《Node.js开发指南》拿出来翻了一下。

下面是今天的一些笔记,Node.js自身的特性对我来说暂时意义不大,所以讨论的不多,主要是记录一些开发流程这些外围的信息。

javascript规范

CommonJS:该规范涉及模块、包、系统、二进制、控制台、编码、文件系统、套接字、单元测试。拟补了ECMAScript没有约定的领域。

平台支持

win、mac、linux全平台支持。win平台cmd通过Node命令进入Node.js的交互模式。

npm

Node.js的包管理工具。通过包管理可以安装一些例如express这样的轻量级的web application框架。

Web服务方式

传统的LAMP方式是浏览器发起http请求,由Apache对其作出响应,并把请求交给php解析器来处理。

而Node.js则是启动一个进程,独占一个端口,所有指向该端口的请求都有这个Node.js进程处理。

因为端口是被进程独占的,想使用虚拟主机服务,还是得使用Apache/Nginx这类软件来统一处理请求,然后根据虚拟主机的规则,再分发到各个Node.js的进程中。

在这个方面,Node.js和PHP差不多,PHP现在也支持内置Web服务。也许未来,npm里面会出现一款包是专门管理虚拟主机的,这样就省掉了Apache/Nginx。

结语

Node.js让前端工程师手伸向了后端和客户端,给有理想的开发者们多了一把有利的扳手。

《Node.js开发指南》

最近弄HybridApp的一些心得

SDK的项目折腾了一个月,终于快到收获的时候,把这过程中的一些心得体会记录一下吧~

manifest并不是很好用

资源文件的更新,是在浏览器下次刷新的时候才会生效。

包含manifest的Html主文件默认会被缓存,类型是Master Explicit。

在测试的时候,我还发现,Master Explicit的更新机制,和其他资源文件并不完全相同,有时候修改manifest文件,浏览器不更新主Html文件。所以我平时都干脆把主Html文件,也放入到manifest的cache列表中,保证最多两次刷新浏览器,主Html文件可以得到更新。

建议:

如果想用好manifest机制来做离线缓存功能,最好手动把applicationCache对象中的缓存更新、刷新浏览器的功能实现,便于日后文件更新,相关信息可以看以前的文章

Hybrid App的离线功能,还可以配合localStorage、WebViewCache等搭配实现,可控性更佳。

Hybrid App测试不容易

因为我没做个原生App的开发,对Eclipse不熟练,App底层的那套测试方法我都不懂,就自己琢磨出一种测试的方法。

JS解耦测试:

把JS流程中的很多判断条件,统统写在js的公共变量里面,这样的话,js脱离native环境,可以通过浏览器来修改每个公共变量,来模拟App的各种事件。

善用浏览器中的中端、单步、Profiles等测试功能,做到在与Native整合的之前,就测试好大部分的js代码。

20120903215940.png

JavaScript,一切皆对象

估计说出来也没多少人相信,在项目开始之前,我几乎没有写原生JS的经验。不过,人的潜能总是被逼出来的,一个月下来,我从最简单的写过程JS,到现在掌握了对象的继承等。

在JavaScript的世界中,一切皆对象(请允许我装13一下),但是,这里的对象,并不是我们平常所说的类的实例化后的对象。

20120903220537.png

从上面的截图可以看到,定义一个空对象obj,它的prototype是Object。JavaScript的继承都是通过对象的prototype来实现的。

Private Methods的实现:

在一个闭包空间里面,通过 function __privateFunc() {}来定义私有方法。公共方法使用上面的方法暴露给window。

对于JavaScript的感触,还有很多很多,下次再开篇文章来写写吧。

Github For Windows的Diff真是废

觉得@大猫上次直接扒Android皮的主题挺好看的,拿来用了一下,并且修改了头部菜单,结果就

QQ20120819183810.png

QQ20120819183912.png

正如你所看到的,一片红一篇绿,最终导致Github自动合并失败,囧

Html5之离线Web应用程序

2013-05-03更新:采用事件监听来优化二次刷新问题。

Html5一大新特性、同时也是非常吸引人的特性,就是其离线功能。它让Web从online延伸到了offline领域。

通过浏览器兼容性检查我们可以看到,除了IE9,几乎是全平台兼容此特性,让我们放开手脚去实现。

三部曲

1、准备manifest文件,格式如下。需注意里面的路径为相对manifest文件的路径

manifest编辑好后,保存为manifest.appcache。(很多老教程让我们保存成cache.manifest格式,不过我最近尝试过,要保存成appcache才能生效)

2、给HTML文档头部添加manifest清单支持

3、添加MIME类型,让服务器支持.appcache的文件类型

网上Apache的修改方式一大堆,我给来个nginx的,环境是Ubuntu 12.04

一些注意事项

上述三步之后,你就可以给你的应用添加离线功能,但是你会觉得用起来很别扭(起码一开始我是这样觉得的),有下面一些情况需要注意:

1、本地缓存更新时刻

浏览器第一次打开html文件的时候,访问manifest,下载所有缓存文件。

第二次打开html文件的时候,不论该html是否被添加到manifest的CACHE选项中,该html实际上已经被缓存,故此次打开,是加载的本地html。浏览器检查网络manifest是否有更新,如果有,下载新的manifest文件,并重新下载所有缓存内容。此时,新的本地缓存不会被显示,而是等待下次刷新页面后,才会显示。

2、使用Location.reload()来手动刷新页面

旧方案(不推荐):

每5s检查一次,并询问用户时候刷新页面,刷新页面后,新的本地缓存被显示出来。

新方案,监听updateready事件(推荐使用):

资料来源:http://www.html5rocks.com/zh/tutorials/appcache/beginner/

3、FALLBACK中的URL遵循同源规则,必须与manifest文件同源

我被这个问题纠结了好几天,一直搜索都找不到原因,一开始还怀疑是FALLBACK不支持ajax请求。

今天终于找到问题的原因:

Important All FALLBACK URLs must have the same origin as the manifest file. That is, they must be in the same domain and use the same access scheme.

参考资料

使用开源phpmailer发送邮件

网上也有几篇教程,不过我是为了给自己的服务可以发送邮件给自己用,所以只是用phpmailer的base功能,不需要使用smtp。

先去phpmailer官网下载,然后把里面的class.phpmailer.php放到自己的class库中。

我自己再定义一个mail.function.php的函数,里面new一个phpmailer的对象。

好吧,之前我是自己用PHP原生mail()函数写的邮件功能,但因为一直没看懂该如何对邮件正文进行重编码,导致邮件正文在部分收件工具中总是存在各种乱码情况。

需要用到发邮件的时候,只需要postmail($body);即可,当然,记得把mail.function.php给include进去。

jQuery validate 表单验证插件

最近写了两个组表单提交的页面,好久没用jQuery,在写的时候总遇到一些莫名其妙的为难题,这里记录一下。

如果表单通过前端JS来先做预判断,然后通过JS来post到后端脚本的,则表单form标签可以不填action和method等信息。

validate初始化部分

validate验证、提交部分

之前一直没写return false,导致总是出现个问题,例如alert()会一闪而过,后台会记录两次提交的,提交有时GET给了表单页面自己等…

后来怀疑是submit()的问题,查了一下手册,才发现有这么个东东。

知呼前端工程师面试题目

题目

第一题的答案(完全自己做出来了,但是超时了)

第二题的答案(不知道为什么加个括号就能用)

第三题的答案我的答案有点问题,等弄好了再上传 要想完美,先出主体,通过负margin+双容器)

update:

3、我之前就纳闷了,怎么上面的链接,我用Chrome可以打开,其他浏览器就打不开。刚想起,Dropbox要翻墙,我的Chrome长期是自动列表走SSH隧道的。So,想看的,要挂一下VPN或者SSH咯~~

2、三栏布局问题,假如顺序如下,貌似就没有完美的方案了。

这里有三种三栏布局的方案:

第一种绝对定位的方式,不适合这里,因为这里的section上面还有其他东西,出了文档流,后面的布局都麻烦。绝对定位适用于在最外圈的布局,内部的东西不适合,除非真的是要这个东西离开文档流。

第二种负margin的方法,我感觉挺好的,但是按照这个的DOM的顺序,也无法实现。不过平时做东西,肯定是要主体部分在前,侧栏在后的,所以比较好。那些各种负数感觉bug bug地,这个算是一个技巧吧。

第三种自浮动的方式,把主体扔最后了,我个人是不喜欢,同样也不符合我这里给限制的顺序。

1、第三题的答案还是有点问题,第二个方法很作弊,B列两端的内容被挡住了。

PS:托管在Dropbox的速度一般般啊,大家将就一下吧,Github还不会弄~

jQuery Select菜单二级联动

应用:

参考地址:
http://wlog.cn/javascript/jquery-select.html

但文中代码只是在UI上实现了要求,在功能上,还会遇到问题。

假如这是一个表单,那么,在提交的时候,POST里面,会有多组city所对应的值。

解决方法:

1、给city所在的select去掉name标签,使其无法提交到POST
2、给选中的city的select添加name标签,使其该选中的city的值可以通过POST等方法进行传递

代码重现:

通过该方法,POST中就会得到city的唯一值