imAtlas

老码农的小感想

2024-02-06T14:31:00Z

我发现，现在很多计算机和软件工程相关专业的学生，
都不是因为喜欢计算机这个行业或者编程才选这个专业的。
都不是因为喜欢计算机这个行业，或者说编程才选这个专业的。
临近毕业了。除了课堂作业，连一个项目都没有写过
当年我想学医。所以报考了纯医学类的院校。
谁知，被调剂到了计算机专业。
我也不明白校长的脑洞怎么会这么大。一个医学类院校竟然会有计算机专业？
当我看到录取通知书，简直都要崩溃了
等开学后。我发现。我还是这个学院的第二届学生
我更加崩溃了……
好不容易说服自己接受现实
一开始选择了C++入手。然而选错了
在图书馆找了一个不知名作者写的不知名的书，里面用的他写的不知名的库
懵懵懂懂的搞了一个月，才写出了一个hello world。

使用CSS mask 实现图片的斜线拼接

2016-02-04T03:50:00Z

每次必说题外话

话说貌似好久没有写技术文章了，自从娃娃出来后，很少能有时间做技术研究，思考的时间也不足。不过有得必有失，世上事也就酱紫了。但是作为一个前端攻城师，不写代码，不研究技术，是会被后浪拍死在沙滩上的。

碰巧前段时间碰到个CSS问题，一直很喜欢CSS的，能CSS解决的问题绝对不用JS，于是就抽时间整整看。

什么是斜线拼接

回到本文主题上，”斜线拼接“是我自创的词语，因为我也不知道怎么描述这个需求，o(╯□╰)o，实际的效果是下面所示：

眼力好的筒子应该就能发现，上面这张图是两个帅锅拼接在一起的，看中间的斜线。

但是呢，刚接到这个需求的时候，开发是抓狂的——第一反应就是用canvas画图，这得多累啊，只是要显示张图片而已，竟然还要动用一坨JS，O__O "…

不过依稀记得，CSS 貌似有个遮罩的特性，可以实现图片的部分显示的效果的。more

CSS mask & linear gradient

要实现这个特性，就需要用到CSS遮罩和线性渐变。

至于这两个是什么东西，我就不班门弄斧的介绍了，毕竟这两个属性出生也挺久了的，不了解的筒子可以看这两篇文章CSS遮罩——如何在CSS中使用遮罩和深入理解css3-gradient斜向线性渐变。

先看下实际的效果

大家请看妹子中间（注意表看错了，是两个妹子的中间），有一条比较明显的分界线。多说无益，我知道你们想看demo，用力戳这里>>。

第一步，显示两张图

OK，先看代码，然后我再来解释。

    <div class="img-container">
        <div class="img-left"></div>
        <div class="img-right"></div>
    </div>

然后是CSS

    .img-container{
        position: relative;
        width: 200px;
        height: 200px;
        border: 5px solid #40BCFF;
    }

    .img-left{
        background: url(img/left.jpg);
        background-size: cover;
        width: 100%;
        height: 100px;
    }

    .img-right{
        background: url(img/right.jpg);
        background-size: cover;
        width: 100%;
        height: 100px;
    }

OK，看下效果

小明：尼玛，这不是坑爹么，这么简单谁不会？

小朋友，别急，我们两个主角还没上了。

画个斜线

为了实现斜线拼接，你总得有个斜线吧？把img-right的背景换成一个带有“斜线”的图，这个就不用“真”图片啦，CSS渐变就能完成，如下：

    .img-right{
        background: -webkit-linear-gradient(left top, blue 50%, white 50%);
    }

好，把背景换成真实的美女，渐变图作为mask

.img-right{
    background: url(img/right.jpg);
    background-size: cover;
    -webkit-mask-image: -webkit-linear-gradient(left top, blue 50%, white 50%);
}

But，如果你这么做了，会发现看到的是完整的图，并没有被遮盖，跟下图一样。

这是因为css mask的原理是，它只会把遮罩图里透明像素所对应的原图部分进行隐藏，而我们的渐变图是完全不透明的（我们是蓝白色相间的），所以没有遮罩效果。那么把蓝色改成透明试试。

.img-right{
    background: url(img/right.jpg);
    background-size: cover;
    -webkit-mask-image: -webkit-linear-gradient(left top, transparent 50%, white 50%);
}

当当当~~美女只显示一半啦！♪(^∇^*)

层叠

最后，把第二张图层在第一章上面，由于第二张图左边一半都是透明的，背景里的美女也能直接透过来啦。

.img-right{
    position: absolute;
    left: 0;
    top: 0; 
}

看下最终img-right所需要的样式代码

.img-right{
        position: absolute;
        left: 0;
        top: 0;
        background: url(img/right.jpg);
        background-size: cover;
        -webkit-mask-image: -webkit-linear-gradient(left top, transparent 50%, white 50%);
        width: 100%;
        height: 100%;
}

怎么样，很简单是吧？

CSS3有很多新鲜（其实这个不新鲜了~）的特性可以实现很多有趣的应用，如果你有其他方案，欢迎留言讨论，O(∩_∩)O谢谢阅读！

肿么安装Effect Game

2015-07-22T07:52:00Z

Effect Game的安装还是很麻烦的, 原作者用的时代比较久远, 有很多软件包在新的linux系统上都可能有兼容问题, 这里做个安装记录方便后人查阅.

环境准备

fedora 21
能翻墙的比较快的网络

Effect Game的需要运行在linux系统里, 理论上任何linux发行版都可以, 但是我在ubuntu上折腾了好久, 总归还是放弃了.

各个发行版虽然内核一样, 但是各种软件包可能不一样, 名字也可能不一样, 包管理工具也不一样, 所以环境这里, 还是建议用 fedora 21, 而且不能用最新版, 最新版的fedora把 yum 给替换成了 dnf, 还是很多问题.

这里的安装步骤是基本按照这个E文文档的, https://github.com/jhuckaby/Effect-Games/wiki/Installation-Guide, 启用能用yum安装的软件包都直接用yum了.

安装各种系统依赖包

作者列了yum install xxx 很多包, 但是其实可以批量安装的

如果是第一次用yum, 先更新下yum的版本库 yum repolist

批量安装, 安装完成后再敲入整个命令确认是否有安装失败的(已经安装了的不会重复安装)

yum install zlib-devel libxml2-devel libgpg-error-devel libgcrypt-devel libxslt-devel expat-devel db4-devel e2fsprogs-devel krb5-devel openssl-devel aspell-devel rpm-build gcc screen sendmail "gcc-c++" bzip2-devel freetype-devel libpng-devel libtiff-devel libjpeg libjpeg-devel libstdc++-devel curl curl-devel libidn-devel krb5-devel e2fsprogs-devel libgcrypt-devel libgpg-error-devel

创建 Effect Game 的安装目录

这里就直接按照作者的目录来设置, 大部分东东都放到这里, 避免各种引用要修改

mkdir /effect
mkdir -p /effect/perl/bin/

安装 perl 和 cpan

yum install perl
yum install cpan

作者把 perl 放到了 /effect/perl 里, 这里做个软连就好

ln -s /usr/bin/perl /effect/perl/bin/perl 
ln -s /usr/bin/cpan /effect/perl/bin/cpan

安装各种 perl 模块

第一次使用cpan时, 直接敲入 cpan 运行一次, 按提示使用自动配置

为了避免安装时可能会遇到的下面这个提示, 烦它的话可以先装一下 YAML.

>> 'YAML' not installed, will not store persistent state

cpan YAML

然后批量安装各种模块, 安装完成后再敲入整个命令确认是否有安装失败的(已经安装了的不会重复安装)

cpan LWP::UserAgent Archive::Zip Archive::Tar Class::Loader Digest::SHA Digest::SHA1 Math::Pari Devel::Symdump Module::Build MIME::Lite Test::Simple Text::Wrap CGI Devel::CoreStack Cwd IO::Socket::INET Test::Harness Time::HiRes Unicode::String Date::Parse MIME::Parser Crypt::SSLeay ExtUtils::XSBuilder IO::Socket::SSL File::lockf IPC::ShareLite Syntax::Highlight::Engine::Kate Text::Aspell Net::Twitter::Lite HTTP::Daemon File::Flock

这个需要等很久很久, 比很久很久还要久.

Text::Aspell 很容易安装失败, 按如下步骤重新安装

yum install aspell aspell-en

cpan Text::Aspell

安装图片服务 ImageMagick

ImageMagic不要用yum安装, 编译时需要指定很多环境变量, 直接下载下载自己编译.

安装jpeg和png解码库

yum install libjpeg-devel libpng-devel

作者用的ImageMagick是6.5版本, 可能会编译失败, 这里下载最新版(目前是6.9).

wget "http://www.imagemagick.org/download/ImageMagick.tar.gz"
tar zxf ImageMagick.tar.gz
cd ImageMagick-*

ln -s /usr/include/freetype2/freetype /usr/include/freetype
export CPPFLAGS="-I/usr/include/freetype2 -I/usr/local/include"
export LDFLAGS="-L/usr/local/lib"
mkdir -p /effect/fonts

./configure --prefix=/effect/magick --enable-lzw --without-threads --without-magick-plus-plus --with-perl=perl --with-fontpath=/effect/fonts --without-x --with-quantum-depth=8 --enable-shared=yes --enable-static=no

make
make install

添加库到系统

echo "/effect/magick/lib" > /etc/ld.so.conf.d/imagemagick.conf

重新加载配置

/sbin/ldconfig -v

测试是否已正常安装

perl -MImage::Magick -e ';'

没有出错就安装OK, 注意, 这里是没有什么显示

创建个软链

mkdir -p /opt/local/bin
ln -s /effect/magick/bin/convert /opt/local/bin/convert

安装音视频模块 MPG123 and OGG Encoder

安装 MPG

wget "http://www.effectgames.com/install/mpg123-1.10.0.tar.bz2"
tar jxf mpg123-1.10.0.tar.bz2
cd mpg123-*
./configure
make
make install

安装 OGG

yum install libvorbis libvorbis-devel vorbis-tools

检查下面文件在不在, 有就安装正确了

ls /usr/local/bin/mpg123 /usr/bin/oggenc

安装 Apache

先安装或更新一下openssl

yum install openssl

Apache也有很多安装选项, 自己下载来编译

wget "http://www.effectgames.com/install/httpd-2.2.14.tar.bz2"
tar jxf httpd-2.2.14.tar.bz2
cd httpd-*

./configure --prefix=/effect/apache --with-mpm=prefork --with-ssl=openssl --with-perl=perl --enable-so --enable-expires --enable-headers --enable-mime-magic --enable-rewrite --enable-ssl --enable-mods-shared="all authn_file authn_default authz_host authz_groupfile authz_user authz_default auth_basic include filter log_config env setenvif mime status autoindex asis cgi negotiation dir actions userdir alias expires headers ssl rewrite"

make
make install

之后Apache会安装到 /effect/apache

安装 mod_perl 模块, 有些系统会缺少 perl 的一些依赖, 先用 yum 安装依赖, 然后安装最新版的 mod_perl ( 目前是2.0.9 )

yum install perl-ExtUtils-Embed

wget "http://mirror.bit.edu.cn/apache/perl/mod_perl-2.0.9.tar.gz"
tar zxf mod_perl-*.tar.gz
cd mod_perl-*
perl Makefile.PL MP_AP_PREFIX=/effect/apache
make
make install

在执行perl Makefile.PL MP_AP_PREFIX=/effect/apache 时可能会报错

[  error] '/effect/apache/bin/apxs -q NOTEST_CPPFLAGS' failed:
[  error] Use of assignment to $[ is deprecated at /effect/apache/bin/apxs line 86.

问题原因是新版本的perl里面, [ 不能用于变量名了, 修改 /effect/apache/bin/apxs 源码, 把$[ 替换成 $a(vi 中可以用 %s/$\[/\$a/g 命令全局替换), 保存并重新执行 perl Makefile.PL MP_AP_PREFIX=/effect/apache

增加www用户组和用户

/usr/sbin/groupadd www
/usr/sbin/useradd -m -g www www

替换配置文件, 直接用作者的配置

wget "http://www.effectgames.com/install/httpd.conf"
mv /effect/apache/conf/httpd.conf /effect/apache/conf/httpd.conf.bak
mv httpd.conf /effect/apache/conf/

配置项目

先下载项目代码下来

wget "https://github.com/jhuckaby/Effect-Games/tarball/master"
tar zxf jhuckaby-Effect-Games-*.tar.gz
rm jhuckaby-Effect-Games-*.tar.gz
mv jhuckaby-Effect-Games-*/* /effect
ln -s /effect/htdocs /effect/apache/htdocs/effect

做一些必要配置如域名等, 具体项直接参照安装文档

Effect Game的主要配置文件在 /effect/conf/Effect.xml, 基本上都不需要修改

启动测试一下是否正常

/effect/apache/bin/apachectl start
/effect/apache/bin/apachectl stop

初始化各种环境

创建数据存储目录和配置权限

mkdir -p /data/effect/storage
chown www:www /data/effect/storage

mkdir -p /data/effect/cleanup
chown www:www /data/effect/cleanup

创建日志的目录

mkdir -p /logs/effect
chmod 777 /logs/effect

mkdir -p /logs/apache
chmod 777 /logs/apache

创建初始数据, 执行这个脚本就行, 数据的配置在 /effect/conf/initial_data_setup.xml

/effect/bin/setup_db.pl

启动图片服务进程, Effect Game是使用了个后台进程来优化图片, 配置文件在 /effect/conf/image_service.xml, 用下面的命令启动

mkdir -p /data/effect/queue
chmod 777 /data/effect/queue

/effect/bin/imageservicectl.sh start
/effect/bin/imageservicectl.sh stop

配置定时任务, 这个任务用来处理日志文件和数据文件, 命令行敲入 crontab -e, 输入

00 * * * * /effect/bin/maint.pl hourly
30 00 * * * /effect/bin/maint.pl daily

定时任务的log输出在 /logs/effect/maint.log

过时的日志文件会被打包存储, 默认配置下存在 /backup/effect/logs/CATEGORY/YYYY/MM/DD/HH.gz, 路径可以在 /effect/conf/Effect.xml 中修改

创建备份目录

mkdir -p /backup/effect
chmod 777 /backup/effect

All Done

现在可以启动 Effect Game 啦

/effect/bin/imageservicectl.sh start
/effect/apache/bin/apachectl start

然后访问 http://127.0.0.1/effect/, 默认用户名和密码都是 admin

如果要配置域名, 可以在 /effect/apache/conf/httpd.conf 中修改 ServerName

So, enjoy it!

谈前端工程师的职业规划

2015-04-17T08:57:50Z

在敲下这个标题的时候，心里好虚。话说我一直不太喜欢发表这些看上去很假大空的文字，每个人的职业规划都是独有的，不具有太大的可复制性，把自己的经历放出去，容易误人子弟。只是最近很多师弟们（别问我为什么都是师弟，我想静静……也不要问我静静是谁！）问起这个，也就根据自己的经历发表一下对前端工程师的看法吧，“我说的都是错的”，仅供参考。另：本篇是纯文字，密集恐惧症换成勿入！

从我接收第一份前端需求开始，到现在也有五个年头了。自己也从一个愣头青变成一个快到而立之年的大叔，时间真的是哗啦哗啦的快。这五年里，其实可以分成三部分：1~2, 3~4, 5。more

1~2 吸吸吸，疯狂的吸取知识

刚毕业时满腔热情，一门心思只往前端事业发展。刚从学校出来，看到什么都是新鲜十足，什么都想学。不断的买书看书垫枕头，最疯狂的时候一个礼拜晚上看完正本犀牛书+做笔记，后来再也达不到这种速度了。很幸运我能加入到AlloyTeam，依靠WebQQ，使得我的编码能力、项目经验duang duang duang的上去了。同时也搞了很多奇形怪状的业余项目，基本上无论遇到什么跟JS相关的“新”技术（新是对于我自己来说的），我都想去尝一尝。

对于刚毕业的初学者来说，头两年真的真的是非常重要，学习的激情、速度以及熬夜的能力可以发挥的淋漓尽致。在这个阶段，通过大量的编码提升JS能力，同时尝试各种JS框架和库，寻找适合自己的框架，甚至自己也写了一个JS库和构建工具。“不要重复的造轮子”这句话，初学者都应该无视。你不造轮子，怎么知道别的轮子好不好用？怎么知道造一个轮子有多难？怎么知道如何改进轮子？我不认为一个新手去看jQuery的源码能看懂，反正我当时就晕晕乎乎的。

在这个时间点里，其实还没怎么考虑以后的发展，而且也仅认为前端工程师，学好JS/CSS/HTML就够了，其他的没兴趣也没意愿去学。

3~4 大大大，扩展知识面

在JS/CSS/HTML里探索了2年后，突然发现越学越不懂了。出了HTML5，看了WebSocket，想学会，结果要看网络协议、要看HTTP/TCP，还要学Server开发等。顿时感觉分身10个也不一定能学好。为了跟上潮流，也得硬着头皮上。好不容易Server、网络、前端、浏览器各种知识都多少了解的时候，移动潮流来了！OMG，Android、iOS还有WP……生命不止，学习不休。

其实到了这个阶段，多少也算是个有经验的攻城师了。开发一般需求不在话下，偶尔还能承担个架构设计。在提升JS能力的同时，开始要往多方面发展。前端工程师远远不仅是JS而已。制作一个性能高、交互好、视觉美的页面，需要从前端框架选型、架构设计、构建工具，到后端通信机制、设计与交互、网络和浏览器优化等各方面的知识。一专多长才是前端工程师的终极目标。有个人说得对：一专是指你不可替代，多长标示你可以替代别人。这样你在团队在公司的地位才更加牢固，公司也会给你提供更多的资源。

同时还要开始提升自己的名气，可以通过发表技术博客，提交和参与开源项目，做部门级公司级还有业界分享，参加业界会议等等。在这个信息瞬息万变的互联网时代，保持交流才会让自己不落伍。同时名气大了，能找到更多志同道合的人一起研究技术（探讨生命的起源也不是不可能的），甚至想跳槽，也是放个屁的事儿（意思是简单-_-|| 这都什么比喻）。

5~ 摸摸摸，摸清前方的路

这个时候，如无意外，你也应该成为高级工程师了。编码在工作中比例已经不算太高，更多的工作是承担技术评审、架构设计和项目管理等事情。工作中除了完成自己的事情，可能还需要指导新人，做新人培训，带领新人完成项目。同时还会有一个抉择摆在眼前：继续深入研究技术 or 往管理方向进发。

技术 or 管理，这里没有对错之分，只有合不合适。有的人就不善于交流，同时喜欢专研，可以继续走技术的路，发展成专家；有的人则可能有比较强的领导力，可以带领一群人完成项目，那可以转向管理，成为Team Leader等。

不管选哪个方向，你都已经是个优秀的人，而且应该把这种优秀传承下去。成为导师，使新人变得优秀；成为面试官，挖掘优秀的人；成为讲师，让更多人学习到优秀，等等。

总的来说，头两年一定要打好基础，找准自己的G点，深攻下去；高潮之后，往广度发展，掌握其他相关和不相关的配套知识（这不是矛盾么？Σ( ° △ °|||)︴）；然后摸到自己的目标，发售大胆的爱爱（老了，手抖打多了）吧。不仅自己爱（前端），也要让更多人一起爱（前端）哦。

在浏览器端用JS创建和下载文件

2014-01-02T15:31:00Z

前端很多项目中，都有文件下载的需求，特别是JS生成文件内容，然后让浏览器执行下载操作（例如在线图片编辑、在线代码编辑、iPresst等）。

但受限于浏览器，很多情况下我们都只能给出个链接，让用户点击打开-》另存为。如下面这个链接：

<a href="file.js">file.js</a>

用户点击这个链接的时候，浏览器会打开并显示链接指向的文件内容，显然，这并没有实现我们的需求。more

HTML5中给a标签增加了一个download属性，只要有这个属性，点击这个链接时浏览器就不在打开链接指向的文件，而是改为下载（目前只有chrome、firefox和opera支持）。

下载时会直接使用链接的名字来作为文件名，但是是可以改的，只要给download加上想要的文件名即可，如：download=“not-a-file.js”。

Not enough！

但是这样还不够，以上的方法只适合用在文件是在服务器上的情况。如果在浏览器端js生成的内容，想让浏览器进行下载要如何办到呢？

其实还是有办法办到的，相信很多人都多少听过了DataURI这个词，比较常见的就是图片的src，如：

<img src="`data:image/gif;base64,R0lGOXXXXX">`

DataURI的解释可以移步这里，本人就不在解释了。

那么，现在要将js生成的内容进行下载就有法可依了。封装成一个方法如下：

function downloadFile(aLink, fileName, content){
    aLink.download = fileName;
    aLink.href = "data:text/plain," + content;
}

调用downloadFile之后，用户点击链接，就能触发浏览器下载。

Not enough！

但是，还不够，上面的办法有两个硬伤，会导致流失很多懒人美眉：

下载的文件类型限制死了，美眉要下载处理后的果照怎么办？
下载还要再点击一下，太麻烦啦。

要解决文件类型的问题，可以用浏览器的新API（URL.createObjectURL）来解决问题，URL.createObjectURL通常都是用来创建图片的DataURI用来显示图片，这里用来下载文件，让浏览器来帮我们设定好文件类型。

URL.createObjectURL的参数是File对象或者Blob对象，File对象也就是通过input[type=file]选择的文件，Blob对象是二进制大对象，详细说明可参考这里。

现在，我们只要用content创建一个ObjectURL并赋值给aLink即可解决文件类型的限制问题。

文件的自动下载也挺好办，自己构建一个UI点击事件，再自动触发下，就能实现自动下载啦。

现在来看看最终代码：

function downloadFile(fileName, content){
    var aLink = document.createElement('a');
    var blob = new Blob([content]);
    var evt = document.createEvent("HTMLEvents");
    evt.initEvent("click", false, false);
    aLink.download = fileName;
    aLink.href = URL.createObjectURL(blob);
    aLink.dispatchEvent(evt);
}

现在，只要一调用downloadFile，文件就自动下载了，是不是很爽咧，^_^。

注：目前（2014-01-02）Blob和URL.createObjectURL在标准浏览器里面都不再需要加私有前缀，可以放心使用啦啦啦～～如果你不放心，可以查查Can I Use。

千方百计加速Web之加速DNS解析

2013-10-30T07:54:00Z

通常情况下，做移动开发时，如果要向后台请求数据，都会直接使用TCP通信。但实际上一来HTTP比TCP简单易用多了，二来有很多现有CGI如果要进行改造得花很大功夫。还是会有使用HTTP请求来拉取数据。

在做Android QQ二维码时，扫描到二维码字符串，就是把该字符串用HTTP传给后台，后台解析后返回给客户端，客户端再进行下一步处理。在提交测试后，测试同事发现，在移动网络上，DNS解析会经常失败，导致二维码扫描功能不可用。功能测试不通过，导致无法发布。同时测试喜欢在清空DNS缓存和屏蔽了DNS解析的情况下，二维码解析功能仍然可用。因此这里增加了如下处理：

进入“扫一扫”的界面时，客户端就开始对CGI所在域名进行解析，并把解析结果缓存到本地文件；
发起CGI请求时，还是使用原域名进行请求，如果DNS解析失败，则用第一步缓存的IP替换掉CGI中的域名再发起一次请求。

由于国内有好几个网络运营商，公司在不同的网络环境都有不一样的出口IP，因此选择最近的IP才能快速访问CGI。所以缓存域名结果时，需要区分网络分别保存。
more
这样，当用户的手机上至少成功使用了一次二维码扫描时，CGI对应的IP就保存下来了（至少有一个出口IP）。下次访问（同一次登录或者关闭手机QQ后再打开）时，即使DNS解析失败，还是能使用上一次保存的IP进行访问，可能会相应比较慢（用户从A网络切换到了B网络），但起码保证了功能的可用性。实现起来也不难，Java都有现成的接口了。

主动发起DNS解析只要调用InetAddress的接口即可，把获取到的结果保存到SharedPreferences供下次使用：

public static void lookupIP(Context context, String host){
     SharedPreferences preferences = context.getSharedPreferences("host", 0);
     String ip;
     try {
          InetAddress address = InetAddress.getByName(host);
          ip = address.getHostAddress();
          SharedPreferences.Editor editor = preferences.edit();
          editor.putString(host, ip);
          editor.commit();
          QLog.d(TAG, "lookup address: " + host + ", ip: " + ip);
     } catch (UnknownHostException e) {
     }
}

然后在HTTP请求出现DNS解析错误的时候，用IP替换掉URL中的域名即可：

HttpResponse response = null;
try{
     response = openRequest(context, url, host, method, params, header);
}catch (IOException e){
     //DNS错误改用ip重新发一次
     String ip = getIP(context, host);
     if(ip != null){
          url = url.replace(host, ip);
     }
     response = openRequest(context, url, host, method, params, header);
}

这里之所以不直接用上次保存的IP来替换域名进行访问，是因为在正常情况下，进入“扫一扫”的界面时，已经预先对所用域名进行了预解析，如果解析成功，调用openRequest时就不用DNS查询了；而如果预解析失败了，openRequest的时候还能再尝试一次，失败时才使用IP访问。同时，很多用户都会在移动网络和WIFI网络中切换，如果直接用IP替换域名，会出现用户当前是移动网络，而是用的域名IP是在教育网IP（上一次使用的是教育网WIFI）的情况，导致CGI响应变得更慢。

当然，更好的解决方法是：先检测当前用户的网络环境，如果本地保存了对应网络的IP，直接使用IP请求；如果没有，再改用域名来请求。

还有更进阶的方案：第一次登陆时，从服务器拉取一份host列表（每个域名包括各个网络环境的出口IP），把所有HTTP请求的域名都替换成相应IP，这样就能完美解决DNS不可用、DNS解析失败的情况了。之后维护host文件的更新即可。

【代码分享】根据类型智能提取参数

2013-09-10T09:39:00Z

如果你是个Javascript程序员，那一定经常写下面的代码：

function funcA(url, params, callback, option){
    if(arguments.length == 2){
        //funcA(url, callback);
        if(typeof params == 'function'){
            callback = params;
            params = {};
        }else{
            //funcA(url, params);
            //......
        }
    }else {
        //......
    }
}

当参数变化形式比较少的时候还没问题，当你的方法想对多种传参形式进行容错时，一堆的if else判断就变得很难看了。这时不妨尝试下这个 getArguments 方法。more

var toString = Object.prototype.toString;

var is = function(obj){
    var type = toString.apply(obj);
    type = type.substring(8, type.length - 1);
    return type;
}

var getArguments = function(argus, type1, type2, type3 /*...*/){
    var srcTypes = [];
    var targetTypes = Array.prototype.slice.call(arguments, 1);
    var result = [];
    for(var i = 0, len = argus.length; i < len; i++) {
        srcTypes.push(is(argus[i]));
    }
    for(var m = 0, n = 0, len = targetTypes.length; n < len; ){
        if(srcTypes[m] === targetTypes[n]){
            result.push(argus[m]);
            m++, n++;
        }else{
            result.push(null);
            n++;
        }
    }
    return result;
}

使用方法如下：

function funcB(name, params, callback, option){
    var argus = getArguments(arguments, 'String', 'Object', 'Function', 'Object');
    name = argus[0], params = argus[1] || {}, callback = argus[2], option = argus[3] || {};
    console.log(argus);
}

运行结果如下：

funcB('a',function(){})
//console: ["a", null, function, null]
funcB('a',function(){}, {o:1})
//console: ["a", null, function, Object]
funcB('a',{p:1})
//console: ["a", Object, null, null]
funcB({p:1})
//console: [null, Object, null, null]
funcB(function(){})
//console: [null, null, function, null]

怎么样，是不是简单很多咧？^_^

Compiler@NodeJS（三）- 自定义命令

2013-03-20T15:11:00Z

_接上篇：Compiler@NodeJS（二）- 强大的管道_

本来早就应该写这篇文章的，只是忙的时候忙，闲的时候懒，导致拖了这么久。

不管内置多少命令，需求总是千变万化的，这时候内置命令就不够用了，需要使用者自己编写一些命令。现在来看看怎么做。more

一、内置命令

先来看看内置命令的文件结构是怎样的：

+--- compiler
    +--- cmds
        +--- copy
        +--- concat
            --- index.js
            --- README.md

每个命令都是cmds下面的一个单独目录，如copy、concat等等。每个命令下面都必须有一个index.js文件，作为这个命令的入口。index.js需要export一个属性（async）和一个方法（execute)，这里拿concat命令来说明，如下：

var fs = require('fs'),
    path = require('path');

//指示该命令是异步执行的，默认为false，命令结束后会自动调用 nextTask；
//如果为true，则需在本命令执行完成之后主动调用 nextTask
exports.async = true;
//命令的入口函数
exports.execute = function(task, compileConfig, runOptions, nextTask){
    //省略……
}

当concat命令被调用的时候，compiler会找到concat目录下的index.js，require之后执行它的execute方法，execute的参数说明如下：

参数名	说明
task	Object，这次命令调用要执行的任务，一个task包括任务id、任务要执行的命令（cmd）、任务的输入（source）、任务执行的输出目录（target）、任务的参数（params，也就是在config.json中配置的对应的params，比如下面示例代码中的custA_html中的params）
compileConfig	Object，执行compiler时传入的配置，也就是config.json内容
runOptions	Object，执行该任务时的运行时信息，包括compiler的目录、命令的目录（concat的绝对路径）、命令的文件名（index.js的目录+名字）
nextTask	Function，告诉compiler继续执行下一个命令，在设置了exports.async=true时，需要该命令主动调用，如：nextTask()。

二、自定义命令

自定义命令的写法很简单：

只要建立一个目录，比如custA（这里我放到了项目根目录下的custom_cmds），创建index.js文件，并提供execute方法；
在config.json中配置该命令，让compiler知道哪里可以找到该命令。

有了自定义命令的config.json的样子应该是类似这样的：

{
    "sourceRoot": "./",
    "targetRoot": "./build",
    "fileFormat": "js,css,html,htm,png,gif,jpg,jpeg,wav,json",
    "cmds": {
        "custA": {//配置自定义命令
            "id": "custA",
            "root": "./custom_cmds/custA/"
        }
    },
    "rules": {
        "custA_html": {
            "cmd": "custA",//使用自定义命令
            "target": "./",
            "source": "./",
            "params": {}
                 }
        }
}

如代码所示，只要在cmds项中，添加一个custA的json描述，给出id和根目录（root），其他事情就不用管了。

三、组合命令

在上一篇讲到，compiler最强大的是管道特性，可以用来将命令串联组合。有时候，一些任务可能需要很多个命令来组合完成，但是在每个rule里面写又不是很方便。这时候可以使用自定义命令的另外一种形式，组合命令。使用很简单，只要在config.json配置就行。

{
    "sourceRoot": "./",
    "targetRoot": "./build",
    "fileFormat": "js,css,html,htm,png,gif,jpg,jpeg,wav,json",
    "cmds": {
        "custB": "translate|copy,compress",
        "custC": "custB|ispriter"
    },
    "rules": {
        "translate_html": {
            "cmd": "custB",
            "parmas": {/*..*/}
        ｝
    ｝
｝

其实组合命令就是把原有命令串、并联在一起，方便之后使用，同时组合命令还能再次被组合，是不是很神奇咧？哈哈。命令的组合原则可以看上一篇介绍。不过有点需要注意的，在使用组合命令时，传入的params需要一一对应，比较不顺手。如果是多次组合过的命令，params将变得更加复杂，不过暂时只能这样了。

嗯，到这里，自定义命令的教程就结束了。如果你还是不太明白，可以到github中查看内置命令的实现，如：template-picker、ioffline、concat、copy等等，毕竟千言万语不及代码两行嘛，哈哈。有任何问题也可在本文留言，或者邮件给我，欢迎试用，^_^。

让Java跟Javascript更加亲密

2013-02-19T08:28:00Z

在移动App开发中，为了快速迭代，通常都会使用Native+Web的模式开发。具体来说就是使用Java提供接口，使用WebView控件嵌套Web页面来实现UI和交互。

在Android中，Java可以很方便的提供接口给WebView中的Js进行调用，只要以下一行代码就能搞定：

mWebView.addJavascriptInterface(new JavascriptInterface(), "custom_name");

这样，JavascriptInterface的所有声明为public的方法，都能被mWebView中的Js通过以下方式调用：

window.custom_name.xxx();//xxx为JavascriptInterface的公有方法

而Java需要调用Js时，则是通过WebView实例的loadUrl方法调用：

mWebView.loadUrl("javascript:xxx(yyy)");

这其实跟你在浏览器的地址栏敲下“javascript：alert（1）”的原理是一样的。

一切看起来都是那么的美好，只是……

当Java需要传递大量字符串给Js时，URL就力不从心了。另外，从URL执行的Js，在页面没加载完成时，是有可能导致页面出现undefined错误（因为要执行的那个方法可能还没有声明呢），会引发各种奇形怪状的错误。

那要怎么办呢？

再回看上面Js调用Java接口的地方，可以发现，Js是可以直接调用Java方法并取得Java给的返回值的（必须是可序列化的数据）。那么，为何不试试把Java需要执行的Js方法，保存起来，让Js来读取、执行、并把结果写回？

步骤如下：

Java把Js调用（命令）和回调缓存，如保存到ArrayList；
Js定时轮询Java提供的getCommandList接口；
Js读取到要执行命令，执行它，并把结果通过setResult写回给Java；
Java把对应命令的回调取出并执行。

如此即完成了Java调用Js的流程。

为了方便使用，简单的封装了下，名为AndroidJavascriptBridge，可移步到Github查看源码和示例（MainActivity.java和test.js ）。

使用方法

Android端调用, 加入com.imatlas.jsb 和 com.imatlas.util包, 按如下步骤调用

//1. 创建JavascriptBridge实例  
final JavascriptBridge jsb = new JavascriptBridge(webView); 

//2. 调用Javascript方法
Bundle params = new Bundle();
params.putString("asdfasdf", "123123");
jsb.require("alert", params, new JavascriptBridge.Callback() {
    @Override
    public void onComplate(JSONObject response, String cmd, Bundle params) {
        Log.i("js response",response.toString());
    }
});

//3. 提供Java方法给Javascript调用
//添加个 messagebox 方法给js
jsb.addJavaMethod("messagebox", new JavascriptBridge.Function() {
    @Override
    public Object execute(JSONObject params) {
        Toast.makeText(getApplicationContext(), params.toString(), Toast.LENGTH_LONG)
                .show();
        return "{\"ret\":123}";
    }
});

Javascript端的调用, 须先引入web/js/jsb.js, 之后按如下方式调用

//1. 调用Java方法
jsb.require('messagebox', {'text': '你好, messagebox!'}, function(response){
    alert('调用messagebox回来啦\n' + JSON.stringify(response));
});

//2. 提供Javascript方法给Java调用
jsb.addJavascriptMethod('alert', function(params){
    alert( '------\n' + JSON.stringify(params) + '\n========\n');
    return {'text': 'alert ok'};
});

IOS的话就要反过来了，要改成由Objective-C来轮询Js，来实现Js对Native的调用。

嗯，等改天有时间了，就把IOS也封装进来，用起来就简单多了。

从网页监听Android设备的返回键

2013-02-04T09:52:00Z

最近搞Android项目的时候，遇到一个比较蛋疼的需求，需要从Client App调用系统浏览器打开一个页面，进行杂七杂八的一些交互之后，返回到App。如何打开浏览器和如何返回App这里就不说了，有兴趣的童鞋可私下交流。

之所以说这个需求蛋疼，是因为Android有个物理返回键啊……返回键啊……键啊……啊……

用户按下返回键后，预期应该跟点击页面上的返回键一样——返回App。然而这个返回键的被按下的时候网页完全不知道啊（onbeforeunload不算），找不到直接的办法去监听，愁死我们这全苦逼程序员鸟～

虽然啊不能直接监听，曲线救国的办法，还是有滴。more

经过艰苦卓绝的寻找，发现使用HTML5的History可以稍微模拟到返回键的按下事件。原理如下：

页面加载完成时，调用history.pushState写入一个指定状态STATE，并监听window.onpopstate；
当onpopstate被触发时，检查event.state是否等于STATE，如果相等，表示页面发生了后退（按下返回键或者浏览器的后退按钮），则把这次行为当作是返回键被按下了（把点击浏览器的后退按钮也误算进来了，不过没啥好法子了呀）。

嗯，为了方便调用，把这个逻辑稍微封装了下，代码见这里（https://github.com/iazrael/xback），使用方法如下：

XBack.listen(function(){
    alert('oh! you press the back button');
});

XBack.listen(function(){
    alert('ah, press press press');
});

不过这个方法有些缺陷：

如果项目本身使用了pushState，则历史记录会有瑕疵（多了一个历史）；
浏览器的后退按钮点击以及调用history.back()也会被当成按下了返回键。

But anyway，对于结构和逻辑比较简单的跳转页来说（就是为了返回App用的），这个方法还是蛮实用的，对不对？嘻嘻～