关于FastClick

由于移动端click事件的300ms延迟,很多人都选择了使用FastClick。但我在使用过程中遇到了一些问题。

覆盖了自己封装的tap事件

解决方法是给该元素添加class——“needsclick”,官方给出了Bootstrap下的解决方案:

1
<a class="dropdown-toggle needsclick" data-toggle="dropdown">Dropdown</a>

AMD环境下引入失败

比较严重的是在amd环境下,requirejs引入时候的bug。

Amazing CSS

一些牛逼哄哄的CSS的玩法。

设置选中文字的背景色。现在选中后为马卡龙绿色。

1
2
3
4
5
::selection {
background: #DB4F33;
color: white;
text-shadow: none;
}

F.I.S是个好工具

FIS工具介绍

最近为新项目做前端技术选型时顺便了解了一下百度推出的前端自动化开发框架——FIS。FIS在项目中为性能优化、模块化框架、开发规范、代码部署、开发流程等问题整套解决方案,为前端开发提供不少便利。

安装

如果你的系统中已经安装npm则只需要:

1
$ npm install -g fis

如果遇上过慢可以使用淘宝的cnpm镜像服务完成安装。

Grunt和前端工程化实践

Grunt工具介绍

安装

运行项目我们需要grunt-cli和yeoman和yo的一个webapp生成器,如果你的系统中已经安装npm则只需要:

1
2
3
npm install -g grunt-cli
npm install -g yo
/* npm install -g generator-webapp */

然后开始你的grunt之旅吧~

Knockout.js应用

Knockout是一个轻量级的UI类库,通过应用MVVM模式使JavaScript前端UI简单化。

下载和安装

Github官网

MVVM 和 View Model

Model-View-View Model (MVVM) 是一种创建用户界面的设计模式。 描述的是如何将复杂的UI用户界面分成3个部分:

  • model: 你程序里存储的数据。这个数据包括对象和业务操作(例如:银子账户可以完成转账功能), 并且独立于任何UI。使用KO的时候,通常说是向服务器调用Ajax读写这个存储的模型数据。
  • view model: 在UI上,纯code描述的数据以及操作。例如,如果你实现列表编辑,你的view model应该是一个包含列表项items的对象和暴露的add/remove列表项(item)的操作方法。

    注意这不是UI本身:它不包含任何按钮的概念或者显示风格。它也不是持续数据模型 – 包含用户正在使用的未保存数据。使用KO的时候,你的view models是不包含任何HTML知识的纯JavaScript 对象。保持view model抽象可以保持简单,以便你能管理更复杂的行为。

  • view: 一个可见的,交互式的,表示view model状态的UI。 从view model显示数据,发送命令到view model(例如:当用户click按钮的时候) ,任何view model状态改变的时候更新。