Squirrel 前端 Web 框架

很长时间没有写博客了,因为绝大部分业余时间都投入到 Squirrel 前端框架的开发中。Squirrel 是一个轻量级的移动 Web 前端框架,目的是打造一个简单易用、易扩展的基础框架,让前端脱离枯燥的重复开发,从而快速构建移动 Web 应用。之所以命名为 Squirrel 一方面是因为松鼠是公司的吉祥物,另一方面是寓意快速、灵活。
Continue reading

创建一次性执行函数

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

一、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