创建一次性执行函数

很多时候我们需要创建一次性执行函数,例如:当第一次点击按钮时弹出一个提示框,下面就简单介绍下方法:

一、jQuery 方法

如果在项目中引用的 jQuery 库,那么就可以直接使用其提供的.one()方法,这也是最简单的方法:

$("#myelement").one( "click", function() { alert("You'll only see this once!"); } );

如果想了解更多.one()函数方法可以查看 jQuery 的 API 文档:api.jquery.com/one/
Continue reading

前端构建工具 Grunt 入门

之前也介绍过前端构建工具 Ant 和 Yeoman,其中 Yeoman 工具就包含了 Grunt 所以就不多说。那么与 Ant 相比 Grunt 有这么几个优点:

  1. Javascript 语法,相比 Ant 的 XML 写起来更简洁更顺手;
  2. 任务模块资源丰富,如代码合并、压缩、检测、JSDoc、单元测试等你能想到的都可以找到;
  3. 文档丰富,从入门使用,到高级定制,都有相应的使用说明;
  4. 上手容易,Grunt 以及 Grunt 的任务模块都是通过 npm 进行安装和管理,配置简单。

Continue reading

前端工程构建工具——Yeoman

一、Yeoman 简介

通常在开发新项目时我们都需要配置工程环境,开发目录,需要下载一些库、框架文件(如 jQuery、Backbone 等),配置编译环境(Less、Sass、Coffeescript等),甚至还要配置单元测试框架,过程非常繁琐,还没开始编码时间就耗了大半天。为了解决这个问题 Paul Irish、Addy Osmani、Sindre Sorhus、Mickael Daniel、Eric Bidelman 和 Yeoman 社区共同开发的一个项目——Yeoman。

Continue reading

使用 Ant 构建前端自动化(二)

上一篇简单的介绍了下 Ant 以及如何使用 Ant 进行 CSS 文件的自动合并压缩,这篇将继续介绍代码检验、JS 混淆压缩、文档生成等前端流程的自动化构建。

一、语法检验

前端的语法检验主要针对 Javascript 脚本,常用的工具是 JSLint 以及 JSHint,这里以 JSLint 为例,我们知道 JSLint 工具本身就是一段 JavaScript 代码,所以运行 JSLint 是需要 JavaScript 引擎支持的,可选的有基于 C 语言的 Spidermonkey 和基于 Java 的 Rhino,但这样配置起来会比较麻烦,所以我这里使用了一个名为 jslint4java Java 工具包,通过 Ant 直接引用即可调用 JSLint ,下面看下 Ant 构建例子:

Continue reading

网站变灰 CSS

这个就不多解释了,让网站所有元素变成灰色调,全浏览器支持,使用了滤镜,比较吃性能,建议作临时方案使用。
代码如下:

body{
    -webkit-filter:grayscale(100%);
    -moz-filter:grayscale(100%);
    -ms-filter:grayscale(100%);
    -o-filter:grayscale(100%);
    filter:grayscale(100%);
    filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
    filter:gray;
}

在 Retina 屏幕下显示变模糊的问题,可以加上:

body{
    ...
    -webkit-transform: translateZ(0);
    ...
}