2013年8月4日星期日

grunt-前端打包脚本

     旧时,前端需要做些文件上的处理,通常都需要求助于后端开发,shell、java、.Net才能做这些事情,后来随着python、perl等脚本语言的普及,打包不再是后端专属,但使用这些语言都有学习成本,如果不是本身做这种开发的,用来写打包脚本就有些“大材小用”。如今,随着Nodejs的发展,前端工程师终于告别了用“第三方语言”写脚本的日子。
尤其是有了grunt这个javascript命令行工具,一切变得更加的美好。

     一、grunt的安装
         首先需要确保你的电脑有nodejs的环境,如果没有,作为前端工程师就彻底Out了。安装Node
         如果你之前安装了grunt0.3版本,那么果断的卸载它吧。grunt0.4.0
   npm uninstall -g grunt


         
     二、grunt的使用

javascript mobile 事件详解

      最近刚刚接触mobile端的javascript开发,相对于传统的PC Web开发,DOM应该不是瓶颈,CSS3的特效也只是锦上添花,减少开发的难度。所以,最重要的差别当属事件了,两者之间到底有什么不同呢,温故而知新,从DOM3支持的事件到html5事件再到mobile触屏事件一一进行了解。

    一、PC支持的事件(DOM3):
  • UI事件、
  • 鼠标事件、
  • 键盘事件、
  • 滚轮事件、
  • 焦点事件、
  • 文本事件、
  • 合成事件、
  • 变动事件等(见javascript高级程序设计 13.4)
二、HTML5支持的事件:
  •     contextmenu事件, 右键显示菜单
  •     beforeunloaded 页面销毁之前调用
  •     DOMContentLoaded 用户可以尽早进行交互
  •     readystatechange判断js和css(IE)中是否加载完毕。
  •     pageshow和pagehide事件
  •     hashchange事件

       chrome FF6+ Opera支持newURL oldURL
       location处理

三、设备事件
  •    orientationchange事件 ios支持  window.orientation : 0 90 -90
  •    MozOrientation 
  •    deviceorientation事件:旋转角度(event.alpha beta gamma) ,支持ios4.2 safari chrome Android中的webkit
  •    devicemotion 支持 同上。

     触摸和手势事件
       触摸事件:
       touchstart
       touchend
       touchmove

       支持属性:touches(数组)targetTouches  changeTouches clientX clientY
identifier pageX pageY screenX screenY target


      手势事件:

         gesturestart
         gestureend
         gesturechange   支持scale 和rotation

四、zepto中的tap事件
       下面就看看mobile javascript框架支持的事件是如何封装的~
        zepto是mobile界最著名的轻量级框架,支持modern浏览器;gzip后大小只有9.7K,详情:zepo官网 。包含了工具函数、继承、DOM和CSS操作、事件处理、ajax、表单操作、动画、以及终端检测、移动设备事件支持等功能。可谓“身材虽小,五脏俱全”,真心希望有空的时候可以写篇类库分析的文章,看情况吧。这里主要谈谈它对移动端事件的扩展。
       不知道为什么针对于Modern浏览器、主打手机端开发的zepto并没有把touch、gesture的支持作为基础的功能,大抵是因为觉得