最近的情况，以及一些牢骚

发表于 由
2

距离上一篇日志已经快有一个半月的时间了，最近这段时间各种各样的事情纠缠不清，一直都处于一种混乱的状态，于是今天关掉手机关掉QQ，一个人安静的写写博客。

私事略过不提，说说最近做的几个小东西。

首先是基于 wordpress 做了一个类似于百度贴吧的简单论坛，实现了用户 关注/私信/动态 以及 发帖的增删改/分类标签 等功能。原理其实很简单，发帖部分利用 wordpress 原生提供的 register_post_type 方法，新建一个允许用户自由发帖的文章类型；至于用户关注私信动态这一块，在 wordpress 原生的$wpdb数据库类上稍作扩展就行了。

开发过程中其实也遇到一些比较蛋疼的问题，最开始是希望用 wordpress 自带媒体库功能来管理用户的头像和上传之类的数据，但是翻遍官方文档也没找到可用的API，最后还是新建了一张附件表来处理，然后强迫症发作，花了很多时间去跟 wordpress 后台整合到一起…

第二个小玩意是基于NodeJS和MongoDB做的一个带SNS性质的游戏社区。最开始其实也是打算沿用上面的那套方案，但是存在两个问题：

问题一：由于存在一个客户端与客户端实时数据交互的需求，如果用ajax长连接的话，一个长连接就要持久占用一个php进程导致服务器成本剧增，而且不同进程之间的数据共享也没有太好的解决方案；用ajax轮询的话，数据交互又会存在延迟，而且频繁的请求对CPU的消耗也比较大。

问题二：其中某个模型的数据结构非常复杂，如果用Mysql的话，可能需要频繁的跨多个表查询。

由于上面这两个问题一直没有较好的解决方案，所以这个项目搁置了一个星期，直到我的膝盖中了一箭。直到我偶然想起NodeJS和MongoDB。

第三个是基于NodeJS的数据抓取/采集程序。NodeJS的本质是JavaScript，而操作DOM是JavaScript最基本的功能之一。相比其他通过正则来采集数据的方式，使用NodeJS非常简单高效。目前基于这个程序做了一个淘宝客网站，直接从淘宝API拿到JSON数据往数据库里存，太安逸了。

多触式web前端开发之一：对于touch的处理

发表于 由
7

水果公司的那些small and cute的设备给我们提供了前所未有的用户体验。当用户在iphone和ipad上运指如飞的时候，那些使用objective-c写出优秀应用的开发人员们心里一定充满了成就感，因为正是他们（而不是水果）让iOS的世界变的丰富多彩。然而对于我们这些以web为自己事业核心的程序员来说，这种让人欲罢不能的多触式体验似乎跟我们关系不大，因为浏览器那一小块地方就是我们和用户的全部交集了。而许多网站为了让iOS的用户能够在多触式体验下使用自己的服务，都专门花钱开发objective-c的本地程序作为自己web service的客户端。

继续阅读 →

无觅网络：自动批量申请连接

发表于 由
2

无觅网络是个什么东西，请不明真相的群众围观这里

如果你恰好也在使用无觅网络，正好也在用 chrome 浏览器，碰巧也觉得一个一个的去申请连接太过麻烦…那么下面这段代码对你很有帮助。

1 //无觅网络自动批量申请连接
2 var t = setInterval(function(){
3     if(0!=$('.appBtn').length){
4         $('.appBtn').trigger('click');
5     }else{
6         $('a[type="available"]').trigger('click');
7     }
8 },2000);

如何使用？

继续阅读 →

不要轻易改变用户习惯

发表于 由
6

有这样一群博客：当用户点击博客页面上的链接时，链接锚文字会变成“正在加载中”等类似文字，然后在当前页面中打开链接。

有这样一群用户：他们使用多标签浏览器，习惯在新标签页中打开链接，喜欢一次性点开多个链接然后再慢慢阅读。

当这两者碰到一块时，有趣的事情就发生了。

继续阅读 →

巧用wget命令提高wordpress博客首页加载速度

发表于 由
6

不管在什么情况下， html 页面永远要比 php 页面快得多，而且几乎不占CPU资源。为了提高 wordpress 载入速度，将页面静态化不失为一个简单可行的方法。目前有很多缓存类插件都实现了这个功能，不过今天分享一个无需插件即可实现首页静态化的方法。

PS:该方法仅限于搭建在 Linux VPS 或 Linux 独立服务器上的博客。

继续阅读 →

wordpress获取文章缩略图

发表于 由
回复

最近在制作主题中需要将文章内本地上传图片的缩略图显示在首页，在google上搜索的结果，大多都是通过add_filter增加自定义的方法来遍历文章内的所有图片，效率比较低，而且与我的需求也不太相符。翻了一遍官方文档以后，总结出来如下方法：

 1 <?php
 2 //开启文章缩略图支持
 3 add_theme_support('post-thumbnails');
 4 //获取文章内首个附件图片的缩略图url
 5 function get_thumb($post_id){
 6     $args = array( 'post_type'=> 'attachment', 'numberposts'=> -1, 'post_status'=> null, 'post_parent'=> $post_id );
 7     $attachments = get_posts($args);
 8     if ($attachments) {
 9         echo wp_get_attachment_thumb_url($attachments[0]->ID);
10     }
11 }
12 ?>

将以上代码加入主题路径下的functions.php中，然后在其他地方调用get_thumb($post_id);即可输出缩略图的url。

另外，wordpress 默认的缩略图尺寸是150×150，而且本地上传的图片会额外生成 缩略图、中等大小、大尺寸 三种不同大小的图片，可以在 后台设置->媒体 面板中修改三种图片的尺寸，如果宽高都设置为零的话就不会生成该尺寸的图片。

再另外，今天收到 SAE 的邮件，部分内容如下，不做评价。

应上级部门要求，SAE平台使用微博API发布微博必须携带内容生产者的IP，自2011年12月26日起所有未添加IP的请求将被限制。

Javascript 面向对象编程：封装、构造函数的继承、非构造函数的继承

发表于 由
回复

本文转载自阮一峰的网络日志，原文链接：
Javascript 面向对象编程（一）：封装
Javascript 面向对象编程（二）：构造函数的继承
Javascript 面向对象编程（三）：非构造函数的继承

Javascript 面向对象编程（一）：封装

Javascript是一种基于对象（object-based）的语言，你遇到的所有东西几乎都是对象。但是，它又不是一种真正的面向对象编程（OOP）语言，因为它的语法中没有class（类）。

那么，如果我们要把”属性”（property）和”方法”（method），封装成一个对象，甚至要从原型对象生成一个实例对象，我们应该怎么做呢？

1. 生成对象的原始模式

假定我们把猫看成一个对象，它有”名字”和”颜色”两个属性。

1 　　var Cat = {
2 　　　　name : '',
3 　　　　color : ''
4 　　}

继续阅读 →

页码： 1 2 3

HTML5与IE条件注释

发表于 由
1

由于IE浏览器一直在CSS的解析上存在着诸多问题，导致前端开发需要花费大量时间为IE系列浏览器做兼容，好在微软从IE5开始就推出了条件注释来弥补IE的各种不足，使我们可以通过条件注释为定义不同的class，在不同版本的IE中为HTML元素应用不同的样式，HTML代码如下：

 1 <!DOCTYPE HTML>
 2 <!--[if lt IE 7]> <html class="ie ie6 lte9 lte8 lte7"> <![endif]-->
 3 <!--[if IE 7]> <html class="ie ie7 lte9 lte8 lte7"> <![endif]-->
 4 <!--[if IE 8]> <html class="ie ie8 lte9 lte8"> <![endif]-->
 5 <!--[if IE 9]> <html class="ie ie9 lte9"> <![endif]-->
 6 <!--[if gt IE 9]> <html dir="ltr" lang="zh-CN"> <![endif]-->
 7 <!--[if !IE]><!-->  <htmldir="ltr"lang="zh-CN">     <!--<![endif]-->
 8 <head>
 9 <metacharset="utf-8" />
10 <title>HTML5浏览器兼容</title>
11 <metaname="author"content="Enkows.Zhang" />
12 <!--[if lt IE 9]>
13 <style type="text/css">section, article, aside, header, footer, nav, dialog, figure { display:block; }</style>
14 <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
15 <![endif]-->
16 </head>
17 <body>
18 <div>HTML5浏览器兼容</div>
19 </body>
20 </html>

CSS如下：

1 div{ color:#000;}
2 .ie6 div{ color:#222;}
3 .ie7 div{ color:#444;}
4 .ie8 div{ color:#666;}
5 .ie9 div{ color:#888;}