• ，基础库的使用
• ，命名空间
• ，实现面向对象的方法createClass，inherit
• ，浏览器事件绑定
• ，事件绑定与委派
• ，唯一的id
• ，跨域的GET请求
• ，跨域的POST请求
• ，校验器（同步校验与异步校验）
• ，组件复用
• ，网络层
• ，钩子
• ，统计
• ，多语言版本
  *
• ，浏览器缓存处理
• ，资源配置与加载(预加载 or 按需加载)
• ，多层API封装wraper,uni_wrapper
• ，文件压缩与混淆
• ，CSS reset与命名
• ，图片精灵or @font-face
• ，适配移动客户端

JS实现一个渐进变化的小程序

_slide = function(from,to,callback,time){
    var frequence = 10;
    var totalTime = time || 200;
    var changeTimes =  totalTime/frequence;
    var singleChange =  (to-from)/changeTimes;
    var interval = setInterval(function(){
        from = from + singleChange;
        changeTimes--
        if(changeTimes<0 || singleChange == 0){
            clearInterval(interval)
            callback(to)
        }else{
            callback(from)
        }        
    },frequence)
}

去年@siva海浪高 推荐了一款Chrome插件可以在Chrome开发者工具中编辑CSS或者JS后直接保存到本地，昨天看了下Chrome文档发现Chrome的workspace功能就可以做到这一点，无需使用任何插件，下面是开启步骤（仅需三步，我用的是Chrome 29）：

1.在 chrome://flags/ 中启用 Developer Tools Experiments (开发者工具实验)

2.这时候你就可以在Chrome devtool的setting中看到workspace选项，点击add folder添加需要编辑的本地静态资源目录：

3.选择OK后Chrome会再让你确认，点击允许即可

这时候就可以在source panel看到效果了，并且可以直接进行编辑

BTW ： 如果还需要在element panel中直接进行微调，或者编辑还需要进行映射 ：

这时候即便是在这里编辑，也可以随时保存编辑状态的CSS了

先献上DEMO，适配iPad的登录浮层 ;

效果

如果使用Chrome打开的话其实可以发现他在PC上的体验也是很不错的。可以对比一下百度首页未登录状态下右上角的登录按钮弹出来的体验几乎一模一样。

开发iPad的登录控件遇到最大的问题是： 目前PC端已经有一套登录控件，现在要开发的版本必须和当前PC的基本体验保持一致，在不改动当前的基础库的情况下如何保证最优的代码复用，最低的维护成本，最可靠的性能

需求

基于iPad端web页面的登录浮层应用场景相对于PC来说相对简单一些。但是对比一下PC端的登录控件的功能，真心没有想象钟的那么简单。涉及到的功能主要包括：

• 1.主登录功能
• 2.短信登录功能
• 3.第三方帐号登录功能
• 4.交互细节
• 5.实例化时的配置细节

再对比下开发该应用的场景：

• 1.最快效率开发出最优性能
• 2.优化代码复用情况，最好不要出现，如果某处登录逻辑修改就需要修改两处代码的情况
• 3.尽可能满足现有功能，对性能不做特别要求

就这三条其实就可以知道要怎么做了： 在现有的PC端上做体验的优化

实现

优秀的工程离不开便捷的工具和技术，例如：fastclick,iconfont，CSS3的box模型、animate等等。

神器一：fastclick

关于FastClick已经有很多内容可以参考了，奉上GIT地址：https://github.com/ftlabs/fastclick;它解决了touch设备上300ms等待是否为dbclick的延迟。

神器二：iconfont

retina图标并不是把图片放大为现在的两倍就能解决问题了的，一些单色图标可以使用字体来完美解决；一淘大牛们做的开源工具http://www.iconfont.cn/。

这个的平台可以定制也可以按项目聚类，缺点是如果有UE妹纸的ICON加进来就要先把UE图里的矢量图标转成SVG然后再上传，比用PS直接处理2倍大小的图片相对麻烦些。

神器三：beforeorientationchange

在iPad下无法转屏需要500ms的时间，但是标准提供的orientationchange方法只在转屏之后执行；可能有一些动作需要在转屏之前完成，这里通过重力感应获取当前状态实现的beforeorientationchange事件,https://github.com/webzhangnan/jquery.beforeorientationchange，可以感受一下。

神器四：animate.css

这款通过CSS3的animation属性实现的一套动画组件；当然在iPad版本登录中只用到了三套动画，所以就没有整体引入。而是在代码里做了一套简单的封装。这里又一个比较靠谱的方法：

首先定义一套动画，例如：

@keyframes loginPad_shakeSlideIn {
    0% {
        opacity: 0;
        -webkit-transform: translateY(-2000px);
        -moz-transform: translateY(-2000px);
        -o-transform: translateY(-2000px);
        -ms-transform: translateY(-2000px);
        transform: translateY(-2000px)
    }

    80% {
        opacity: .8;
        -webkit-transform: translateY(10px);
        -moz-transform: translateY(10px);
        -o-transform: translateY(10px);
        -ms-transform: translateY(10px);
        transform: translateY(10px)
    }
    100% {
        opacity: 1;
        -webkit-transform: translateY(0px);
        -moz-transform: translateY(0px);
        -o-transform: translateY(0px);
        -ms-transform: translateY(0px);
        transform: translateY(0px)
    }
}

然后就可以通过setTimeout的方法实现动态加载动画:

var animateActor = function(ele,actor){
    var $ele = $(ele),
        animate = {
        shakeSlideIn:"loginPad_slideInDown .5s linear 0 1 normal forwards"
    }
    $ele.css("-webkit-animation", "");
    setTimeout(function() {
        $ele.css("-webkit-animation", $ele[actor])
    }, 0);

    return $ele;
}

这样做的好处是无论初始状态是什么情况都可以加载动画，而不是通过addClass和removeClass的方式，还可以写出很漂亮的链式表达式：

animateActor($('#test'),'slideInDown').css({'opacity':'0'})

如果在类里再做封装就更好看了。

有了这些工具开发起来便捷很多。