FOUC – 文档样式闪烁

如果你是一名前端工作者,总有一天会听到FOUC这个词,它是Flash Of Unstyled Content的缩写,翻译过来就是文档样式闪烁,下面解释一下什么是FOUC。

问题描述

它指的是在某些景象下,IE在加载网页时会呈现短暂的CSS样式失效。
1. 只产生在Windows上的IE(5.0版本以上)
2. 只产生在那些会呈现FOUC现象的网页
3. IE的临时文件夹中没有缓存过该页面的CSS文件

Read More

原创jQuery标签切换插件“gTabs”正式发布

我在工作中经常遇到各种情况的tab切换和广告图片轮播效果,比如点击按钮实现图片上下滚动,淡入淡出,延迟tab,无限tab等等。之前的博客里面也写过相关的代码。但是如果每页页面或当前页面有很多不同效果的轮播同时出现,那么引入相应的代码就会有很多重复和垃圾代码,所以我决定写一个新的插件,通杀所有效果。
于是gTabs插件今天就诞生了,目前版本为1.0,后续可能还会添加更多的效果。
演示地址:http://www.liuxiaofan.com/demo/gtabs.html
下载地址:http://liuxiaofan.com/download/gtabs.rar

Read More

Sublime Text 2 不完全使用手册

♦ 强大的多行选择和多行编辑:

  • 鼠标选中多行,按下 Ctrl+Shift+L (Command+Shift+L) 即可同时编辑这些行;
  • 鼠标选中文本,反复按 CTRL+D (Command+D) 即可继续向下同时选中下一个相同的文本进行同时编辑;
  • 鼠标选中文本,按下 Alt+F3 (Win) 或 Ctrl+Command+G(Mac) 即可一次性选择全部的相同文本进行同时编辑;
  • Shift+鼠标右键 (Win) 或 Option+鼠标左键 (Mac) 或使用鼠标中键可以用鼠标进行竖向多行选择;
  • Ctrl+鼠标左键(Win) 或 Command+鼠标左键(Mac) 可以手动选择同时要编辑的多处文本

♦ Package Control(绝不可错过的扩展包管理器)

Sublime Text 2 除了自身拥有无数实用功能和特性之外,它还能安装使用各种扩展/皮肤/配色方案等来增强自己。现在介绍的这个 Package Control 可以看做是一个ST2的扩展管理器,使用它,你可以用非常神奇、非常简单方便的方法去下载、安装、删除 Sublime Text 2 的各种插件、皮肤等,相信我,想更好地使用 ST2 绝对不能没有它!不过 ST2 本身并没有自带这个工具,我们需要自行安装它,方法很简单:

方法1:

[js]import urllib2,os; pf=’Package Control.sublime-package’; ipp=sublime.installed_packages_path(); os.makedirs(ipp) if not os.path.exists(ipp) else None; urllib2.install_opener(urllib2.build_opener(urllib2.ProxyHandler())); open(os.path.join(ipp,pf),’wb’).write(urllib2.urlopen(‘http://sublime.wbond.net/’+pf.replace(‘ ‘,’%20’)).read()); print ‘Please restart Sublime Text to finish installation'[/js]
复制上面代码到控制台执行即可。

方法2:

  1. 在 SublimeText2 的目录里面找到 Data > Installed Packages 的文件夹 (如没有请手动新建)
  2. 下载 Package Control.sublime-package 文件(地址自己搜索文件大小62kb)
  3. 将下载到的文件放进去 Installed Packages 里面
  4. 重新启动 Sublime Text 即可

♦ 常用快捷键

  • 快速搜索文件 —— CTRL + p(例如搜索routes/user/messages.js可以写r/u/m)
  • 行内注释 —— CTRL + /
  • 块注释 —— CTRL + SHIFT + /
  • 列选择模式 —— 鼠标右键+shift
  • 合并行 —— CTRL + J
  • 删除行 —— ctrl+shift+K
  • 复制行 —— ctrl+shift+D
  • 转到行 —— ctrl+G
  • 选择行 —— ctrl+L
  • 移动行 ——ctrl+shift+↑↓
  • 选择词 —— ctrl+D
  • 选择括号内内容 —— CTRL + SHIFT + M
  • 光标移动至括号内开始或结束的位置 —— CTRL + M
  • 选择标签及内容 —— ctrl + shift + A
  • 折叠代码 —— ctrl+shift+[
  • 设置书签 —— ctrl+F2
  • 词互换 —— Ctrl+T
  • 词改为大写—— Ctrl+KU
  • 词改为小写—— Ctrl+KL

♦ Emmet快捷键

  • 删除标签 —— ctrl+shift+;
  • 标签重命名 —— ctrl+shift+’
  • 套标签—— ctrl+alt+回车

♦ 推荐的部分插件:

  • Gits:可以轻松集成 GitHub
  • SFTP:直接编辑 FTP 或 SFTP 服务器上的文件
  • EMMET:这货对于前端的同学来说不得了,可以超快速编写HTML文件 (视频演示)
  • ConvertToUTF8:ST2只支持utf8编码,该插件可以显示与编辑 GBK, BIG5, EUC-KR, EUC-JP, Shift_JIS 等编码的文件
  • Clipboard History:剪切板历史
  • WordPress:集成一些WordPress的函数,对于像我这种经常要写WP模版和插件的人特别有用!
  • HtmlTidy:清理与排版你的HTML代码
  • PHPTidy:整理与排版php代码
  • Bracket Highlighter:类似于代码匹配,可以匹配括号,引号等符号内的范围。
  • Prefixr:CSS3 私有前缀自动补全插件,显然也很有用哇
  • Sublime h3Intel:代码自动提示
  • JS Format:一个JS代码格式化插件。
  • Placeholders:故名思意,占位用,包括一些占位文字和HTML代码片段,实用。
  • YUI Compressor:压缩JS和CSS文件
  • Goto-CSS-Declaration:跳转到css文件该class的声明处,方便修改查看,如图下所示,注意对应的css文件要同时打开才行。

WordPress必备插件

All in One SEO Pack

见其名则知道这个插件是专门为博客的SEO(搜索引擎优化)服务。软矿博客也在使用这个插件,一句话,强大无比。有了All in One SEO Pack,你只要通过插件设置,即可完成博客标题、描述和关键字的设置,给每篇文章添加独立的关键词、meta标签和描述,自动生成摘要,设置存档页和首页的内容不被抓取。……一个字强大无比,即使你不知道何为SEO,只要上网搜索相关的设置教程,完成All in One SEO Pack的设置,即可不再去管博客SEO的问题。当然除此之外,你还是要做好每一篇文章的内容和每一篇文章的关键,这些不是插件能够帮你完成的。

WP Super Cache

WP Super Cache插件是将动态博客文件转换成静态HTML文件。这样别人访问你的博客时只是访问伪静态的HTML文件而不是笨重的PHP文件,这对节省空间流量有着很大的帮助作用。了解更多节省空间流量的方法,请参考节省wordpress博客空间流量法则

Google XML Sitemaps

Google XML Sitemaps插件将会生成一个特殊的XML网站地图,这将有助于谷歌,Bing,雅虎和Ask.等搜索引擎更好地收录你的博客。有了这样一个网站地图,爬虫更容易地查看您网站的完整结构和检有效地检测网站内容。此外,当你每更新你的博客时它都会通知搜索引擎,以便搜索引擎收录你的文章和更新你博客的快照。想要谷歌更好地收录你的网站和你网站的文章,Google XML Sitemaps必装无疑。
Read More

JavaScript所有的操作符

操作符分类 操作符 描述




+ (加法) 将两个数相加。
++ (自增) 将表示数值的变量加一(可以返回新值或旧值)。
(求相反数,减法) 作为求相反数操作符时返回参数的相反数。作为二进制操作符时,将两个数相减。
(自减) 将表示数值的变量减一(可以返回新值或旧值)。
* (乘法) 将两个数相乘。
/ (除法) 将两个数相除。
% (求余) 求两个数相除的余数。
字符串操作符 + (字符串加法) 连接两个字符串。
+= 连接两个字符串,并将结果赋给第一个字符串。




&& (逻辑与) 如果两个操作数都是真的话则返回真。否则返回假。
|| (逻辑或) 如果两个操作数都是假的话则返回假。否则返回真。
! (逻辑非) 如果其单一操作数为真,则返回假。否则返回真。



& (按位与) 如果两个操作数对应位都是 1 的话则在该位返回 1。
^ (按位异或) 如果两个操作数对应位只有一个 1 的话则在该位返回 1。
| (按位或) 如果两个操作数对应位都是 0 的话则在该位返回 0。
~ (求反) 反转操作数的每一位。
<< (左移) 将第一操作数的二进制形式的每一位向左移位,所移位的数目由第二操作数指定。右面的空位补零。
>> (算术右移) 将第一操作数的二进制形式的每一位向右移位,所移位的数目由第二操作数指定。忽略被移出的位。
>>> (逻辑右移) 将第一操作数的二进制形式的每一位向右移位,所移位的数目由第二操作数指定。忽略被移出的位,左面的空位补零。




= 将第二操作数的值赋给第一操作数。
+= 将两个数相加,并将和赋给第一个数。
-= 将两个数相减,并将差赋给第一个数。
*= 将两个数相乘,并将积赋给第一个数。
/= 将两个数相除,并将商赋给第一个数。
%= 计算两个数相除的余数,并将余数赋给第一个数。
&= 执行按位与,并将结果赋给第一个操作数。
^= 执行按位异或,并将结果赋给第一个操作数。
|= 执行按位或,并将结果赋给第一个操作数。
<<= 执行左移,并将结果赋给第一个操作数。
>>= 执行算术右移,并将结果赋给第一个操作数。
>>>= 执行逻辑右移,并将结果赋给第一个操作数。




== 如果操作数相等的话则返回真。
=== 绝对相等比较(null==undefined)结果将返回true
(null===undefined)结果将返回false
(1==”1”) 结果将返回true,(1===”1”) 结果将返回false。
!= 如果操作数不相等的话则返回真。
> 如果左操作数大于右操作数的话则返回真。
>= 如果左操作数大于等于右操作数的话则返回真。
< 如果左操作数小于右操作数的话则返回真。
<= 如果左操作数小于等于右操作数的话则返回真。




?: 执行一个简单的“if…else”语句。
, 计算两个表达式,返回第二个表达式的值。
delete 允许你删除一个对象的属性或数组中指定的元素。
new 允许你创建一个用户自定义对象类型或内建对象类型的实例。
this 可用于引用当前对象的关键字。
typeof 返回一个字符串,表明未计算的操作数的类型。
instanceof 用于判断一个变量是否某个对象的实例
void 该操作符指定了要计算一个表达式但不返回值。

ECMAScript全部关键字

关键字
break case catch continue default typeof
delete do else finally for var
function if in instanceof new void
return switch this throw try while
with          
保留字
abstract boolean byte char class const
debugger double enum export extends fimal
float goto implements import int interface
long mative package private protected public
short static super synchronized throws transient
volatile