平时工作中经常需要开发各种管理后台,为了提升开发效率,一般会使用 Bootstrap 一类的 CSS 框架,使用 AngularJS 一类的单页应用框架,让 Web 开发能够更好的将精力集中在业务逻辑上。但逃不过另外一个麻烦,那便是跨浏览器的兼容问题。所以我一般的粗暴做法是,干脆就不支持 IE 浏览器,通过 userAgent 判断并提示用户切换到 Chrome 。其实,除了这个办法之外,还可以考虑将 Web 应用打包为桌面应用。开源社区提供了 NW.js 来轻松的将 Web 应用打包为桌面应用,这样只需要做到兼容 Chrome 就够了。

阅读全文 »

Web 开发中,除了数据操作之外,最频繁的就是发起和处理各种 HTTP 请求了,加上 HTTP 请求又是异步的,如果在每个请求中来单独捕获各种常规错误,处理各类自定义错误,那将会有大量的功能类似的代码,或者使用丑陋的方法在每个请求中调用某几个自定义的函数来处理。这两种方法基本都不是靠谱之选。好在 AngularJS 提供了 Interceptors——拦截战斗机——来对应用内所有的 XHR 请求进行统一处理。

阅读全文 »

在进行 AngularJS 应用的开发时,经常需要显示图片,而 img 有时候并不能成功的获取到 srcng-src 指定的图片,这时候可能需要通过其它办法来指定一个备用图片,可以想到的办法有:

  • ng-src 的属性中,指定完普通的图片地址后,使用 || 追加备用图片的地址,如

    1
    ng-src='{{"myImg.png" || "fallback.png"}}'
  • 使用 ng-showng-hide 控制两个 img,其中一个正常显示图片,另外一个显示力求用图片

开始我也这么做,所以找了一下,发现了一个 AngularJS 指令,angular-fallback-image 不过这个指令并不完善,必须指定指令图片才行,我想要的是,就算没有指定图片,也可以显示一个占位性质的图片,于是我做了修改,发了 Pull Request ,不过这位乌拉圭的小哥 似乎有段时间没处理 Github 上的东西了。

阅读全文 »

我所经历的大部分项目,并不是纯粹的前端项目,相关的前端文件,都是使用 Express 来处理,除了 Jade 文件之外的,全部放在 Express 静态文件目录 public 中,Bower 也配置为将依赖包直接安装到 public/lib 目录,然后直接使用原路径在 HTML 中引用对应的 JavaScript / CSS 文件,经常是一个页面加载几十个静态资源。

上周在做一个 App 项目的商户端,对应的 API 已经完成,只是用 AngularJS 来实现一个前端 Web 页面,其中的 HTML 使用了 Jade 来完成。由于是一个完全的前端项目,终于决定尝试用 Gulp 来进行构建。整体的需求如下:

  • 使用 Bower 管理前端依赖
  • 需要将 Jade 文件编码成 HTML,并按照 Angular New Router 中的 Components 来组织目录结构
  • 将 CSS / JavaScript 文件组装为单个文件
  • 图片和字体等静态资源存放到对应目录
  • 使用 Gulp 创建一个调试用的服务器,并能够修改文件后自动重载浏览器页面
阅读全文 »

在上一篇Node.js ORM 数据操作中间件 Waterline 中,我们介绍了 Waterline 的功能与特点,这篇文章中我们将用一个实例 waterline-sample (GithubCoding.NET),来看看在 Express 项目中如何使用 Waterline。

要在项目中使用 Waterline ,无非是解决如何配置,在什么时机初始化,怎样组织所有的数据集合,以及在控制器中怎么调用 Waterline 中的数据集合这几个问题。

阅读全文 »