nginx 中 location 的匹配规则

蓝飞 蓝飞 | 时间:2014-12-24, Wed | 3,776 views
后台技术 

location 匹配规则

=     # 普通字符精确匹配
^~    # 普通字符路径前缀匹配
~     # 区分大小写的正则匹配
~*    # 不区分大小写的正则匹配

location 匹配优先级

官方文档:

  1. Directives with the = prefix that match the query exactly. If found, searching stops.
  2. All remaining directives with conventional strings, longest match first. If this match used the ^~ prefix, searching stops.
  3. Regular expressions, in order of definition in the configuration file.
  4. If #3 yielded a match, that result is used. Else the match from #2 is used.

中文翻译:

  1. 精确查找 = 前缀的匹配。如果找到,停止搜索
  2. 其它的普通字符串匹配,按照表达式长度优先查找。如果这个匹配使用 ^〜 前缀,搜索停止。
  3. 正则表达式匹配的优先级,则根据在配置文件中定义的顺序来确定。
  4. 如果第 3 条规则产生匹配的话,使用该匹配结果。否则,如同使用第 2 条规则的匹配结果。

[HTML5]如何在 Canvas 中绘制扇形

蓝飞 蓝飞 | 时间:2014-12-02, Tue | 16,263 views
前端开发 

HTML5 Canvas 中,我们可以通过 arc 方法来绘制圆形:

// context.arc(x, y, r, sAngle, eAngle, counterclockwise);
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
ctx.arc(100, 100, 50, 0, 2 * Math.PI);
ctx.fill();

但如何绘制一个扇形呢?是不是简单地修改结束角度 2 * Math.PI 就可以了呢?<!--more-->

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
ctx.arc(100, 100, 50, 0, 1.5 * Math.PI);
ctx.fill();

然而,我们会看到一个不符合我们预期的图形:

如何在 Canvas 中绘制扇形

因为在 arc 方法是用来创建一条弧线的,而如果直接将弧线的起点和终点闭合,再进行填充,自然绘制出的是上面的图形了。

知道了原因,要解决就很简单了,只要让这条弧线与圆心进行闭合,就刚好形成了一个扇形:

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
// 开始一条新路径
ctx.beginPath();
// 位移到圆心,方便绘制
ctx.translate(100, 100);
// 移动到圆心
ctx.moveTo(0, 0);
// 绘制圆弧
ctx.arc(0, 0, 50, 0, Math.PI * 1.5);
// 闭合路径
ctx.closePath();
ctx.fill();

如何在 Canvas 中绘制扇形

这里的重点在于 moveToclosePath,将路径的起点设置在圆心,而最后闭合路径,正好就成为了一个扇形。

代码也可以抽取为通用的方法,如下:

CanvasRenderingContext2D.prototype.sector = function(x, y, radius, sAngle, eAngle, counterclockwise) {
    this.beginPath();
    this.translate(x, y);
    this.moveTo(0, 0);
    this.arc(0, 0, radius, sAngle, eAngle, counterclockwise);
    this.closePath();
    return this;
};

(阅读全文…)

[转载]闲聊CSS之关于clearfix--清除浮动

蓝飞 蓝飞 | 时间:2014-06-03, Tue | 6,674 views
前端开发 

一,什么是.clearfix

你只要到Google或者Baidu随便一搜"css清除浮动",就会发现很多网站都讲到"盒子清除内部浮动时可以用到.clearfix"。

.clearfix:after {
    content: " ";
    display: block;
    clear: both;
    height: 0;
}
.clearfix {
    zoom: 1;
}

<div class="clearfix">
    <div class="floated"></div>
</div>

上面的代码就是.clearfix的定义和应用,简单的说下.clearfix的原理:

1、在IE6, 7下zoom: 1会触发hasLayout,从而使元素闭合内部的浮动。

2、在标准浏览器下,.clearfix:after这个伪类会在应用到.clearfix的元素后面插入一个clear: both的块级元素,从而达到清除浮动的作用。

<div>
    <div class="floated"></div>
</div>
<div style="clear: both"></div>

(阅读全文…)

互联网常见Open API文档资源

蓝飞 蓝飞 | 时间:2014-04-30, Wed | 22,887 views
前端开发 

所谓的开放API(OpenAPI)是服务型网站常见的一种应用,网站的服务商将自己的网站服务封装成一系列API(Application Programming Interface,应用编程接口)开放出去,供第三方开发者使用,这种行为就叫做开放网站的API,所开放的API就被称作OpenAPI(开放API)。

网站提供开放平台的API后,可以吸引一些第三方的开发人员在该平台上开发商业应用,平台提供商可以获得更多的流量与市场份额,第三方开发者不需要庞大的硬件与技术投资就可以轻松快捷的创业,从而达到双赢的目的,开放API是大平台发展、共享的途径,让开发者开发一个有价值应用,付出的成本更少,成功的机会更多。今天,OpenAPI作为互联网在线服务的发展基础,已经成为越来越多互联网企业发展服务的必然选择。下面我就列举一些常见网站服务的Open API文档资源索引。<!--more-->

SNS类网站API

Facebook - http://developers.facebook.com/

人人网开放平台 - http://dev.renren.com/

51.com开放平台 - http://developers.51.com/

MySpace开发者平台 - http://developer.myspace.cn/

Opensocial - http://wiki.opensocial.org/

Google Gadgets 小工具 API 开发人员指南 - http://www.google.com/intl/zh-TW/apis/gadgets/docs-home.html

Gadgets API 开发人员指南 - http://code.google.com/intl/zh-CN/apis/gadgets/docs/dev_guide.html

Gadgets API - http://code.google.com/intl/zh-CN/apis/gadgets/

电子商务类

Amazon API - http://aws.amazon.com/

eBay API - http://developer.ebay.com/

淘宝开放平台 - http://www.taobao.com/theme/tao_source/

微博API

Twitter API - http://apiwiki.twitter.com/Twitter-API-Documentation

Status.Net(Laconica) API - http://status.net/wiki/Twitter-compatible_API

新浪微博开发者平台 - http://open.t.sina.com.cn

注:需要授权的开发者才能访问,其API调用格式类似Twitter,但需要一个API Key用于认证管理。

搜狐博客开放平台 - http://ow.blog.sohu.com/

Follow5 API - http://www.follow5.com/f5/jsp/other/api/api.jsp

嘀咕API - http://code.google.com/p/digu-api/wiki/DiguApi

做啥API - http://code.google.com/p/zuosa-api/wiki/ZuosaApiDoc

人间网API - http://renjian.com/api.html

9911微博API - http://www.9911.com/api.php

Google Maps API

Google Maps API Developer Guide - http://code.google.com/intl/en/apis/maps/documentation/

Google Maps API Tutorial - http://econym.org.uk/gmap/extensions.htm

GMaps Utility Library - http://code.google.com/p/gmaps-utility-library-dev/wiki/Libraries

GMaps Utility Examples - http://gmaps-utility-library.googlecode.com/svn/trunk/labeledmarker/release/examples/

Saving User-Added Form Data - http://code.google.com/intl/zh-CN/apis/maps/articles/phpsqlinfo.html

Firefox类

Mozilla 开发者中心的扩展开发专题 - https://developer.mozilla.org/en/Extensions

XUL 1.0 规范 - http://www-archive.mozilla.org/projects/xul/xul.html

更多地了解这种基于 XML 的用户界面语言,它可以构建各种富跨平台应用程序。

Mozilla Development Center 的 XUL 教程 - http://developer.mozilla.org/en/docs/XUL_Tutorial

Getting started with extension development 编写一个最简单的Firefox扩展 - http://kb.mozillazine.org/Getting_started_with_extension_development

Setting up extension development environment - http://developer.mozilla.org/en/docs/Setting_up_extension_development_environment

实战 Firefox 扩展开发 - http://www.ibm.com/developerworks/cn/web/wa-lo-firefox-ext/

使用 XUL 实现浏览器扩展 (1) - http://www.ibm.com/developerworks/cn/web/wa-xul1/

使用 XUL 实现浏览器扩展 (2) - http://www.ibm.com/developerworks/cn/web/wa-xul2/

应用类

豆瓣API - http://www.douban.com/service/apidoc/

Flickr API - http://www.flickr.com/services/api/

Last.fm API - http://www.last.fm/api

Box.net API - http://developers.box.net/

Delicious API - http://delicious.com/help/api

API统计 - http://www.programmableweb.com/apis

(阅读全文…)