每一个可以努力的日子,都是一份厚礼。
HTML5
AngularJS 全局消息通告 service
2013 10月 15th
在 AngularJS 中,Controller 之间可以共用的代码我们通常抽出来写成一个 Service。全局 Alert 消息系统就是一个很好的例子,比如“用户注册成功”、“添加商品成功”,每个 Controller 都有机会发出通告,这一部分功能应该写成独立模块。
Angular-UI Bootstrap 项目提供了一系列的模块,将 Bootstrap 中的 component 转换为原生的 Angular directives,如果你正在同时使用 Bootstrap 和 AngularJS,那么强烈建议你使用它。
深入理解 AngularJS 的 Scope
2013 7月 28th
AngularJS 最佳实践
2013 7月 1st
AngularJS 是一个 Web 应用框架,它实现了前端的 MVC 架构,能让开发人员很方便地实现业务逻辑。
举个栗子,要做到下面的效果,以前可能需要写一连串的 JavaScript 代码绑定 N 多事件。而使用 AngularJS 框架,一句 JavaScript 都不用写就能实现了,神奇吧?查看演示。
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script> <div data-ng-app> 单价: <input type="number" min=0 ng-model="price" ng-init="price = 299"> <br> 数量: <input type="number" min=0 ng-model="quantity" ng-init="quantity = 1"> <br> 总价: {{ quantity * price }} </div> |
这得益于 AngularJS 中的双向数据绑定特性(Two Way Data-Binding),将 Model 和 View 自动关联了起来,在更复杂的业务场景下,还有代码分离的好处,将 DOM 操作和应用逻辑解耦,非常实用。
基于 RESTful 接口的前端 MVC 架构
2013 6月 7th
写一个 jQuery 插件
2013 1月 6th
工作中发现,我的很多时间都在为前端页面交互编写 JavaScript 代码。相比较而言,由于有 MVC 框架的各种约定,后端的 PHP 代码写起来显得比 JavaScript 要优雅很多。虽然也有 jQuery 这样的利器(得益于良好的跨浏览器兼容特性和简洁的使用接口,jQuery 几乎已经成了 JavaScript 的代名词),但我用到的只是它的选择器,以及别人写的一些插件而已。我深知要透彻地理解一门语言,就应该去用它做一个小项目,带着目标学习需用到的东西才能有的放矢。正好遇到一个交互需求找不到已有解决方案,于是摒弃以前那样简单粗暴的写 js 代码,我决定自己实现一个 jQuery 插件来搞定它。
Chosen:用户友好的 select 下拉框列表组件
2012 11月 22nd
用户体验真是一门很深的学问。为了让网页用起来更方便舒服,很多时候我们都要花费额外的功夫去做原生 HTML 组件无法完成的效果。
比如 <select>
标签,默认情况下它会在浏览器显示一个下拉选择框。当选择项过多的时候,比如下面“选择国家”的例子(全世界有 200 多个国家),下拉框会很长,并且会出现滚动条,用户不得不去滚动鼠标费力寻找自己需要的选项,这无形间就造成了操作阻碍。很明显,下面右图的方式通过一个搜索输入框,简化了寻找的过程,极大方便了用户,提升了体验。
为 Bootstrap 添加更多自定义图标
2012 11月 20th
Twitter Bootstrap 真是前端开发的瑞士军刀,作为基于 HTML,CSS 和JavaScript 的简洁灵活的前端框架及交互模块集合,让我这样的半吊子 PHPer 都能很轻松地写出一张还算漂亮的页面来。干净整洁有木有!小清新有木有!Web 后端都逆袭了有木有!
Bootstrap 默认自带了由 Glyphicons 提供的 140 个灰/白图标,很好看,然而,很不够用啊!无法满足项目饥渴的需求啊!连个电话的图标都没有,哥曾经在推上@这套图标的作者,过了大概 5 个月这哥们 回复我 说那个 phone icon 做好了。。。
FamFamFam Silk Icon 是一套免费的图标,它包含了 1000 多个精美的彩色的 icons(全部图标一览)。如果能用 Bootstrap 的方式来调用这些图标,使用到我们的项目中,肯定能把需求全部满足了。
跨浏览器前端表单验证
2012 8月 12th
表单验证是广大前端非常头疼的一项事务,特别是在面对复杂表单的情况下,例如某些输入框仅接受数字输入,某些字段是必填,有些项又必须满足一定输入规则……为了提供更好的用户体验,这些繁琐的需求不得不去花大量时间和代码去满足。在新的 HTML5 标准中,增加了十几个表单输入类型和特性,例如 autofocus 自动焦点,以及之前介绍过的 Placeholder 占位符。这些贴心的特性支持大大解放了前端开发人员,我们仅需使用新的标签元素或属性,就可以完成过去需要大量 javascript 代码才能完成的功能。
问题是,在 HTML5 尚未普及的今天,特别是国内复杂的浏览器市场环境下,仅使用 HTML5 来解决表单验证这些问题实在是力不从心。如何让页面更有语义,让我们的代码更加优雅简洁,这是个问题。
Facebook Mobile Hack 2012: Hong Kong
2012 5月 27th
跨浏览器兼容 HTML5 Placeholder 的 jQuery 插件
2011 12月 27th