工作 – 第 14 页 – 程序猿&程序媛

基于GMU开发单页应用

最近做的项目，H5单页应用，嵌入第三方IOS和Android客户端。
时间紧迫，开发时间一周，无暇筛选框架，大概对比了jQuery Mobile、Bootstrap、Amaze UI、AngularJS、Zepto等。经过对比项目环境，最终决定基于百度的GMU框架，创建单页应用。

吐槽一下，GMU似乎很久没有更新了。官网最新版本是2.1.1，更新时间2013.10.24。github最后一次更新是3个月前，但非重要更新。选中它的原因，只是看重百度的用户群体设备花样百出，性能参差不齐，其兼容性相对较好。

第一次开发H5单页应用，过程中遇到几个问题，特此记录一下。
1.设计稿局限于单一平台。
视觉设计师，根本没有考虑多种设备和分辨率下的显示效果。设计的很多交互效果，在实现时非常麻烦，花费了大量时间调整兼容性。
2.字体大小在不同设备上显示有差异。
参考GMU的demo，使用百分比来控制font-size。在PC端chrome中模拟，没任何问题。但放入H5容器（如微信）后，字体大小与PC端chrome中相差甚远。最终还是通过像素数来指定字体大小。
3.GMU的Toolbar太“智能”。
Toolbar会自动对指定的DOM内容进行包装，以<h>标签作为标题，<h>之前的DOM包装进左侧菜单，<h>之后的DOM包装进右侧菜单。挺人性化吧，但问题在于它没有提供禁用功能。原本希望使用此方式，将按钮区域固定至屏幕最下方，现在只能作罢。
4.H5容器中渲染顺序错误。
使用iScroll处理单页，根据其只滚动页内第一个子元素的原理，将按钮区域作为页内第二个子元素，通过position:absolute;将按钮区域固定在屏幕最下方。
很奇怪的是，如果进入应用后直接显示该页，按钮区域位置正常。如果进入应用后通过切换显示该页，按钮区域会被页内第一个子元素的内容覆盖。其表现类似于被设置了z-index属性，safari完全重现，chrome偶尔重现。
更奇怪的是，如果将屏幕方向切换一下一切又正常了，怀疑是切换方向导致页面重新渲染。
尝试多种方式解决，均告失败。最终使用stackoverflow中提供的方案解决。

-webkit-transform: translate3d(0,0,1px);
transform: translate3d(0,0,1px);

1 2	-webkit-transform: translate3d(0,0,1px); transform: translate3d(0,0,1px);

万网虚拟主机免费版，二级域名重写至二级目录

最近万网做活动，虚拟主机免费两年，做个小站够了。正好阿里云服务器半年免费期快到了，就申请了一个将该站点部署其上。
通过实名认证才可申请，好在使用阿里云时已经通过认证，直接开通。域名需要备案，站点才可以正常访问。这也不是问题，该域名已经备案。
需要说一下的是，万网和阿里云的备案系统已经打通，在其中任意一方已经备过案，另外一方无需再次备案。

免费的东西总有不少限制，比如只能支持一个站点。于是准备通过Apache的mod_rewrite模块，将二级域名重写至二级目录。
本来以为挺简单的一件事，却折腾了挺久。一是对mod_rewrite语法不熟，使用生疏。二是苦于看不到日志，没办法调试。三是网络上的文章各种抄袭，真怀疑他们有没有自己检验过。
主要卡在循环重写上，不知为何即便加上了[L]参数，依然会多次重写，直至达到最大重写次数，抛出错误页。
最后通过对请求路径的过滤，才终于成功：

近期（2018-10）阿里云似乎对虚拟主机进行了调整，造成之前的配置失效，需要重新调整如下：

<IfModule mod_rewrite.c>

# 打开运行时的重写引擎。
RewriteEngine On
# 设置目录级重写的基准URL。
RewriteBase /

# 将根域名跳转至www二级域名。
RewriteCond %{HTTP_HOST} ^codemonkey\.cn$ [NC]
RewriteRule ^(.*)$ http://www.codemonkey.cn [L,R=301]

# 处理www二级域名
RewriteCond %{HTTP_HOST} ^www\.codemonkey\.cn$ [NC]
RewriteCond %{REQUEST_URI} !^/www/ [NC]
RewriteRule ^(.*)$ www/$1 [L,QSA]

# 处理blog二级域名
RewriteCond %{HTTP_HOST} ^blog\.codemonkey\.cn$ [NC]
RewriteCond %{REQUEST_URI} !^/blog/ [NC]
RewriteRule ^(.*)$ blog/$1 [L,QSA]

</IfModule>

# 打开运行时的重写引擎。

RewriteEngine On

# 设置目录级重写的基准URL。

RewriteBase /

# 将根域名跳转至www二级域名。

RewriteCond %{HTTP_HOST} ^codemonkey\.cn$ [NC]

RewriteRule ^(.*)$ http://www.codemonkey.cn [L,R=301]

# 处理www二级域名

RewriteCond %{HTTP_HOST} ^www\.codemonkey\.cn$ [NC]

RewriteCond %{REQUEST_URI} !^/www/ [NC]

RewriteRule ^(.*)$ www/$1 [L,QSA]

# 处理blog二级域名

RewriteCond %{HTTP_HOST} ^blog\.codemonkey\.cn$ [NC]

RewriteCond %{REQUEST_URI} !^/blog/ [NC]

RewriteRule ^(.*)$ blog/$1 [L,QSA]

</IfModule>

下方配置已经失效：

<IfModule mod_rewrite.c>

# 打开运行时的重写引擎。
RewriteEngine On
# 设置目录级重写的基准URL。
RewriteBase /

# 将codemonkey.cn跳转至www.codemonkey.cn。
RewriteCond %{HTTP_HOST} ^codemonkey\.cn$
RewriteCond %{QUERY_STRING} !^(.*)debug(.*)$
RewriteRule ^(.*)$ http://www.codemonkey.cn [R=301,L]

# 将主域名（codemonkey.cn）的二级域名（www、blog）重写为二级目录。
# 检查主域名和二级域名，避免恶意CNAME。
RewriteCond %{HTTP_HOST} ^((www)|(blog))\.codemonkey\.cn$
# 检查请求路径是否以二级域名开头，不处理该类型请求，认为其已经处理过。
RewriteCond %{REQUEST_URI} !^/((www)|(blog))/.*$
# 将域名追加入请求路径。
RewriteRule ^(.*)$ __%{HTTP_HOST}__$1 [C]
# 分离出上一步追加的域名，将其作为二级目录。
RewriteRule ^__([A-Za-z0-9\-]+)\.([A-Za-z0-9\-]+)\.([A-Za-z0-9\-]+)__(.*)$ $1/$4 [L]

</IfModule>

# 打开运行时的重写引擎。

RewriteEngine On

# 设置目录级重写的基准URL。

RewriteBase /

# 将codemonkey.cn跳转至www.codemonkey.cn。

RewriteCond %{HTTP_HOST} ^codemonkey\.cn$

RewriteCond %{QUERY_STRING} !^(.*)debug(.*)$

RewriteRule ^(.*)$ http://www.codemonkey.cn [R=301,L]

# 将主域名（codemonkey.cn）的二级域名（www、blog）重写为二级目录。

# 检查主域名和二级域名，避免恶意CNAME。

RewriteCond %{HTTP_HOST} ^((www)|(blog))\.codemonkey\.cn$

# 检查请求路径是否以二级域名开头，不处理该类型请求，认为其已经处理过。

RewriteCond %{REQUEST_URI} !^/((www)|(blog))/.*$

# 将域名追加入请求路径。

RewriteRule ^(.*)$ __%{HTTP_HOST}__$1 [C]

# 分离出上一步追加的域名，将其作为二级目录。

RewriteRule ^__([A-Za-z0-9\-]+)\.([A-Za-z0-9\-]+)\.([A-Za-z0-9\-]+)__(.*)$ $1/$4 [L]

</IfModule>

以下是mod_rewrite的语法：
mod_rewrite – Apache HTTP Server Version 2.4
mod_rewrite － Apache 2.2 中文版参考手册

另附上一个调试mod_rewrite的小技巧：

RewriteCond %{QUERY_STRING} vardump
RewriteRule (.*) http://www.baidu.com/?host=%{HTTP_HOST},rurl=%{REQUEST_URI} [R=301,L,QSA]

1 2	RewriteCond %{QUERY_STRING} vardump RewriteRule (.*) http://www.baidu.com/?host=%{HTTP_HOST},rurl=%{REQUEST_URI} [R=301,L,QSA]

CodeMonkey编程游戏

CodeMonkey is an engaging online game that teaches real computer programming to children as young as 9.

虽说是面向儿童开发，但对于零经验的成人，也是同样有趣。
传送门（同一个站点，任选其一）：
http://www.playcodemonkey.com/
http://www.codemonkey.co.il/
http://cmonkey-p.herokuapp.com/

截至目前（2015-01-09），游戏一共90关卡，可试玩30关卡。
使用脚本语言方式，涉及顺序结构、循环结构（试玩关卡未涉及分支结构），以及“面向过程”和“面向对象”的基本概念。

用户真正的需求

The First BUG