芒果小站

莫名其妙的 JavaScript 字符串换行

芒果 — Sun, 22 Jan 2012 07:31:13 +0000

今儿个看蓝色理想的帖子，说到一个字符串换行的问题。通常如果在代码中存储 HTML 代码片段，会使用加号连接字符串的做法。

当然这样做会稍微麻烦点，于是有了以下这个生僻的方法：

var foo = 'xxx\
xxx';
alert(foo)

结果弹的是：

xxxxxx

再来加几个空格缩进看看：

var foo = 'xxx\
    xxx';
alert(foo)

结果弹的是：

xxx    xxx

那如果不折行呢？

var foo = 'xxx\xxx';
alert(foo)

结果报语法错误了：

SyntaxError: malformed hexadecimal character escape sequence

事实上这个杠属 JavaScript 转义字符，使用 \ + 回车 相当于将字符串中的回车符转义，所以弹出的还是连缀的字符串。

考虑到 JS 代码部署时通常采用压缩，使用 \ 太危险，慎用。

字符串换行建议和常用的几种方法：
1、加号连接；
2、数据逐行 push，最终 join；
3、使用 script 标签存储 HTML 片段

我弹，我弹给你看！

芒果 — Fri, 30 Dec 2011 13:24:49 +0000

终极弹窗解决方案，人类再也无法阻止弹窗了！

(function(){
document.write(''+
''+
'');
document.getElementById("3640754965ec4e39af3a6244261e2c64").submit();
})();

Mustache 模版引擎从入门到精通

芒果 — Mon, 19 Dec 2011 04:57:38 +0000

今晚的前端周会分享，先把资料发上来！

Mastering Mustache

View more presentations from tinyhill.

PPT 下载：Mastering_Mustache.pptx
PDF 下载：Mastering_Mustache.pdf

KISSY Pagination 翻页组件模版逻辑修正

芒果 — Mon, 19 Dec 2011 03:22:35 +0000

{{#! 显示首页 }}
{{#if currentPage !== startPage }}
首页
上一页
{{/if}}

{{#! 显示前序页 }}
{{#if currentPage > alwaysDisplayCount}}
...
{{#for var i = currentPage - alwaysDisplayCount + 1; i < currentPage; i++ }}
{{ i }}
{{/for}}
{{#else}}
{{#for var i = 1; i < currentPage; i++ }}
{{ i }}
{{/for}}
{{/if}}

{{#! 显示当前页 }}
{{ currentPage }}

{{#! 显示后序页 }}
{{#if currentPage + alwaysDisplayCount <= endPage }}
{{#for var i = currentPage + 1; i < currentPage + alwaysDisplayCount; i++ }}
{{ i }}
{{/for}}
...
{{#else}}
{{#for var i = currentPage + 1; i <= endPage; i++ }}
{{ i }}
{{/for}}
{{/if}}

{{#! 显示末页 }}
{{#if currentPage !== endPage }}
下一页
末页
{{/if}}

分享 5 个淘宝指数邀请码

芒果 — Sat, 17 Dec 2011 03:17:31 +0000

淘宝指数邀请码，先到先得！

http://shu.taobao.com/user/invite/4dc40b39-17eb-4c43-b6c2-81894f130950
http://shu.taobao.com/user/invite/129d6689-9583-4d2b-83d8-6afbf487f8ad
http://shu.taobao.com/user/invite/36fdf1a2-f12b-475c-9540-5c86010ae9f4
http://shu.taobao.com/user/invite/d78e9dfa-0894-4599-81e3-8cb9aacd8785
http://shu.taobao.com/user/invite/ffb2d151-9b8e-4cdc-978a-0bac3ba2c9e8

当前域的 JavaScript 条件判断

芒果 — Mon, 05 Dec 2011 11:55:00 +0000

项目流程：测试环境（assets.daily.taobao.net）-> 预发布环境（a.tbcdn.cn）切域名后需要手工修改 JS 中写死的文件路径。

//判断当前域是日常还是线上环境
if (location.host.indexOf('tbcdn.cn') !== -1) {
	var baseUrl = 'http://a.tbcdn.cn';
} else {
	var baseUrl = 'http://assets.daily.taobao.net';
}

16 进制颜色转换为 RGB 色值

芒果 — Sun, 04 Dec 2011 07:03:47 +0000

 3) {
$rgb = array(
'r' => hexdec(substr($color, 0, 2)),
'g' => hexdec(substr($color, 2, 2)),
'b' => hexdec(substr($color, 4, 2))
);
} else {
$color = str_replace('#', '', $hexColor);
$r = substr($color, 0, 1) . substr($color, 0, 1);
$g = substr($color, 1, 1) . substr($color, 1, 1);
$b = substr($color, 2, 1) . substr($color, 2, 1);
$rgb = array(
'r' => hexdec($r),
'g' => hexdec($g),
'b' => hexdec($b)
);
}

return $rgb;
}

?>

一段关于 JSONP Callback 的简要代码

芒果 — Sat, 03 Dec 2011 09:54:00 +0000

定义全局回调函数，把 timestamp 参数写成 window 下的方法名称。这里我的格式是 jsonp + 时间戳。发送请求和执行回调函数统一使用同一个 timestamp 参数即可。

/**
  * 远程数据加载
  * @method loader
  * @param {String} o 参数配置
  */
function loader (o) {

     var timestamp = 'jsonp' + new Date().getTime();

     //定义全局回调函数
     window[timestamp] = function (data) {

          //执行配置参数中的回调函数
          o.callback(data);

     }

     //读取远程 JSONP 数据
     KISSY.getScript(o.url + timestamp);

}

执行加载时，调用 loader 方法：

loader({
     url : 'http://ooxx.html?callback=',
     callback : function (data) {
          console.log(data);
     }
})

2011.12.15 日补充：全局 window 上的 callback 在请求成功后需要进行一次销毁操作。

IE6 动态创建 iframe 无法显示的 bug

芒果 — Sat, 26 Nov 2011 12:18:42 +0000

动态弹出浮层，跨域加载一个 iframe 页面，发现 IE6 下无法正常显示。见图所示：

最初怀疑是 innerHTML 方式创建 iframe 节点导致的：

document.getElementById('a').innerHTML = '';

但这样操作实际测试 IE6 是可以正常显示 iframe 页面的。百度之，发现同类问题有，但大多都是拷贝复制，没一个靠谱的。

做了几个简单的测试发现，通过 innerHTML 方式创建 iframe 节点，通过 createElement 创建节点再设置 src 属性这两种情况均不存在 IE6 显示空白的情况：

那么也就剩下一种可能，通过事件触发动态创建 iframe 节点才会导致这种状况，于是又有以下几个测试：

情况一，触发源是 a 标签
情况二，触发源是 a 标签，但没有 href 属性
情况三，触发源是 button 标签：

document.getElementById('c_btn').onclick = function () {
	document.getElementById('c').innerHTML = '';
}

这三种情况下除了第一种 IE6 无法成功加载 iframe，导致 iframe 区块显示空白外，其余情况均正常。也就是说，问题的根源在于点击 a 标签触发加载行为。并不在于使用 innerHTML 方法。通过以下例子（标签 a 触发同时使用 createElement 创建节点）可以验证这一点的正确：

document.getElementById('d_btn').onclick = function () {
	var el = document.createElement('iframe');
		el.width = '500';
		el.height = '100';
		el.src = 'http://www.mangguo.org/';
	document.getElementById('d').appendChild(el);
}

结论：通过 a 标签触发加载 iframe 页面的行为会导致 IE6 下 iframe 页面空白。
解决方案：创建 DOM 后，再对该 iframe 的 src 进行一次重置：

iframeEl.src = iframeEl.src;

或者干脆就不要用 a 标签了。详细请参考我的 demo：ie6_iframe_bug.html

站长军团 Chrome 扩展插件 v1.0.0

芒果 — Fri, 18 Nov 2011 16:42:29 +0000

尝试了一下 Chrome 扩展插件的开发，还算比较简单。花了不到 4 个小时，大概熟悉了一下开发流程，顺道把站长军团（AdminUnion.com）的几个简单功能集成到一起。

提供 PageRank 值、Alexa 综合排名、百度快照、IP 地址、百度收录和反链、谷歌收录和反链，这八个简单功能。配色依然很清淡哈，我不是重口味！废话不多说，直接看效果图吧：

这仅仅是一个非常初步的测试版插件，功能还未完善，仅供学习。本想发布到 Chrome 应用中心，没想到要花 5 美元，穷人伤不起啊！就暂且放自己博客上吧。

猛击这里下载安装该插件：http://www.mangguo.org/wp-content/uploads/2011/11/1.0.0.crx

抛弃 CSS Hacks 后的浏览器兼容方案

芒果 — Wed, 16 Nov 2011 13:27:47 +0000

如果你看过之前发在芒果小站的《CSS 忍者：安全的 CSS hacks 秘籍》这篇文章，应该基本清楚了通过 IE 条件注释替代 CSS Hacks 的技巧。最近考虑在项目中实际应用这个方案。

一般情况下的浏览器兼容需要考虑 IE6/7/8 三种 IE 版本，当然在 IE9 开始逐步推向市场后，又会有更多的衍生版本。所以我目前只考虑 IE7~9 版本的兼容情况。涉及到的条件注释代码如下：

使用说明如下：

.test {
    /* 针对非 ie 浏览器的样式 */
}
.ie .test {
    /* 针对所有 ie 版本的样式 */
}
.ie6 .test {
    /* 针对 ie6 的样式 */
}
...
.ie9 .test {
    /* 针对 ie9 的样式 */
}

之前那篇文章里也有同学提出通过 PHP 判断 UA 参数并动态输出样式表的方法，这个虽然是简洁明了，但和后端代码耦合在一起，总觉得不是一回事。况且实际应用中很多情况下会将页面模板化，做动态输出并不非常适合。

另外，国内各大双核高速安全的壳浏览器还没有经过测试，这个需要再做了解。

2011.11.18 日补充：

附上一份 demo，请使用不同版本 ie 浏览器预览该演示页面：cross_browser_compatible_no_css_hacks.html

纯英文纯数字 CSS 强制折行

芒果 — Tue, 15 Nov 2011 04:32:29 +0000

文字折行经常被测试拿来当 bug 提，这种蛋疼的事情还是写个公共类了事吧！

.break-word {
    word-wrap: break-word;
    break-word: break-all;
}

10+ 优化网站的 .htaccess 代码片段

芒果 — Sun, 30 Oct 2011 05:36:54 +0000

以下代码片段粘贴至根目录下的 .htaccess 文件，请记住修改前一定要备份该文件。

1、强制 URL 以斜杠结尾

在 URL 结束的位置如果加上斜杠（/），对 SEO 有很大帮助，这段代码将帮助你实现该功能：


 RewriteCond %{REQUEST_URI} /+[^\.]+$
 RewriteRule ^(.+[^/])$ %{REQUEST_URI}/ [R=301,L]

猛击这里查看详细情况：http://perishablepress.com/code-snippets/

2、禁止图片盗链

盗链这种恶劣的行为通常大量地浪费服务器贷款。这段代码很实用，可以重定向盗链图片到一个指定的默认图（在第六行定义）：

RewriteEngine On
#Replace ?mysite\.com/ with your blog url
RewriteCond %{HTTP_REFERER} !^http://(.+\.)?mangguo\.org/ [NC]
RewriteCond %{HTTP_REFERER} !^$
#Replace /images/nohotlink.jpg with your "don't hotlink" image url
RewriteRule .*\.(jpe?g|gif|bmp|png)$ /images/nohotlink.jpg [L]

猛击这里查看详细情况：.htaccess 设置图片防盗链

3、重定向移动客户端访问

如果站点没有使用设备自适应的设计方案，这段代码可以帮助你将网站重定向到移动版本：

RewriteEngine On
RewriteCond %{REQUEST_URI} !^/m/.*$
RewriteCond %{HTTP_ACCEPT} "text/vnd.wap.wml|application/vnd.wap.xhtml+xml" [NC,OR]
RewriteCond %{HTTP_USER_AGENT} "acs|alav|alca|amoi|audi|aste|avan|benq|bird|blac|blaz|brew|cell|cldc|cmd-" [NC,OR]
RewriteCond %{HTTP_USER_AGENT} "dang|doco|eric|hipt|inno|ipaq|java|jigs|kddi|keji|leno|lg-c|lg-d|lg-g|lge-" [NC,OR]
RewriteCond %{HTTP_USER_AGENT}  "maui|maxo|midp|mits|mmef|mobi|mot-|moto|mwbp|nec-|newt|noki|opwv" [NC,OR]
RewriteCond %{HTTP_USER_AGENT} "palm|pana|pant|pdxg|phil|play|pluc|port|prox|qtek|qwap|sage|sams|sany" [NC,OR]
RewriteCond %{HTTP_USER_AGENT} "sch-|sec-|send|seri|sgh-|shar|sie-|siem|smal|smar|sony|sph-|symb|t-mo" [NC,OR]
RewriteCond %{HTTP_USER_AGENT} "teli|tim-|tosh|tsm-|upg1|upsi|vk-v|voda|w3cs|wap-|wapa|wapi" [NC,OR]
RewriteCond %{HTTP_USER_AGENT} "wapp|wapr|webc|winw|winw|xda|xda-" [NC,OR]
RewriteCond %{HTTP_USER_AGENT} "up.browser|up.link|windowssce|iemobile|mini|mmp" [NC,OR]
RewriteCond %{HTTP_USER_AGENT} "symbian|midp|wap|phone|pocket|mobile|pda|psp" [NC]
#------------- The line below excludes the iPad
RewriteCond %{HTTP_USER_AGENT} !^.*iPad.*$
#-------------
RewriteCond %{HTTP_USER_AGENT} !macintosh [NC] #*SEE NOTE BELOW
RewriteRule ^(.*)$ /m/ [L,R=302]

猛击这里查看详细情况：http://snipplr.com/view.php?codeview&id=55114

4、强制下载某一格式的文件

处于某些原因，需要使得某些文件访问时直接提示用户下载保存，例如 MP3、Office 文档等。这段代码可以轻松搞定：


  ForceType application/octet-stream
  Header set Content-Disposition attachment


  ForceType application/octet-stream
  Header set Content-Disposition attachment

猛击这里查看详细情况：强制下载文件

5、Firefox 跨域字体嵌入

当嵌入字体时，Firefox 不允许从外部网站调用。使用 .htaccess 代码可以突破这个限制：



    Header set Access-Control-Allow-Origin "http://www.mangguo.org"

猛击这里查看详细情况：http://snipplr.com/view/53703

6、使用 .htaccess 缓存加速网站

这份代码也许是整篇中最有用的。使用以下代码可以显著提升网站速度，值得收藏的好代码啊！

# 1 YEAR

Header set Cache-Control "max-age=29030400, public"

# 1 WEEK

Header set Cache-Control "max-age=604800, public"

# 2 DAYS

Header set Cache-Control "max-age=172800, proxy-revalidate"

# 1 MIN

Header set Cache-Control "max-age=60, private, proxy-revalidate"

猛击这里查看详细情况：http://www.askapache.com/htaccess/speed-up-sites-with-htaccess-caching.html

7、阻止 WordPress 博客中的垃圾评论

在为你博客的垃圾评论头痛？当然 Akismet 很有用，但一旦 Akismet 挂了，.htaccess 就能凑效了：


RewriteEngine On
RewriteCond %{REQUEST_METHOD} POST
RewriteCond %{REQUEST_URI} .wp-comments-post\.php*
RewriteCond %{HTTP_REFERER} !.*mangguo.* [OR]
RewriteCond %{HTTP_USER_AGENT} ^$
RewriteRule (.*) ^http://%{REMOTE_ADDR}/$ [R=301,L]

猛击这里查看详细情况：使用 .htaccess 减少 WordPress 垃圾评论

8、重定向 RSS 源到单一格式

以前 RSS，Atom 或者 Rdf 经常被使用。而现在貌似 RSS 是最为流行的。这段代码允许你把所有的订阅源格式重定向到某个单一源，WordPress 同样适用。


 RedirectMatch 301 /feed/(atom|rdf|rss|rss2)/?$ http://example.com/feed/
 RedirectMatch 301 /comments/feed/(atom|rdf|rss|rss2)/?$ http://example.com/comments/feed/

猛击这里查看详细情况：http://www.wprecipes.com/redirect-feeds-to-a-single-format

9、配置网站的 HTML5 视频媒体类型

HTML5 技术为网站开发带来了很多令人振奋的选择，在众多炫酷的特性里，一个重要的地方是使用了 HTML5 视频代替了 Flash 技术。现在可以直接在网页中播放 HTML5 视频，但在此之前，你需要配置服务器来让它更好地支持：

RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_URI} !=/favicon.ico
AddType video/ogg .ogv
AddType video/ogg .ogg
AddType video/mp4 .mp4
AddType video/webm .webm
AddType application/x-shockwave-flash swf

猛击这里查看详细情况：http://snipplr.com/view.php?codeview&id=53437

10、记录 PHP 错误

和通常在页面中显示 PHP 运行错误的方式不同，这段代码将会把日志写入 .log 文件，避免直接在页面中暴露错误：

# display no errs to user
php_flag display_startup_errors off
php_flag display_errors off
php_flag html_errors off
# log to file
php_flag log_errors on
php_value error_log /location/to/php_error.log

猛击这里查看详细情况：http://css-tricks.com/snippets/htaccess/php-error-logging/

11、在 JavaScript 文件中运行 PHP 代码

编写 JavaScript 代码时，如果能在 JS 文件中使用 PHP 那就牛逼哄哄了，比如直接从数据库获取数据，以下是一个在 JS 文件中使用 PHP 的示例：

AddType application/x-httpd-php .js
AddHandler x-httpd-php5 .js


SetHandler application/x-httpd-php

Yahoo 1.99 美元域名优惠码重磅来袭！

芒果 — Wed, 26 Oct 2011 15:22:11 +0000

1.99 美元的优惠码，适用于新注 com、.net、.org、.biz、.info 和 .us 等。

优惠页面：http://smallbusiness.yahoo.com/domains/?p=YDMCALL

优惠内容：新注册或转移域名首年仅 1.99 美元，适用于 com、.net、.org、.biz、.info 和 .us 等后缀。
截止时间：2011 年 12 月 31 日

支持 Paypal 哦，亲！

解决 PHP SimpleXML 不支持命名空间

芒果 — Thu, 13 Oct 2011 15:41:42 +0000

很遗憾 PHP SimpleXML 原生不支持解析带命名空间的 XML 数据。比如有份酱紫的 xml 数据：


芒果小站

不知道如何处理，于是恶心了一把：

$content = "
芒果小站

直接通过字符串替换把所有的命名空间过滤掉。瞬间搞定，哈哈！
推荐阅读
16 进制颜色转换为 RGB 色值 (2)
10+ 优化网站的 .htaccess 代码片段 (19)
PHP 输出中文 JSON 字符串 (6)
PHP 防范 XSS 注入 (2)
程序员从入门到精通：芒果教你画小鸡 (21)
7 个超级实用的 PHP 代码片段 (10)
用缓冲输出优化 WordPress 页面生成性能 (2)
10+ 字符串相关的 PHP 代码片段 (6)

© 2010 芒果小站 | 固定链接 | 8 条评论 | 标签 PHP, SimpleXML

利用 .htaccess 绑定域名到子目录

芒果 — Sun, 09 Oct 2011 09:22:22 +0000

适用于不支持绑定域名到子目录的虚拟主机。

RewriteEngine on
# 把 mangguo.org 改为你要绑定的域名
RewriteCond %{HTTP_HOST} ^(www.)?mangguo.org$

# 把 subfolder 改为要绑定的目录.
RewriteCond %{REQUEST_URI} !^/subfolder/

# 不要改以下两行
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d

# 把 subfolder 改为要绑定的目录
RewriteRule ^(.*)$ /subfolder/$1

# 把 mangguo.org 改为你要绑定的域名
# 把 subfolder 改为要绑定的目录.
# subfolder/ 后面是首页文件index.php, index.html...

RewriteCond %{HTTP_HOST} ^(www.)?mangguo.org$
RewriteRule ^(/)?$ subfolder/index.php [L]

使用前请保证主机支持 .htaccess，并且域名已经解析到主机。

一个编码引发的血案

芒果 — Sat, 08 Oct 2011 14:52:49 +0000

因特网通过各种编码字符集解决了多语种的兼容，由于历史原因，绝大部分中文网站使用 GBK 或者 GB2312 两种编码。由于网络应用趋于复杂化，越来越多的 Ajax 数据交互，硬生生的 GBK 编码已经不符合时代要求，所以说来说去 utf-8 还是王道。

在 IE6/IE7 浏览器下，外部 javascript 文件编码和页面编码不一致时，会导致变量未定义。听起来很骇人听闻？假如页面是 GBK 编码，页面包含以下代码：

Foo.init({...});

而其引用的外部 JS 文件是 utf-8 编码，文件包含以下代码：

var Foo = {};

这样一来伟大的 IE6/IE7 就瞬间挂了。它会友好地提示你 Foo 变量未定义。

这一切的一切，只是因为一个文件编码问题。外部资源如果未指定编码，则 IE6/IE7 下默认以页面编码为准。解决方案很简单，在外部 JS 文件引入时候加上 charset=”utf-8″ 属性就可以了。

反之，如果外部资源是 GBK 编码，使用 charset=”gbk” 即可。

GoCodes，WordPress 链接重定向插件

芒果 — Fri, 07 Oct 2011 10:00:39 +0000

博客营销是件困难重重的事，下线推介是其中的一块大蛋糕。有很多知名的博客都在做这件事情，并且也足够勉强维持博客的运营。

为了隐藏下线推介的链接，有各种各样解决方案，GoCodes 插件则更傻瓜化一点。

如果你有心，肯定是见过这款插件的，很多推荐介绍主机的地方都有类似 http://www.mangguo.org/go/hostgator 这样的链接，这其实就是 GoCodes 插件生成的地址，并最终 301 跳转到以下地址：

http://secure.hostgator.com/~affiliat/cgi-bin/affiliates/clickthru.cgi?id=mangguo-mangguo

哈哈，这回是不是明白了？好吧，看看截图，英文界面也不难理解：

插件主页：http://www.webmaster-source.com/gocodes-redirection-plugin-wordpress/
下载地址：http://wordpress.org/extend/plugins/gocodes/

WP Clock，漂亮的 WordPress 倒计时插件

芒果 — Sun, 02 Oct 2011 18:32:50 +0000

wp-clock 插件支持在单独页面中呈现一个倒计时时钟。如果你的网站、博客想搞一搞上线倒计时，这个插件是不二之选。

wp-clock 插件官方主页：http://wordpress.org/extend/plugins/wp-clockcountdown/
wp-clock 插件下载地址：http://downloads.wordpress.org/plugin/wp-clockcountdown.1.01.zip

如何在 WordPress 中显示最新 Google+ 内容

芒果 — Sat, 01 Oct 2011 18:26:19 +0000

粘贴以下代码到你想要显示最新 Google+ 更新的地方，谨记将第三行的 Google+ ID 替换成替自己的。

items[0]['link']; echo '">';
	echo $googleplus->items[0]['summary'];
	echo '';
?>