飞鸟42 - 博客园

2011年7月3日

摘要： JavaScript 中 typeof 和 instanceof 常用来判断一个变量是否为空，或者是什么类型的。但它们之间还是有区别的：typeoftypeof 是一个一元运算，放在一个运算数之前，运算数可以是任意类型。它返回值是一个字符串，该字符串说明运算数的类型。typeof一般只能返回如下几个结果：number,boolean,string,function,object,undefined。我们可以使用 typeof 来获取一个变量是否存在，如if(typeof a!="undefined"){alert("ok")}，而不要去使用 if(a) 阅读全文

posted @ 2011-07-03 08:22 飞鸟42 阅读(238) 评论(0) 推荐(0) 编辑

2011年6月9日

Javascript风格要素

摘要：原文：Douglas Crockford的The Elements of JavaScript Style Part One原文：Douglas Crockford的The Elements of JavaScript Style Part Two: Idioms翻译：秦歌程序设计是困难的，其核心是管理的复杂性。计算机程序是人类做出的最复杂的东西。质量是不可靠的且隐蔽的。好的体系架构是必需给程序足够的结构使其健壮而不会陷入混乱的泥淖，但我们表达一个程序细节的方式是同等重要的。一个程序的本质会被不良的编码所隐藏。只有当一个程序的表达清晰时，我们才能有希望正确的推理出它的效率、安全和正确性。Wil 阅读全文

posted @ 2011-06-09 11:46 飞鸟42 阅读(203) 评论(0) 推荐(0) 编辑

2011年6月3日

图片垂直居中的使用技巧

摘要：在曾经的淘宝UED 招聘中有这样一道题目：“使用纯CSS实现未知尺寸的图片(但高宽都小于200px)在200px的正方形容器中水平和垂直居中。”当然出题并不是随意，而是有其现实的原因，垂直居中是淘宝工作中最常遇到的一个问题，很有代表性。题目的难点在于两点：垂直居中；图片是个置换元素，有些特殊的特性。至于如何解决，下面是一个权衡的相对结构干净，CSS简单的解决方法：.box { /*非IE的主流浏览器识别的垂直居中的方法*/ display: table-cell; vertical-align:middle; /*设置水平居中*/ text-align:center; /* 针对IE的阅读全文

posted @ 2011-06-03 16:37 飞鸟42 阅读(182) 评论(0) 推荐(0) 编辑

2011年5月31日

摘要：给前端的同学们推荐一个css3渐变代码生成工具：Ultimate CSS Gradient Generator。操作界面简单，可视化完成很完的渐变需要，并即时预览效果，快速提升效率，并定位到目标效果。同时还提供了一些推荐的“样式”，实在是居家旅行，必备良药。飘飘推荐：http://www.pufen.net/technology/2011/651/ 阅读全文

posted @ 2011-05-31 15:51 飞鸟42 阅读(549) 评论(0) 推荐(0) 编辑

jQuery 插件的模块化：seajs

摘要： jQuery 插件非常丰富。在传统使用方式里，比如 jquery-fancybox, 我们需要在页面中显式引入：1<script src="/js/jquery.min.js"></script>2<script src="/js/jquery.easing-1.3.pack.js"></script>3<script src="/js/jquery.mousewheel-3.0.4.pack.js"></script>4<script src=" 阅读全文

posted @ 2011-05-31 14:37 飞鸟42 阅读(2269) 评论(1) 推荐(1) 编辑

2011年5月24日

如何书写高性能的css（原题：优化浏览器渲染）

摘要： ISD Webteam的大布同学（twitter：@tc_bryanzhang）牺牲了自己大量的xx时间翻译了Page Speed系列中的Optimize browser rendering，因其blog还在重新打造当中，所以偶这里先转载了，以下是翻译全文：优化浏览器渲染资源被下载到客户端后，浏览器仍需加载，解释，并渲染HTML、CSS和Javascript代码。只需利用现有浏览器的特性简单地编排你的代码和页面，就可以提升客户端的性能。使用高效率的CSS选择器避免CSS expressions将样式表放在页面顶部指定图像尺寸字符标准使用高效率的CSS选择器概述避免低效率的匹配大量元素的键选择器阅读全文

posted @ 2011-05-24 16:06 飞鸟42 阅读(750) 评论(1) 推荐(2) 编辑

2011年5月23日

玉伯提出的“双飞翼布局”介绍

摘要：仔细分析各种布局的技术实现，可以发现下面三种技术被经常使用：浮动 float负边距 negative margin相对定位 relative position这是实现布局的三个最基本的原子技术。只要巧妙组合，并加以灵活运用，就能“拼”出各种布局的实现方案。尝试之路考虑以下DOM结构：<div id="page"> <div id="hd"></div> <div id="bd"> <div class="main"></div> <div 阅读全文

posted @ 2011-05-23 17:01 飞鸟42 阅读(520) 评论(0) 推荐(0) 编辑

豆瓣js检验工具Douban-JSLint介绍

摘要：今天要介绍的Douban-JSLint，就是为规范定制的工具。它是nodeJS版的，对比用Java+Rhino的使用方式，方便多了，也易于安装和升级。安装方法：第1步，当然要先有nodeJS环境(安装参考：https://github.com/joyent/node/wiki/Installation)第2步，推荐用npm（nodeJS包管理工具）安装： npm install http://github.com/kejun/Douban-JSLint/tarball/master或者，也可以先将源码clone下来（如果装了git），进入目录，再用 npm install . 完成安装。这样就阅读全文

posted @ 2011-05-23 08:59 飞鸟42 阅读(786) 评论(0) 推荐(0) 编辑

豆瓣CSS开发规范

摘要：源地址：https://docs.google.com/document/pub?id=17dKkWwdaKyNnkwswihHje2cfoMGqbSJLydTIxqFwlQU豆瓣CSS开发规范Douban CSS Code Guideline1. CSS浏览器支持标准WinXPWin7OS XIE9CCIE8AAIE7AAIE6AAChrome7CCCChrome6AAAChrome3BBBFirefox4CCCFirefox3.6AAAFirefox3.5CCFirefox3CCSafariBBBOperaCCC（注：根据2010年11月10日数据整理）A级－交互和视觉完全符全设计的要求B 阅读全文

posted @ 2011-05-23 08:52 飞鸟42 阅读(420) 评论(0) 推荐(0) 编辑

豆瓣Javascript代码风格规范

摘要：源地址：https://docs.google.com/document/pub?id=17ICSeE4Qd04-1U-pphmKCAmfgJGEVjqDellbu4oAiqU豆瓣Javascript代码风格规范Douban Javascript Core Style Guideline1. Javascript代码应符合Douban-JSLint检验标准1-1. 语句必须都有分号结尾，除了for, function, if, switch, try, while1-2. 只有长语句可以考虑断行，如：TEMPL_SONGLIST.replace('{TABLE}', da[&# 阅读全文

posted @ 2011-05-23 08:51 飞鸟42 阅读(270) 评论(0) 推荐(0) 编辑

2011年5月22日

资深web前端工程师阿当总结的web前端规范

摘要：【写在规则前面的话】项目的可维护性第一。你不是一个人在做事，项目的维护和二次开发可能是直接的或间接的团队合作。好的可维护性，从四个方面下手：1）代码的松耦合，高度模块化，将页面内的元素视为一个个模块，相互独立，尽量避免耦合过高的代码，从html,css,js三个层面都要考虑模块化。2）良好的注释。3）注意代码的弹性，在性能和弹性的选择上，一般情况下以弹性为优先考虑条件，在保证弹性的基础上，适当优化性能。4）严格按照规范编写代码。【命名规则】为避免命名冲突，命名规则如下：1）公共组件因为高度重用，命名从简，不要加前缀；2）各栏目的相应代码，需加前缀，前缀为WD姓名拼音的首字母，例如：杰夫前缀阅读全文

posted @ 2011-05-22 14:07 飞鸟42 阅读(502) 评论(0) 推荐(0) 编辑

2011年5月17日

HTML4.01与HTML5中四个标签(<b><i><strong><em>)的区分总结

摘要：在知乎上看到有人问到这个问题，于是我便拿出点时间来总结了一下，可能有不对的地方，还请各位朋友指教了：在HTML4.01中：<b><i>是视觉要素（presentationl elements），分别表示无意义的加粗，无意义的斜体，表现样式为 { font-weight: bolder }，仅仅表示「这里应该用粗体显示」或者「这里应该用斜体显示」，此两个标签在HTML4.01中并不被推荐使用；<em> 和 <strong> 是表达要素(phrase elements)。<em>（emphasized text）表示一般的强调文本，而&l 阅读全文

posted @ 2011-05-17 14:24 飞鸟42 阅读(379) 评论(0) 推荐(0) 编辑

2011年5月16日

高性能WEB开发系列之重绘与回流

摘要：页面呈现流程在讨论页面重绘、回流之前。需要对页面的呈现流程有些了解，页面是怎么把html结合css等显示到浏览器上的，下面的流程图显示了浏览器对页面的呈现的处理流程。可能不同的浏览器略微会有些不同。但基本上都是类似的。 1. 浏览器把获取到的html代码解析成1个Dom树，html中的每个tag都是Dom树中的1个节点，根节点就是我们常用的document对象(<html> tag)。dom树就是我们用firebug或者IE Developer Toolbar等工具看到的html结构，里面包含了所有的html tag，包括display:none隐藏，还有用JS动态添加的元素等。阅读全文

posted @ 2011-05-16 14:24 飞鸟42 阅读(267) 评论(0) 推荐(0) 编辑

2011年5月6日

SEO优化规范（新浪2010.06）

摘要： SEO优化规范（说明：综合考虑对SEO效果的影响大小及实施的难易程度，对以下规范按优先级排序）一、标题规范为所有页加上标题。标题简短精练、高度概括，标题长度一般不超过30个汉字；标题要含有关键字，关键字个数不超过3个；频道首页标题格式：<title>{$频道名}_新浪网</title>；例如：<title>财经频道_新浪网</title>栏目首页标题格式：</title>{$栏目名}首页_{$频道名}_新浪网</title>；例如：</title>股票首页_财经频道_新浪网</title>；新闻最终阅读全文

posted @ 2011-05-06 17:24 飞鸟42 阅读(224) 评论(0) 推荐(0) 编辑

2011年5月3日

HTML5终极备忘大全（图片版+文字版）

摘要： HTML5终极备忘大全（图片版+文字版）一、前言兼图片备忘下图是我从testking网站上的Ultimate HTML5 Cheatsheat这篇文章中备忘图片（已大小优化，因为图片较高，故滚动显示）。但是，上面毕竟是图片格式（原图上兆），而且还是英文的，所以自己觉得有必要将上面的内容文字化，同时做下简单的中文翻译。整理一番，于是就有下面的些内容。二、文字备忘之标签 HTML5中新增的标签<article>定义文章<aside>定义页面内容旁边的内容<audio>定义声音内容<canvas>定义图形<command>定义一个控制按钮& 阅读全文

posted @ 2011-05-03 11:13 飞鸟42 阅读(543) 评论(0) 推荐(0) 编辑

2011年4月26日

重新发现HTML表格

摘要：中文原文：重新发现HTML表格整理自：Woork 请尊重版权，转载请注明来源，多谢！根据我最近的一些实践以及在和一些读者进行关于HTML表格的使用问题沟通之后，决定写这篇文章。总的来说，我注意到由于误导性信息，他们对于table的使用有种先入为主的厌恶。事实上很多人会说”我看到永远不应该使用表格”的说法，但是这绝对是错误的！这个建议只是针对使用HTML表格来定义网页的布局，但是表格在方便的排列数据信息行和列方面非常完美，而且如果你一定要在一个页面上显示表列数据，你就不得不使用它们！为什么不呢？然而，在这种情况下，一些人无视了用于table的某些HTML标签的存在并且不知道该如何正确的使用它. 阅读全文

posted @ 2011-04-26 12:18 飞鸟42 阅读(152) 评论(0) 推荐(0) 编辑

征服高级CSS选择器

摘要：原文：征服高级CSS选择器译自：Taming Advanced CSS Selectors 版权所有，转载请注明出处，多谢！！CSS是对网页设计师可用的最强大的工具之一。使用它我们可以在几分钟内改变一个网站的界面，而不用改变页面的标签。但是尽管事实上，我们每个人也都意识到了它是有用的，CSS 选择器远未发挥它们的潜力，有的时候我们还趋向于使用过多的和无用的class、id、div、span等把我们的HTML搞的很凌乱。避免让这些“瘟疫”在你的标签中传播并保持其简洁和语义化的最佳方式，就是使用更复杂的CSS选择器，它们可以定位于指定的元素而不用使用额外的class或id，而且通过这种方式也可以阅读全文

posted @ 2011-04-26 10:52 飞鸟42 阅读(153) 评论(0) 推荐(0) 编辑

2011年4月21日

关于圆角矩形制作的几种方案

摘要：一、基于淘宝首页的圆角矩形设计（九宫格圆角矩形）<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content=" 阅读全文

posted @ 2011-04-21 16:55 飞鸟42 阅读(334) 评论(0) 推荐(0) 编辑

2011年4月18日

jQuery插件——图片按比例自适应缩放

摘要：我只是参照 @sofish 的关于图片按比例自适应缩放一文中的代码与原理写成了这个 jQuery插件，木有神马技术含量的说、插件代码如下： /** * 图片按比例自适应缩放 * @param maxWidth {Number} 预览区域的最大宽度 * @param maxHeight {Number} 预览区域的最大高度 */ $.fn.resizeImg = function(maxWidth, maxHeight) { var w = $.width, h = $.height; // 当图片比预览区域小时不做任何改变 if (w < maxWidth &&am 阅读全文

posted @ 2011-04-18 12:11 飞鸟42 阅读(644) 评论(0) 推荐(0) 编辑

2011年4月15日

这样去写你的 HTML

摘要：昨天在 twitter 上说，怎么忍心把页面写得这么难用？是的，这个世界还有一群人等着我们创建出来的东西，可以让他们的生活能过得更容易呢。比如那些需要读屏软件的用户。作为一个前端，我们又怎么会忍心呢。之前就一直想写这样的一篇文章，分享一下如何去创造一个可访问性更好的页面。今天的计划里有一条把 HTML Tag 和 WCAG标准结合起来。我推荐你这样去写你的 HTML，让某些人的生活可以更容易。今天想分享的是如何去使用我们的 HTML Tag, 把 WCAG 的标准和语义网的目标进行代码上的体现：1. 文档声明：<!Doctype>其实这跟 WCAG 根本上连不上什么直接关系，但阅读全文

posted @ 2011-04-15 17:28 飞鸟42 阅读(159) 评论(0) 推荐(0) 编辑