Hi,丸子|一个挺不正经的前端小混混

  • 丸子的博客,前端开发,爱吐槽,爱乱搞,一个挺不正经的前端小混混,技术宅
Uncategorized

html5离线存储入门

所有的浏览器都有自己的缓存机制，但那些机制并不可靠而且难以控制，在你做web开发的时候可能经常因为浏览器缓存带来的问题而烦恼不已。html5通过ApplicationCache接口解决了一些问题，并且使离线存储成为可能，离线存储使得你的web应用可以在用户离线的状况下进行访问。这个技术显然至少有三个好处： 最直接的好处就是用户可以离线访问你的web应用因为文件被缓存在本地使得web页面加载速度提升许多离线应用只加载被修改过的资源，因此大大降低了用户请求对服务器造成的负载压力 如何实现离线文件存储？你的服务器得先支持html5！是的，这句话看上去像是以前在css森林群里大家说的“我的服务器不支持div+css”一样的玩笑话。但我很严肃的告诉你，要实现离线存储的应用，你确实需要服务器的支持！容我细细道来，先来看看html5的离线文件存储应用对你的代码有什么要求，你需要在页面的html标签中通过manifest属性引用一个manifest文件来使得你的应用可缓存。简单地说，manifest文件是一个文本文件，它罗列了离线访问应用时所需缓存的文件清单(注意：引用该manifest文件的页面，不管你有没有罗列到清单中，都会被缓存)，但不只是这样。代码像下面这样： XHTML <html manifest="test.manifest">  ...</html> 当然，这个manifest的文件路径用绝对路径和相对路径都可以，甚至可以引用其他服务器上的manifest文件。该文件所对应的mime-type应该是text/cache-manifest的，所以你需要配置服务器来发送对应的MIME类型信息，服务器配置不在讨论范围内，请自行去了解吧。接下来要看的是manifest文件的结构，它的结构很简单，我们来看下面的例子： CACHE MANIFESTindex.htmlstyle.cssimages/logo.pngscripts/mootools.js 这是最简单的一个manifest文件的样子，正如前面所提到的，文件罗列了需要被缓存的文件清单，第一行中的CACHE MANIFEST 是必须的，每个站点有5MB的空间来存储这些数据，如果manifest文件或文件里所列的文件无法加载，整个缓存更新过程将无法进行，浏览器会使用最后一次成功的缓存。前面说过manifest文件不只是罗列要缓存的文件，那么它还有其他什么作用呢？让我们来看个稍微复杂点的例子： CACHE MANIFEST# wanz app v1# 指明缓存入口CACHE:index.htmlstyle.cssimages/logo.pngscripts/main.js# 以下资源必须在线访问NETWORK:login.php# 如果index.php无法访问则用404.html代替FALLBACK:/index.php /404.html 有经验的同学一定可以看出来#是用来注释一行的，但它还有一个小作用。web应用的缓存只有在manifest文件被修改的情况下才会被更新，所以如果你只是修改了被缓存的文件，那么用户本地的缓存还是不会被更新的，但是你可以通过修改manifest文件来告诉浏览器需要更新缓存了。利用这点，你可以像上面的例子中那样，写一句这样的注释一个文件版本： # wanz app v1 这样写有三个好处： 你可以很明确的了解离线web应用的版本通过简单的修改这个版本号就可以轻易的通知浏览器更新你可以配合JavaScript程序来完成缓存更新 正如你看到的，manifest文件有三个节点，它们各自的含义如下： CACHE:这个是manifest文件的默认入口，在此入口之后罗列的文件 ....

Uncategorized

为什么使用

不管是刚接触前端，还是你已经“精通”web前端开发的内容，你应该知道在你写html的时候需要定义文档类型；你知道如果没有它，浏览器在渲染页面的时候会使用怪异模式；你知道各个浏览器在怪异模式下对各个元素渲染是有差异的。所以你会写像这样的doctype： XHTML 1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 好在现在的各种web开发工具都足够强大，支持插入模板代码，因此你并不需要把这又长又臭的doctype一个个字母的敲出来。但是如果你受够了它，你也许可以尝试下面这个写法： XHTML 1<!DOCTYPE html> 哇哦，很简洁哦！好处显而易见：一、你可以轻松的写下这个doctype，而不用担心会写错；二、它是向后兼容的，是的，html5的doctype就是这样写的，并且现代浏览器都认识它。 如果你跟我一样一直以为：没有指定dtd将会开启浏览器的怪异模式，这种说法是错的！正确的说法应该是没有定义doctype才会开启怪异模式，也就是说你只需要定义<!doctype html>就可以让浏览器在严格模式（标准模式）下渲染页面，而不需要指定某个类型dtd。让我们来回顾一下，所有的浏览器都需要两种模式：怪异模式和严格模式（也有人叫标准模式）。IE 6 for Windows/mac, Mozilla, Safari和Opera 都实现了这两种模式，但是IE 6以下版本永远定在了怪异模式。关于两种模式，你需要知道以下几点： 在标准化之前写的页面是没有doctype的，因此没有doctype的页面是在怪异模式下渲染的。反过来说，如果web开发人员加入的doctype，说明他知道他所要做的事情，大部分的doctype会开启严格模式（标准模式），页面也会按照标准来渲染。任何新的或者未知的doctype都会开启严格模式（标准模式）。每个浏览器都有自己的方式来激活怪异模式。你可以看看这个清单：http://hsivonen.iki.fi/doctype/ 注意：你可以根本不需要根据你选择的doctype来验证你的页面，只要doctype标签存在就足以开启严格模式（标准模式）了。如果你对我说的这些还是感到怀疑，那么请前往http://www.quirksmode.org/css/quirksmode.html#link2了解你想知道的内容。我们只需要一小段avaScript代码就可以得到答案，它就是： 1mode=document.compatMode; 这个代码可以用来判断，当前浏览器是处于怪异模式还是标准模式，该属性的兼容性毋庸置疑，如果你表示怀疑，可以查看http://www.quirksmode.org/dom/w3c_html.html#t11。你可以在你想测试的浏览器里访问：http://wanz.im/demo/doctype-test.html，便可看到结果了，据我所知，这样并没有激活怪异模式，即使是ie6下，如果你有什么新发现，欢迎给我留言。

Uncategorized

canvas JavaScript API学习（五）

写在前面我们了解了canvas用来处理图像的两个简单的方式：拉伸和裁切。这次我们来挑战像素级的图像处理，这话看起来挺唬人的，不过不用担心，它并没有那么可怕。 像素处理API你可以通过ImageData对象在字节级的水平来处理图像数据，先看看与此相关的一些API属性及方法： imagedata = context . createImageData(sw, sh)根据给定的尺寸返回一个ImageData对象，该尺寸为CSS像素值（CSS Pixel），返回的对象中的像素点都是黑色透明的，即rgba(0,0,0,0)。imagedata = context . createImageData(imagedata)返回一个跟参数所指对象大小一致的ImageData对象，返回的对象中的像素点都是黑色透明的。imagedata = context . getImageData(sx, sy, sw, sh)返回包含canvas指定区域图像数据的ImageData对象imagedata . widthimagedata . height返回ImageData对象数据的实际尺寸，该值为设备像素值（Device Pixel）。imagedata . data返回一个一维数组，该数组包含按照RGBA顺序排列的范围从0到255的数据context . putImageData(imagedata, dx, ....

Uncategorized

canvas JavaScript API学习（四）

写在前面canvas在绘图方面的能力正在日益增强，它支持简单的动画效果，并且被很多人所看好，从前一段时间“html5代替flash”的炒作中可见一斑，甚至一些大公司也开始使用canvas代替了原本使用flash实现的功能，当然这不是为了赶潮流，而是canvas确实有一些优势，这个以后再探讨。本文要介绍的是canvas在绘图以外的一点内容，因为光有绘图能力是不够的，下面我们就进入canvas图像处理相关的API学习。 drawImage函数要将指定图像绘制到canvas上，你需要用到drawImage函数，该函数有三种函数原型： drawImage(image, dx, dy)drawImage(image, dx, dy, dw, dh)drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh) 第一个参数image可以用HTMLImageElement，HTMLCanvasElement或者HTMLVideoElement作为参数。dx和dy是image在canvas中定位的坐标值；dw和dh是image在canvas中即将绘制区域（相对dx和dy坐标的偏移量）的宽度和高度值；sx和sy是image所要绘制的起始位置，sw和sh是image所要绘制区域（相对image的sx和sy坐标的偏移量）的宽度和高度值。 drawImage参数图解 如果上面对参数的描述和参数示意图都无法让你清楚的知道它们的含义，那么看完下面的demo，或许会让你清晰很多。 XHTML <!DOCTYPE html><html><head><meta  charset="utf-8" /><title>Canvas javascript api demo</title><style type="text/css">canvas { border:1px ....

Uncategorized

canvas JavaScript API学习（三）

写在前面介绍过一些基本的图形绘制api和比较复杂的贝塞尔曲线的绘制方法，接下来要了解的是如何在canvas里写入文本。为什么要学习这个？canvas跟其他标签不一样！一般的，我们在标签里这样写: XHTML 1<div>这是一些文字</div> 上面的代码在页面上就可以直接看到我们写的文字，并且可以通过给这个标签添加样式来改变文字的显示效果，但canvas不行，在canvas标签里的文字只有在不支持canvas的浏览器中才会显现出来，一般用来提示该浏览器不支持canvas。这也是该标签独特的地方，决定这点的就是它的设计初衷：绘图。 canvas文字绘制api概述虽说canvas的主要目的是用来绘图，而且标签里的文字也无法显示出来，但不代表它不支持在canvas绘制的图形中插入文本，只是方法和平常的不一样，文本也被当做图形来处理，因此要插入文本，也需要通过对应的api来绘制。 下面是一些函数原型及相关属性： context . font [ = value ]返回当前字体设置，该值是可写的，可用来设置字体。语法与css中的”font”属性一样，无法被解析为css font值的字体将被忽略。context . textAlign [ = value ]返回当前文本对齐方式，该值是可写的，可用来改变文本水平对齐方式。可用的值有：start， end， left，right和center，其他值无效， 默认为start。context . textBaseline [ = value ]返回当前底线的对齐方式，该值是可写的，可用来改变底线的对齐方式。可用的值有：top，hanging，middle，alphabetic，ideographic，bottom，其他值无效，默认为alphabetic。context . ....

Uncategorized

canvas JavaScript API学习（二）

中，我简单介绍了使用JavaScript在canvas中绘图的过程。接下来的内容是我对canvas绘图进一步学习心得，这次会介绍更多API方法的使用，来提高我们绘图的能力，创建更多丰富的图形，如果你有一点点图形学基础，那将对你的学习有很大帮助。 写在前面看过前面的那篇文章，你就大概了解使用JavaScript的canvas api来绘图是怎么一回事。你需要得到一个渲染环境（rendering context），然后在指定位置通过api画出你要的图形。这里涉及到canvas的“网格”或叫“坐标系”。 Canvas_default_grid如图中所示的，canvas坐标系的原点就是canvas左上角坐标(0,0)的位置，所画图形的位置就是相对这个原点水平偏移x个像素,垂直偏移y个像素的位置。 canvas绘图：矩形canvas只支持一种图形的绘图方法，那就是矩形，其他的图形都是通过路径（path）构造出来的，因此，在以后的绘图过程中，你可能更多的要使用它来构建复杂的图形，这就是你需要一点图形学的基础的原因。 与矩形绘图相关的函数有： fillRect(x,y,width,height) : 填充的矩形strokeRect(x,y,width,height) : 矩形框clearRect(x,y,width,height) : 清除指定区域使之透明，该区域是矩形区域 上一篇文章中我们演示了fillRect的用法，也提到了clearRect，具体的内容请查看之前的文章或查看demo： strokeRect函数的用法与其他两个一样，直接上代码。 XHTML <!DOCTYPE html><html><head><meta  charset="utf-8" /><title>Canvas javascript api demo</title><style type="text/css">canvas { border:1px #000 solid;}</style></head><body><h1>this is a ....

Uncategorized

canvas JavaScript API学习（一）

<canvas>是html5规范中的标签，通过JavaScript脚本可以在canvas中绘画出图形或实现动画效果。更多canvas的资料请查看：The canvas element — HTML5 (including next generation additions still in development) 写在前面对于canvas的历史我就不多赘述，Google比我知道的多！我们直接从实例开始我们的旅程。本文虽然是讲canvas，但更多的是JavaScript内容，因此要继续下去，你需要一点JavaScript基础。现在<canvas>并没有被所有浏览器支持，你需要一些支持html5的浏览器来测试文中的例子（如：Firefox1.5+，较新版本的Safari或Chrome以及opera9+等）。本人使用的浏览器是Firefox3.6.3并在此环境下做所有测试。如果你想让ie也支持可以使用explorercanvas，用vml来描述canvas的内容，使用起来很简单，只要加入下面代码即可。 XHTML <!--[if IE]><script src="excanvas.js"></script><![endif]--> Hello,canvas！首先，我们来看一段最简单的代码 XHTML <!DOCTYPE html><html><head><meta  charset="utf-8" /><title>Canvas demo</title><style type="text/css">canvas { border:1px #000 solid; /*width:300px; height:300px;*/}</style></head><body><h1>this ....

Uncategorized

对JavaScript中冒号(:)的新认识

JavaScript中冒号(:)是做什么的？你可能经常看到这的写法： XHTML <div onclick="javascript:alert('test')">test</div> 你可能很习惯认为这是一个伪协议，意思是使用JavaScript语法解析后面的代码，在a标签的href中才是伪协议！那么如果这个代码变成这样呢： XHTML <div onclick="xxoo:alert('test')">test</div> 你可以试试，代码并不会出错，因为在JavaScript中这样的写法是合法的。其语法是： labelName:statement 实际上，在onclick或onmouseover这样的属性的值是一段JavaScript代码片段，因此刚才的代码也是合法的，可执行的。 在JavaScript中，我们常见的使用冒号(:)的情况有： 1，对象表达法冒号在这里用来分割对象的属性和属性值。 JavaScript var o = {    value: 'some value',    words: 'say some words'}; 2，三目运算冒号在这里用来分割不同条件的返回值。 JavaScript 1var result = (condition exp) ....

Uncategorized

IE7下页面右侧多余宽度bug解决方案

最近在写一个页面的时候出现了一个bug：该页面在所有测试浏览器下都是正常的，除了ie7。在ie7中页面右侧莫名的出现多余的宽度，而且很长。纠结了一天未解，多亏zhenn同学帮我定位到问题代码。在此表示感谢！问题代码的结构是： XHTML 1<a href="#" class="content_tip"><em>How Can I Be Listed Here?</em></a> a的样式如下： CSS 1234567.content_tip{ position:absolute; right:24px; top:6px; color:#FFF; font-weight:bold;} 这是再正常不过的代码了，可是却引起了上述的问题，于是有了以下的测试： 描述========== 一个除了reset没有加任何样式的em加在一个a里，a是被绝对定位的，竟然导致页面在ie7下右边多出很长的宽 猜测========== 与em本身默认的样式有关 测试 ========== 根据猜测对几个类似标签进行测试：em、strong、dfn、code、samp、kbd、var、pre、cite 测试结果 ========== 受影响标签：em、dfn、var、cite 进一步猜测 ....

Uncategorized

让你的Ajax应用被Google抓取

今天一大早看到消息说Google可以抓取Ajax应用的内容了，并且Google也给出了使你的Ajax站可被抓取要做的一些事情。如果你看得懂英文就跳过下面的翻译，直接访问：http://code.google.com/intl/zh-CN/web/ajaxcrawling/docs/getting-started.html Google爬虫怎么爬我就不管了，要让你的Ajax站可被Google爬虫抓取，你需要做以下几个事情： 1，告诉爬虫你的站点支持Ajax内容的抓取 如果你的URL里有带“#”（所谓的锚点或URL hash），那么这个hash段必须以感叹号（“！”）开头。例如你的URL是这样的： www.example.com/ajax.html#mystate那么现在你要将它改成：www.example.com/ajax.html#!mystate这样，只要你的站点支持HTML快照，那么这样的URL就是可Ajax抓取的。 2，设置您的服务器来处理包含的_escaped_fragment_的URL请求 假设您想让www.example.com/index.html#!mystate被收录。那么你要给爬虫提供一份这个URL地址的HTML快照，使爬虫能够看到内容。服务器怎么知道什么时候返回HTML快照而不是常规的页面呢？答案是：爬虫在请求URL的时候，会将URL：www.example.com/ajax.html#!mystate临时改成www.example.com/ajax.html?_escaped_fragment_=mystate 你也许想知道为什么要这么做。有两个重要原因： hash段不会作为http请求的一部分被发送到服务器。换句话说，爬虫要通过某种方式告诉你的服务器请求的是www.example.com/ajax.html#!mystate的内容而不是www.example.com/ajax.html另一方面，你的服务器要知道该返回的是HTML快照，而不是普通的页面。记住：所谓的HTML快照就是在JavaScript执行后所有显示在页面上的内容。最终服务器要返回给爬虫的是www.example.com/ajax.html#!mystate的内容 注意：在转换过程中，爬虫会将hash段中的某些字符编码。要检索原来的（hash）片段，你需要对所有的%XX 字符进行解码。（如，%26变成&，%20变成空格，%23变成#，%25变成%等等） 现在你有了原始地址并且知道爬虫需要请求什么内容了，你需要生成一份HTML快照。要怎么做呢？下面是几种方法： 如果很大一部分内容都是通过JavaScript生成的，你可以使用无head浏览器如 HtmlUnit来得到HTML快照，或者你可以用其他的如crawljax和watij.com如果很多内容是通过服务器端技术（php或asp.net）生成的，你可以用现成的代码代替JavaScript生成静态页面现在的做法是创建一些离线的静态页面。例如，很多应用都是从数据库读取内容到浏览器渲染。其实你可以为每个Ajax URL创建单独的页面 最好是把各种HTML快照机制都尝试一遍。确保无head浏览器能正确的你的应用的内容是很重要的。当然你肯定想知道爬虫看到了什么，是么？你可以写一个小的测试程序来看输出的内容，或者你可以用工具来看，如： Fetch as Googlebot 注意：在测试的时候要使用_escaped_fragment_语法，因为这是Googlebot真正向服务器请求的地址。也就是说，使用www.example.com/ajax.html?_escaped_fragment_=mystate而不是www.example.com/ajax.html#!mystate 总结一下，你需要让服务器做下面的事情： 将www.example.com/ajax.html?_escaped_fragment_=mystate的请求映射为www.example.com/ajax.html#!mystate（hash）令牌是解码的。最简单的方法是使用标准的URL解码。在java程序中你可以这样写：mydecodedfragment = URLDecoder.decode(myencodedfragment, “UTF-8”);返回一个HTML快照，最好在页面上有页面的链接，_escaped_fragment_ URL对终端用户为不可用（记住：_escaped_fragment_ URL只对爬虫有用）。所有的请求都不要包含_escaped_fragment_，不然服务器会返回前面说的那些内容。 3，没有hash段的页面处理 有的页面是没有hash段的。比如你的首页是www.example.com而不是www.example.com#!home。对于这样的页面，我们有另一个处理方式。那就是在你页面HTML的head里加入<meta name=”fragment” ....