Category Archives: Frontend

CSS制作框架 Sass

Sass 扩展了 CSS3，增加了规则、变量、混入、选择器、继承等等特性。Sass 生成良好格式化的 CSS 代码，易于组织和维护。 官网：http://sass-lang.com/

WebSocket

目标 WebSocket 规范的目标是在浏览器中实现和服务器端双向通信。双向通信可以拓展浏览器上的应用类型，例如实时的数据推送(股票行情)、游戏、聊天等. 背景 目前在浏览器中通过http仅能实现单向的通信,comet可以一定程度上模拟双向通信,但效率较低,并需要服务器有较好的支持; flash中的socket和xmlsocket可以实现真正的双向通信,通过 flex ajax bridge,可以在javascript中使用这两项功能. 可以预见,如果websocket一旦在浏览器中得到实现,将会替代上面两项技术,得到广泛的使用.面对这种状况，HTML5定义了WebSocket协议，能更好的节省服务器资源和带宽并达到实时通讯。 原理 WebSocket protocol 是HTML5一种新的协议(protocol)。它是实现了浏览器与服务器全双工通信(full-duplex)。 现在，很多网站为了实现即时通讯(real-time)，所用的技术都是轮询(polling)。轮询是在特定的的时间间隔(time interval)（如每1秒），由浏览器对服务器发出HTTP request，然后由服务器返回最新的数据给客服端的浏览器。这种传统的HTTP request d的模式带来很明显的缺点 – 浏览器需要不断的向服务器发出请求(request)，然而HTTP request 的header是非常长的，里面包含的数据可能只是一个很小的值，这样会占用很多的带宽。 而最比较新的技术去做轮询的效果是Comet – 用了AJAX。但这种技术虽然可达到全双工通信，但依然需要发出请求(reuqest)。 在 WebSocket API，浏览器和服务器只需要要做一个握手的动作，然后，浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送。在此WebSocket 协议中，为我们实现即时服务带来了两大好处： 1. Header 互相沟通的Header是很小的-大概只有 2 Bytes 2. Server Push 服务器可以主动传送数据给客户端　 握手协议 在实现websocket连线过程中，需要通过浏览器发出websocket连线请求，然后服务器发出回应，这个过程通常称为“握手” (handshaking)。 PS1:握手协议在后期的版本中，会标明版本编号，下面的例子属于早期的协定之一，对于新版的 chrome 和 Firefox 皆不适用。 PS2:后期的版本大多属于功能上的扩充，例如使用第7版的握手协议同样也适用于第8版的握手协议。 例子： 浏览器请求 GET /demo HTTP/1.1 Host: 你的网址.com Connection: Upgrade Sec-WebSocket-Key2: 12998 5 Y3 1 .P00 Sec-WebSocket-Protocol: sample Upgrade: WebSocket Sec-WebSocket-Key1: 4 @1 46546xW%0l 1 5 Origin: http://你的网址.com ^n:ds[4U 服务器回应 HTTP/1.1 101 WebSocket Protocol Handshake Upgrade: WebSocket Connection: Upgrade Sec-WebSocket-Origin: http://你的网址.com […]

JS判断键盘大小写键状态 附 JS监听键盘事件

关键字：Caps Lock，js，javascript 转自：http://www.cnblogs.com/xiaoao808/archive/2008/07/31/1257624.html 以下是代码：

JS键盘监听 来源：http://liu2liu2.spaces.live.com/blog/cns!54B12917375EF5A0!270.entry JavaScript键盘事件侦听   在使用JavaScript做WEB键盘事件侦听捕获时，主要采用onkeypress、onkeydown、onkeyup三个事件进行出来。该三个事件的执行顺序如下：onkeydown -> onkeypress ->onkeyup。在一般情况下，采用三种键盘事件均可对键盘输入进行有效的响应。当在实际使用中，会发现这几者有些不同的差别。 onkeypress事件不能对系统功能键(例如：后退、删除等，其中对中文输入法不能有效响应)进行正常的响应，onkeydown和onkeyup均可以对系统功能键进行有效的拦截，但事件截获的位置不同，可以根据具体的情况选择不同的键盘事件。 由于onkeypress不能对系统功能键进行捕获，导致window.event对象的keyCode属性和onkeydown，onkeyup键盘事件中获取的keyCode属性不同，主要表现在onkeypress事件的keyCode对字母的大小写敏感，而onkeydown、onkeyup事件不敏感；onkeypress事件的keyCode无法区分主键盘上的数字键和付键盘数字键的，而onkeydown、onkeyup的keyCode对主付键盘的数字键敏感。 注：在Maxthon浏览器中，onkeydown和onkeyup有连续响应两次键盘事件的BUG，onkeydown不能正常地对F1~F12的功能键进行正常的截获(onkeyup没有发现该问题)，具体原因不明。不知道以后是否会进行订正。 转自:http://hi.baidu.com/kinsun/item/8bad1fd98e8c2c3f48e1ddce

jQuery验证控件jquery.validate.js使用说明+中文API

官网地址：http://bassistance.de/jquery-plugins/jquery-plugin-validation jQuery plugin: Validation 使用说明   转载自：http://blog.sina.com.cn/s/blog_608475eb0100h3h1.html 一导入js库<script src="../js/jquery.js" type="text/javascript"></script><script src="../js/jquery.validate.js" type="text/javascript"></script> 二、默认校验规则(1)required:true                必输字段(2)remote:"check.php"      使用ajax方法调用check.php验证输入值(3)email:true                    必须输入正确格式的电子邮件(4)url:true                        必须输入正确格式的网址(5)date:true                      必须输入正确格式的日期 日期校验ie6出错，慎用(6)dateISO:true                必须输入正确格式的日期(ISO)，例如：2009-06-23，1998/01/22 只验证格式，不验证有效性(7)number:true                 必须输入合法的数字(负数，小数)(8)digits:true                    必须输入整数(9)creditcard:     […]

JavaScript parseInt() 函数

定义和用法 parseInt() 函数可解析一个字符串，并返回一个整数。 语法

参数 描述 string 必需。要被解析的字符串。 radix 可选。表示要解析的数字的基数。该值介于 2 ~ 36 之间。 如果省略该参数或其值为 0，则数字将以 10 为基础来解析。如果它以 “0x” 或 “0X” 开头，将以 16 为基数。 如果该参数小于 2 或者大于 36，则 parseInt() 将返回 NaN。 返回值 返回解析后的数字。 说明 当参数 radix 的值为 0，或没有设置该参数时，parseInt() 会根据 string 来判断数字的基数。 举例，如果 string 以 "0x" 开头，parseInt() 会把 string 的其余部分解析为十六进制的整数。如果 string 以 0 开头，那么 ECMAScript v3 允许 parseInt() 的一个实现把其后的字符解析为八进制或十六进制的数字。如果string 以 1 ~ 9 的数字开头，parseInt() 将把它解析为十进制的整数。 提示和注释 注释：只有字符串中的第一个数字会被返回。 注释：开头和结尾的空格是允许的。 提示：如果字符串的第一个字符不能被转换为数字，那么 parseFloat() 会返回 NaN。 实例 在本例中，我们将使用 parseInt() 来解析不同的字符串：

页面变灰的CSS代码

IE：filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); 谷歌：-webkit-filter: grayscale(100%);

给网页设计师和前端开发者看的前端性能优化

如果不是不可能，你也很难拒绝承认性能目前已是任何正规网站项目的最关键方面之一，无论它是一个小型的网站组合，一个移动优先的web应用，一直到一个大规模的商业项目。研究，论文和个人体验都告诉我们快速是最好的。 性能不仅仅是非常重要，它也相当的有趣，而且这也是我越来越投入的事，不仅在工作方面（我一直在烦我们的首席性能工程师），也在项目与CSS魔法网站方面（我一直在烦Andy Davies）。 在这篇长文章中，我将分享收获，关于快速，简单且非常有趣的性能知识的点点滴滴，以便使你的行为可以像一个初级的网页设计师和前端开发者；希望对任何想开始学习性能的人，这篇文章可以成为一个正规的介绍，并使它们的前端变得超快。这些技巧是你能非常容易实现的。它只需要一点小技巧，以及一些浏览器怎样工作的基础知识，你就能开始玩转系统了！ 这篇长帖子不会讲到模糊图像的加载和数据处理，取而代之的是有关理论与第一手的性能方面的技术资料，这些技术是我通过阅读，观察，搜集和整理获得的（我花费了许多时间沉浸于CSS魔法的瀑布图）。我也会链接到其它相似话题的文章，以便帮助强化一些关键要点。享受吧！ 注意 本文需要预先知晓一些基础的性能知识，如果有任何你不熟悉的就Google搜索一下好了！ 基础 顶部的Styles,底部的scripts 更少的请求 尽可能并行 HTTP 请求与 DNS查询 DNS 预取 资源预取 CSS与性能 压缩与简化 优化图像 精灵 视网膜图像 渐进的 JPGs 完全不用图片 进一步阅读 基础知识 关于性能，有一些知识在所有的设计师和前端开发者中广为传播。例如，尽可能少的请求，优化图片，把样式表(stylesheets)放在<head>, 把JS放在</body>之前, 最小化(minifying) JS 和 CSS 等等。这些基础知识已经被用来加快用户响应了，但还有更多更多需要学习。 虽然在我们每天的工作生活中，浏览器给我们制造麻烦，使我们头疼，但请记住，他们也是很聪明的; 它们为我们做了很多性能优化工作, 所以大量的性能调优知识不但要知道浏览器在哪里给我们做了优化，还要知道怎么更好的挖掘它们。大量性能调优诀窍只是理解，利用和操纵浏览器已经替我们做好的优化工作。 顶部的Styles, 底部的scripts 这真的是一条基本规则，每个人都能非常容易的在大多数时间遵守，但为什么它重要？简短的说： CSS 块渲染, 因此你需要立即处理它（即在文档的顶部，在你的<head>之中）。 JS 块下载, 因此你需要最后处理它们，以确保它们没有耽误页面中任何其它东西。 CSS块渲染是因为浏览器总是试图渐进式的渲染页面；它们想在元素到达的时候顺序的渲染它。如果style在距离很远的页面下部，浏览器在获得它之前没有办法渲染那个CSS。因为这个原因，如果浏览器在渲染文档过程中，改变了之前渲染的东西，它们可以避免style的重绘。浏览器在它获得所有需要的style信息之前不会渲染页面，如果你将style放在文档底部，你就是在使浏览器等待，阻塞了渲染。 所以，只要你将CSS放在页面的顶部，那么浏览器就可以立刻开始渲染。 JavaScript块下载是由于好几个原因（这又是浏览器聪明之处），但首先我们需要知道浏览器里的资源下载是如何实际发生的；简单的说，浏览器会从一个单一的域名并行的尽可能多的下载资源。它从越多的域名下载，就能在一瞬间并行的获得更多的资源。 JavaScript中断了这个过程，阻塞了从任何一个域名的并行的下载，因为： 被调用的脚本可能改变页面，即浏览器在继续别的事情以前，将不得不处理它。因此为了处理那个不测事件，浏览器停止了任何其它东西的下载，以便集中精力关注于它。 脚本正常工作经常需要依照一定的顺序加载，例如，要在加载一个插件之前加载jQuery。浏览器阻止了JavaScript的并行下载，因此它不会同时下载jQuery和你的插件；很显然如果你同时并行下载二者，你的插件会在jQuery之前到达。 所以，由于浏览器在获取JavaScript的时候停止了所有其他下载，将你的JavaScript脚本放在文档中尽可能晚加载的地方是一个好主意。我相信你们都看到过页面中的空白片段，在那里第三方的JS脚本被花时间加载，并且它还阻止了页面其他资源的获取和渲染；这就是JavaScript的阻塞在作用了。 但是显然，现代浏览器还是变得聪明了。我将给你一个Andy Davies寄给我的电子邮件的摘录，因为他解释的比我清楚： 现代浏览器将并行下载JS，只有在脚本被执行的时候阻塞渲染（显然脚本必须也被下载了）。 脚本下载常常被浏览器的预加载器所完成。 当浏览器页面渲染被阻塞，即等待CSS，或JS被执行，预分析器将扫描页面剩余部分，寻找它能下载的资源。 有些浏览器如 Chrome, 将分先后下载资源，例如，如果脚本与图片同时在等待下载，它将先下载脚本。 漂亮的内容！ 所以，要使页面被尽可能快的渲染，将styles放在顶部。为了阻止JS的阻塞影响到渲染，将scripts放在底部。 更少的请求 另一个明显而基本的性能优化方法是少下载。页面需要的每一个资源就是一次额外的HTTP请求；浏览器不得不停下来去获取每一个用于渲染页面所需的资源。每一次HTTP请求都可能引发DNS查询，重定向，404，等等。每一次HTTP请求，无论为了样式表，图片，web字体，JS文件还是其它你能想到的，都可能是一次非常昂贵的操作。尽量减少这些请求是你可以做的最快的优化方法中的一种. 再谈到浏览器和并行；大多数浏览器一次只从每个引用的域下载一些资源，而JS会阻塞这些下载。所以，你做的每一个HTTP请求都应该仔细考虑，而不是随便随便做的。 尽可能并行 为了让浏览器能并行的下载更多资源，你可以由不同的域名提供服务。如果说，浏览器只能一次从一个域名获取两个资源，那么由两个域名提供服务意味着它可以一次性获取四个资源；三个域名意味着六个并行下载。 许多网站有静态/资源 域名；你可以发现， Twitter, 用 si0.twimg.com 来做静态资源：

Facebook 用fbstatic-a.akamaihd.net：

通过这些静态的资源域名， Twitter与Facebook能提供更多的并行资源服务；来自twitter.com和si0.twimg.com的资源可以协作方式下载。这真的是使你的页面上获得更多并发下载的简单方法，如果再加上实际的CDN技术就会更好，CDN技术通过从一个更加合适的物理位置提供资源服务的方法来减少延迟。 这全部都很好，但后面我们将讨论在特定环境下，怎样从子域名提供服务却会实际上对性能有害。 因此，现在有了我们关于性能的基础知识： 将样式表放在文档的顶部 将JavaScript放在底部（可能的地方） 尽可能减少HTTP请求 从多个域名提供资源服务能增加浏览器并行下载的资源数量。 HTTP 请求与 […]

HTML 5 Web SQL Database初探

【51CTO译文】在《从零开始构建HTML 5页面》一文中，我们了解到HTML 5的一些新增特性并通过实例打造了一个完整的HTML 5页面。但HTML 5标准不只局限于传统的标记语言，它还拥有很多让人期待的API接口，利用这些接口，开发者可以创建更加丰富、更加引人注目的应用程序。之前我们介绍过支持文件拖放上传功能的HTML 5 File API，今天，我们一起来了解HTML 5的Web SQL Database API，使用本地和会话存储实现简单的对象持久化。 对于HTML 5，也许最为有用的就是它新推出的“Web Storage”（Web 存储）API。对简单的关键值对（比如应用程序设置）或简单对象（如应用程序状态）进行存储，使用本地和会话存储能够很好地完成，但是在对琐碎的关系数据进行处理之外，它就力所不及了。而这正是 HTML 5 的“Web SQL Database”API 接口的应用所在。 先提个醒，该文下面的内容需要读者对 JavaScript 和面对对象编程（尤其是匿名内的内部函数）以及SQL具有很好的理解。 打开链接 为了打开一个连接，我们执行以下代码：

以上代码创建了一个数据库对象 db，名称是 Todo，版本编号为0.1。db 还带有描述信息和大概的大小值。用户代理（user agent）可使用这个描述与用户进行交流，说明数据库是用来做什么的。利用代码中提供的大小值，用户代理可以为内容留出足够的存储。如果需要，这个大小是可以改变的，所以没有必要预先假设允许用户使用多少空间。 为了检测之前创建的连接是否成功，你可以检查那个数据库对象是否为null：

绝不可以假设该连接已经成功建立，即使过去对于某个用户它是成功的。为什么一个连接会失败，存在多个原因。也许用户代理出于安全原因拒绝你的访问，也许设备存储有限。面对活跃而快速进化的潜在用户代理，对用户的机器、软件及其能力作出假设是非常不明智的行为。比如，当用户使用手持设备时，他们可自由处置的数据可能只有几兆字节。 执行查询 执行一个查询，你可以使用database.transaction()函数。该函数具有单一参数，负责查询实际执行的函数。 该函数（通常是匿名的）具有一个类型事务的参数。

该事务具有一个函数：executeSql。这个函数使用四个参数：表示查询的字符串，插入到查询中问号所在处的字符串数据（很像 Java 的预先准备好的语句），一个成功时执行的函数和一个失败时执行的函数。

查询成功时 当查询成功执行时，应用程序跳转至一个具有一对参数的查询，一个是 transaction，另一个是它搜集的 results。对于实际上将你的数据传递至用户，这是非常完美的，比如显示 ToDo 列表。有关这个话题后面再讲。 查询失败失败时 当查询没能执行时执行。由于你将 transaction  对象作为函数的第一个参数进行传递，当出现错误时你可以继续执行查询。例如，如果是因为缺少表格（table）而查询无法运行，这是创建一个表格并在此执行该语句的绝佳时机。从该函数的第二个参数，你可以获得有关该错误的信息（包括描述）。 示例 假设我们想要使用上面的例子，想要查询数据库中的某个表格，如果该表格不存在，我们就创建一个表格。 在这个示例中，我们将调用具有一个函数参数的 db.transaction()。这个参数中，我们调用 tx.executeSql()。如果这个步骤成功，我们不做任何操作（因此是一个null参数）。或者我们将该事务和执行失败的函数一起传递，并再次调用 tx.executeSql()。这一次使用创建查询。

使用所有这些内部方法，可能有点麻烦，所以你也许想在外部创建一个调用 db.transaction() 的函数。比如，我们可以让错误函数是自包含的，并将其命名为“createToDoTable()”。 插入 为了让代码更加简洁和安全，Web SQL Database API 允许你为  transaction.executeSql() 函数提供字符串数据，用以表示调用的 SQL 语句中的变量。我们使用以下的代码进行演示：

在这个示例中，第一个参数中的两个问号将被后面数组中对应的项替代。第一个是为该任务设置的标签（也许是我们之前在代码中定义的一个变量），以及调用函数生成的时间戳。 执行该查询，其结果与下面语句类似：

对结果进行处理 成功执行的函数对结果对象包含集合或行。每一列表示一个结果。该结果包含分配给它的一组值，表示该特定结果的数据库中的每一列的值。通过调用 result.rows.item(i) 可以访问一个行，其中 i 是你想要查询的行的指针。想要从一行中选择一个值，你可以传递给该行一个数组格式的字符串指针，它表示你需要查询的列。例如，如果想要标签（label）列，我们可以调用  row['label']。 以下代码使用结果对象来输出一个查询的结果：

结论 […]

25 个免费的平面风格的 GUI 模板下载

深知各位开发者们折腾个界面绞尽脑汁、费九牛二虎之力也捯饬不出来一个像样的界面，特奉上 25 个免费界面模板以供参考，不用谢 Flat UI Kit (PSD) by VisualCreative Flat Web Elements (PSD) by Alexey Anatolievich Square UI (PSD) by DesignModo Vector Social Icons (EPS) Flat Vector Chrome Frame (PSD & AI) by Jeffrey Kam Minimal UI Kit (PSD) by ThemeDesigner Web App Flat UI (PSD) by Blaz Robar Flat Blog UI Kit (PSD) by PSDExplorer Flat Mini Browser (PSD) by Joe Barber Flat Browser Freebie (PSD) by Keyners Flat Apple Family Templates (PSD) by NumarisLP Flat Event Creation (PSD) by Seth Ely Flat Mini UI Player (PSD) […]

编写高效的CSS选择器

高效的CSS已经不是一个新话题，也不是一个我非得重拾的话题，但是，它却是自我在SKY工作以后，真正感兴趣并始终关注的一个话题。 很多人或者忘记了，或者仅仅是没有意识到，CSS可以是高效的也可能导致低能。然而，我们可以不考虑当你自认为会的太少而使用了低效的CSS这种情况。 这些规则只真正用在性能要求很高的网站上，这些网站对速度要求很高，任何一个页面可能含有成百上千个DOM元素。但是实践出真理，不管你是在打造下一个facebook 还是在开发一个本地的展示网页，多学点总是好的…. CSS 选择器 CSS 选择器对我们大多数人来说并不新鲜，较基础的选择器分别是类型（如 div），ID（如#header）和类（如.tweet）。 较不寻常的包括基础的伪类（如:hover）和更复杂的CSS3以及 '正则'（‘regex’）选择器，比如：first-childor[class^="grid-"]。 选择器具有固有效率，引用Steve Souders的话来说，较有效到较不有效的CSS选择器的顺序是这样的： ID,如#header Class, 如.promo Type, 如div Adjacent sibling, 如h2 + p Child, 如li > ul Descendant,如ul a Universal,即* Attribute, 如[type="text"] Pseudo-classes/-elements, 如a:hover 引用自Steve Souders的Even Faster网站 认识这很重要，虽然一个ID技术上更快而且表现更优，但几乎都不这样用。用Steve Souders的CSS测试器，我们可以发现一个 ID 选择器 和 一个类选择器 在再渲染速度方面差别很小。 在一台Windows机器上的Firefox6中，我获得了关于一个简单的类选择器的平均再渲染数据。ID选择器给出了12.5的平均值，所以实际上它要比一个类再渲染得慢一点。 ID与类之间的速度差异几乎是不相干的。 对一个类型（<a>）的选择测试，相比一个类或ID给出了慢得多的再渲染。 对一个层次非常多的子孙选择器的测试给出了 大约440的数值! 通过这我们可以发现IDs/classes与types/descendants的差别非常巨大…它们自身之间的差异很细微。 注意 这些数值在不同的机器和浏览器变化非常大。我极力建议你自己运行一下。 组合选择器 你可以单独使用一种标准选择器，如#nav，来选择所有以"nav"为ID的元素，你也可以使用组合选择器，如#nav a，来选择任何在ID为’nav’的元素里面的链接元素。 现在，我们从左到右读这个组合标签。我们先找到#nav ，然后再找到里面的元素。但是我们的浏览器不是这样解析的，它是从右到左来解析这些组合选择器的。 当我们看到#nav里面有个a，而浏览器看到的却是有个a在 #nav里面，这些细微的差异对浏览器的性能有重大影响，同事学习他们是很有价值的。 如果想知道浏览器这样解析的原因，请参考this discussion on Stack Overflow. 对浏览器来说，从最右边的元素（它最想渲染的元素）开始，然后回溯到DOM树比从DOM树的最高层开始选择向下寻找，甚至可能达不到最右边的选择器（关键的选择器）要高效。 这对CSS选择器的性能有重大影响…. 关键选择器 这里讨论的关键选择器, 是处在复杂选择器最右端的选择器，也是浏览器最先解析的选择器。 让我们回到讨论开始的地方，哪种选择器最高效？哪种选择器作为关键选择器会影响选择器的性能；当我们书写CSS代码的时候，正是这个关键选择器影响选择器的效率。 一个关键选择器是这样的：

天生高效选择器如类型选择器是不是就会有更高的性能？浏览器会寻找.Intro的所有实例（数量不会很多），然后向上查找DOM树，以确定该关键选择器是否在以“content’”为ID的元素里面。 然后，以下的选择器性能就不怎么好了：

这个选择器做的工作是这样子的，它先查找每个页面（是每个单个的页面），然后去看看它们是否有一个 #content 的父元素。这是一个非常不高效的选择器，因为它的关键选择器执行开销太大了。 运用这些知识我们就能在分类和选择元素时做更好的选择。 假设我们有一个非常庞大的页面，非常的大并且是一个还有一个庞大的网站。在这个页面上，有上百甚至上千个<a>标签。社交媒体的链接只占很少的一部分，并且包含在ID为#social的<ul>里面。假设这些链接是，Twitter, facebook, Dribble 和 Google+。我们在这个页面上有四个社交媒体链接，还有上百个其他的链接。 以下这个选择器代价很高而且性能不好：

浏览器将访问扫描页面上的上千个链接，然后才选择上#social节点下的四个链接。我们的关键选择器匹配了大量的我们并不感兴趣的标签。 为了消除这个问题，我们可以为每一个包含在社交媒体<ul>块下面的<a>标签指定更明确和显式的选择器.social-link。但是这跟我们所知道的恰恰相反；我们知道了，当我们使用精简的标签的时候，尽量不要使用多余的类。 这就是为什么我觉得性能是如此的有意思；在网页标准最佳实践和速度之间，需要一个平衡。 […]