react-native 组件间通信

react native 中,组件间通信无非3种情况:

以DEMO为例,有2个组件Input和 ShowText 。

1、组件嵌套,即Input是ShowText的子组件,在组件间通信可以通过state进行。
2、组件为同级关系,即Input和ShowText都属于页面级别内的组件,这是常见的组件间通信,可各自提供接口进行通信,利用props进行
3、除了以上2种的关系外的组件,比如Input在一个Container组件内,页面级别只有2个组件Container和ShowText。这种情况下,可创建一个全局的通信类。在react-native的2014 example 中 都有这样的代码,这里就不再贴代码了。

源码可查看github:https://github.com/baofen14787/react-native-communicate-demo

第一种情况:

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 */
'use strict';

var React = require('react-native');


var {
  StyleSheet,
  Text,
  View,
  TextInput
} = React;


var styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});


var Input = React.createClass({

    handleUpdateChange(text) {
        this.props.updateChange(text);
    },


  render() {

    return (
        <TextInput onChangeText={(text) => this.handleUpdateChange(text)} style={{ width : 200, height: 40, borderColor: 'gray', borderWidth: 1}} />
    );
  }
});




var ShowText = React.createClass({

    getInitialState(){
      return {
        text : '我是文字'
      }
    },

    handleChange(textValue){
      this.setState({
        text: textValue
      });
    },

    render() {

        return (
          <View style={{flex : 1,justifyContent: 'center',alignItems: 'center',backgroundColor: '#F5FCFF'}}>
            <Text>{this.state.text}</Text>
            <Input updateChange={this.handleChange} />
          </View>
        );
    }
});

module.exports = React.createClass({

  render() {
    return (
      <View style={styles.container}>
        <ShowText />
      </View>
    );
  }
});

第二种情况:

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 */
'use strict';

var React = require('react-native');


var {
  StyleSheet,
  Text,
  View,
  TextInput
} = React;


var styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});


var Input = React.createClass({

    handleUpdateChange(text) {
        this.props.updateChange(text);
    },


  render() {

    return (
      <View style={{flex : 1,justifyContent: 'center',alignItems: 'center',backgroundColor: '#F5FCFF'}}>
        <TextInput onChangeText={(text) => this.handleUpdateChange(text)} style={{ width : 200, height: 40, borderColor: 'gray', borderWidth: 1}} />
      </View>
    );
  }
});




var ShowText = React.createClass({


    render() {

        return (
          <View style={{flex : 1,justifyContent: 'center',alignItems: 'center',backgroundColor: '#F5FCFF'}}>
            <Text>{this.props.text}</Text>
          </View>
        );
    }
});

module.exports = React.createClass({

  getInitialState(){
    return {
      text : '我是文字'
    }
  },

  handleChange(textValue){
    this.setState({
      text: textValue
    });
  },

  render() {
    return (
      <View style={styles.container}>
        <Input updateChange={this.handleChange} />
        <ShowText text={this.state.text} />
      </View>
    );
  }
});

reactjs 中 event 对象控制台输出null的问题

在 react 中输出 event 对象,在控制台查看是 null ,这对调试非常不友好。如图:

解决的办法很简单,在 console.log(event) 前使用event的 persist() 方法即可。

var Test = React.createClass({
        handleClick : function(e){
          e.persist()
          console.log(e);
            
        },

        render : function(){
           return (
                   <div onClick={this.handleClick}>我是DIV</div>
           )
        }

      });

      React.render(
              <Test />,
              document.getElementById('container')
      );

react native 中es6语法解析

解构赋值

var {
  StyleSheet,
  Text,
  View
} = React;

这句代码是ES6 中新增的解构(Destructuring)赋值语句。准许你获取对象的多个属性并且使用一条语句将它们赋给多个变量。

上面的代码等价于:

var StyleSheet = React.StyleSheet;
var Text = React.Text;
var View = React.View

再看几个例子,以前,为变量赋值,只能直接指定值:

var a = 1;
var b = 2;
var c = 3;

而ES6 允许这样写:

var [a, b, c] = [1, 2, 3];

更详细的内容可参看: 变量的解构赋值

箭头函数

React Native 里面经常会出现类似的代码:

ES6中新增的箭头操作符 => 简化了函数的书写。操作符左边为输入的参数,而右边则是进行的操作以及返回的值 Inputs=>outputs

举几个栗子感受下:

var array = [1, 2, 3];
//传统写法
array.forEach(function(v, i, a) {
    console.log(v);
});
//ES6
array.forEach(v => console.log(v));
var sum = (num1, num2) => { return num1 + num2; }
//等同于:
var sum = function(num1, num2) {
    return num1 + num2;
 };

更多详细内容请自行Google,或查看: https://www.imququ.com/post/arrow-function-in-es6.html

延展操作符(Spread operator)

这个 … 操作符(也被叫做延展操作符 - spread operator)已经被 ES6 数组 支持。它允许传递数组或者类数组直接做为函数的参数而不用通过apply。

var people=['Wayou','John','Sherlock'];
//sayHello函数本来接收三个单独的参数人妖,人二和人三
function sayHello(people1,people2,people3){
    console.log(`Hello ${people1},${people2},${people3}`);
}
//但是我们将一个数组以拓展参数的形式传递,它能很好地映射到每个单独的参数
sayHello(...people);//输出:Hello Wayou,John,Sherlock 

//而在以前,如果需要传递数组当参数,我们需要使用函数的apply方法
sayHello.apply(null,people);//输出:Hello Wayou,John,Sherlock 

而在 React 中,延展操作符一般用于属性的批量赋值上。在JSX中,可以使用…运算符,表示将一个对象的键值对与ReactElement的props属性合并。

var props = {};
  props.foo = x;
  props.bar = y;
  var component = <Component {...props} />;
  
//等价于
var props = {};
  props.foo = x;
  props.bar = y;
  var component = <Component foo={x} bar={y} />;

它也可以和普通的XML属性混合使用,需要同名属性,后者将覆盖前者:

var props = { foo: 'default' };
var component = <Component {...props} foo={'override'} />;
console.log(component.props.foo); // 'override'

更多详细信息: https://facebook.github.io/react/docs/jsx-spread.html

class

ES6中添加了对类的支持,引入了class关键字(其实class在JavaScript中一直是保留字,目的就是考虑到可能在以后的新版本中会用到,现在终于派上用场了)。JS本身就是面向对象的,ES6中提供的类实际上只是JS原型模式的包装。现在提供原生的class支持后,对象的创建,继承更加直观了,并且父类方法的调用,实例化,静态方法和构造函数等概念都更加形象化。

class PropertyView extends Component {
    render() {
        return (
            <View></View>
        )
    }
}

//等价于
var PropertyView = React.createClass({
    render() {
        return (
            <View></View>
        )
    }
})

方法定义(method definition)

ECMAScript 6中,引入了一种名叫方法定义(method definition)的新语法糖,相对于以前的完整写法,这种简写形式可以让你少写一个function键字.

React.createClass({
    render() {
        return (
            <View></View>
        )
    }
})

//等价于

React.createClass({
    render : function() {
        return (
            <View></View>
        )
    }
})

最后,推荐一个ES6的PPT,写得不错: http://khan4019.github.io/ES6/

react-native demo一例

前2周,fackbook发布了react-native , 一时间前端界异常兴奋。各种概念飞满天,俺作为前端一份子,也凑凑热闹。

花了2天时间,边看API边写代码,react-native 真是太新了,好多问题都google不到内容,来来去去都是官方文档,这2天下来,也算摸清了react-native的一些用法。

DEMO地址: https://github.com/hugohua/react-native-demo 以后又可以催逼自己会ios开发,哈哈。

过两天再写点经验贴吧。先贴个readme来凑凑字数。

React Native Demo

如何运行

先确保你已安装好了React Native 所需的依赖环境 
在根目录下执行 npm install 
再执行 npm start 
最后在Xcode中点击run 运行 或者按 command + R 
可能遇到的问题

error 1003 错误

在家开着VPN写代码,一般会遇到该问题,解决方法:

打开项目中的AppDelegate.m,找到这行代码: jsCodeLocation = [NSURLURLWithString:@"http://localhost:8081/index.ios.bundle"], ,将localhost换成自己的ip

一点经验

图片自适应

react native 中,图片必须明确写明大小值,不然无法显示,同时width : ‘100%”,这种写法不支持。

如果需要自适应,有几种做法:

只写高度值,不写宽度值,外层容器使用flex来做好布局,再配合resizeMode实现图片自适应即可。

例子1 :

<View style={{flex : 1,borderRightWidth : 1,borderRightColor: '#eeeeee'}}>
                    <Image style={{height: 110,resizeMode: Image.resizeMode.contain}} source={{uri: 'http://gtms01.alicdn.com/tps/i1/TB1nif8HpXXXXc6XVXXAyLxZVXX-320-188.jpg'}} />
                </View>

例子2 :

<View style={{
	  flex: 1,
	  alignItems: 'stretch',
	}}>
	  <Image ssource={{uri: 'http://gtms01.alicdn.com/tps/i1/TB1nif8HpXXXXc6XVXXAyLxZVXX-320-188.jpg'}} style={{ flex: 1 }} />
	</View>

使用Dimensions来获取设备viewport的宽高

var Dimensions = require('Dimensions');
	var { width, height } = Dimensions.get('window');
	var image = (
	  <Image style={{width: width, height: 100 }} source={{uri: 'http://gtms01.alicdn.com/tps/i1/TB1nif8HpXXXXc6XVXXAyLxZVXX-320-188.jpg'}} />
	);

关于layout-css

react-native(rn)中使用flex来布局,目前使用来看,配合positon : ‘absolute’是能够满足基本页面布局需求的。

但是rn中没有zIndex,也没有position : ‘fixed’,在复杂的页面布局中,会稍微有点麻烦,但还是能实现类似的效果。

rg中只实现了css中很小的一个子集,还有很多属性值无法使用,并且属性写法繁琐,如在web中的css 如果要写padding : 10px 5px 15px 20px,在ng中则全部要分开属性写:paddingTop : 10,paddingRight : 5 … 感觉一夜回到解放前。。

positon : ‘absolute’定位方式是相对于父级元素,不管父级是否具有relative。

缺少一些常用的css属性,如中划线,两端对齐等。

最终效果图

函数内巧用注释实现多行文本拼接

经常会遇到这么个场景,需要将html代码转为JavaScript输出。
一般的做法,就是使用字符串拼接或者使用数组拼接后最终转为字符串。

比如常规做法:

var str = '' +
'<!doctype html>' +
'<html>' +
'   <body>' +
'       <h1>函数内巧用注释实现多行文本拼接 www.ghugo.com</h1>' +
'   </body>' +
'</html>' +
'';

以前,我一般是用转换工具实现,比如这个网址:HTML to JavaScript Convertor

用工具确实是个好方法,那有没有更好的解决方案?以前曾用过函数内用注射来实现本地调试的效果,那么注释是否也可以实现字符串拼接?

于是google了一番,有些收获。

实现方案如下:

function multiline(fn){
		var reCommentContents = /\/\*!?(?:\@preserve)?[ \t]*(?:\r\n|\n)([\s\S]*?)(?:\r\n|\n)[ \t]*\*\//;
	var match = reCommentContents.exec(fn.toString());

	if (!match) {
		throw new TypeError('Multiline comment missing.');
	}

	return match[1];
}

原理非常简单:
1. 在一个function中写上一段多行注释
2. 将此function toString()
3. 将多行注释内容用正则匹配出来

如何使用?

multiline(function(){/*
<!doctype html>
<html>
    <body>
        <h1>函数内巧用注释实现多行文本拼接 www.ghugo.com</h1>
    </body>
</html>
*/});

函数执行后输出:

<!doctype html>
<html>
    <body>
        <h1>函数内巧用注释实现多行文本拼接 www.ghugo.com</h1>
    </body>
</html>

利用注射巧妙的省去了字符串拼接的烦恼,那么在实际项目中是否可用?
一般在实际项目上线前,js都需要压缩,而压缩后将导致正则提取失败。

如何防止注释被压缩工具去掉?

1. uglify: 使用 /*@preserve 代替 /* 即可
2. Closure Compiler(Google): 使用 /*@preserve 代替 /*
3. YUI Compressor: 使用 /*! 代替 /*

如果需要压缩的话,可用如下方式输出:

multiline(function(){/*!@preserve
<!doctype html>
<html>
    <body>
        <h1>函数内巧用注释实现多行文本拼接 www.ghugo.com</h1>
    </body>
</html>
*/});

项目地址fork:https://github.com/hugohua/multiline

iscroll 5 源码注释

iscroll 是一个轻量级的 lib,最近在做移动端的项目,如果要模拟原生体验,少不了这类模拟原生滚动的lib。

好在代码量不多,从github上fork了iscroll的源码,就开始调试分析,网上大部分资料都是针对iscroll 4的,对iscroll 5的分析基本没有,而且连个中文API文档都没有。

在研究源码的过程中,由于对iscroll项目使用并不多,对于源码内的一些变量及条件判断也并不是很理解其使用场景及作者这样写的意图。

本次注释的是iscroll-lite.js ,因为其核心功能都包含了,代码量也少,这样理解起来更容易些。

如下是源码注释,也可以查看我的github:https://github.com/baofen14787/iscroll/blob/master/build/iscroll-lite.js

/**
 * oxScroll
 */
(function (window, document, Math) {
    /**
     * rAF 不解释
     * @type {window.requestAnimationFrame|*|Function}
     */
    var rAF = window.requestAnimationFrame	||
        window.webkitRequestAnimationFrame	||
        window.mozRequestAnimationFrame		||
        window.oRequestAnimationFrame		||
        window.msRequestAnimationFrame		||
        function (callback) { window.setTimeout(callback, 1000 / 60); };

    /**
     * g工具类处理函数
     */
    var utils = (function () {
        //将需要暴露给外界调用的方法放在me对象里,其他var声明的方法则保持为私有
        var me = {};

        /**
         * 用于判断浏览器是否支持相关的CSS3属性
         * @type {CSSStyleDeclaration}
         * @private
         */
        var _elementStyle = document.createElement('div').style;
        /**
         * 判断CSS 属性样式前缀
         */
        var _vendor = (function () {
            var vendors = ['t', 'webkitT', 'MozT', 'msT', 'OT'],
                transform,
                i = 0,
                l = vendors.length;

            for ( ; i < l; i++ ) {
                transform = vendors[i] + 'ransform';
                if ( transform in _elementStyle ) return vendors[i].substr(0, vendors[i].length-1);
            }

            return false;
        })();

        /**
         * 获取CSS 前缀
         * @param style
         * @returns {*} 返回CSS3兼容性前缀
         * @private
         */
        function _prefixStyle (style) {
            if ( _vendor === false ) return false;
            if ( _vendor === '' ) return style;
            return _vendor + style.charAt(0).toUpperCase() + style.substr(1);
        }

        /**
         * 获取时间戳
         * @type {Function}
         */
        me.getTime = Date.now || function getTime () { return new Date().getTime(); };

        /**
         *
         * @param target
         * @param obj
         */
        me.extend = function (target, obj) {
            for ( var i in obj ) {
                target[i] = obj[i];
            }
        };

        me.addEvent = function (el, type, fn, capture) {
            el.addEventListener(type, fn, !!capture);
        };

        me.removeEvent = function (el, type, fn, capture) {
            el.removeEventListener(type, fn, !!capture);
        };

        /**
         * 根据我们的拖动返回运动的长度与耗时,用于惯性拖动判断
         * @param current 当前鼠标位置
         * @param start touchStart时候记录的Y(可能是X)的开始位置,但是在touchmove时候可能被重写
         * @param time touchstart到手指离开时候经历的时间,同样可能被touchmove重写
         * @param lowerMargin y可移动的最大距离,这个一般为计算得出 this.wrapperHeight - this.scrollerHeight
         * @param wrapperSize 如果有边界距离的话就是可拖动,不然碰到0的时候便停止
         * @param deceleration 匀减速
         * @returns {{destination: number, duration: number}}
         */
        me.momentum = function (current, start, time, lowerMargin, wrapperSize, deceleration) {
            var distance = current - start,
                speed = Math.abs(distance) / time,
                destination,
                duration;

            deceleration = deceleration === undefined ? 0.0006 : deceleration;

            destination = current + ( speed * speed ) / ( 2 * deceleration ) * ( distance < 0 ? -1 : 1 );
            duration = speed / deceleration;

            if ( destination < lowerMargin ) {
                destination = wrapperSize ? lowerMargin - ( wrapperSize / 2.5 * ( speed / 8 ) ) : lowerMargin;
                distance = Math.abs(destination - current);
                duration = distance / speed;
            } else if ( destination > 0 ) {
                destination = wrapperSize ? wrapperSize / 2.5 * ( speed / 8 ) : 0;
                distance = Math.abs(current) + destination;
                duration = distance / speed;
            }

            return {
                destination: Math.round(destination),
                duration: duration
            };
        };

        var _transform = _prefixStyle('transform');

        me.extend(me, {
            hasTransform: _transform !== false,
            hasPerspective: _prefixStyle('perspective') in _elementStyle,
            hasTouch: 'ontouchstart' in window,
            hasPointer: navigator.msPointerEnabled,
            hasTransition: _prefixStyle('transition') in _elementStyle
        });

        // This should find all Android browsers lower than build 535.19 (both stock browser and webview)
        me.isBadAndroid = /Android /.test(window.navigator.appVersion) && !(/Chrome\/\d/.test(window.navigator.appVersion));

        me.extend(me.style = {}, {
            transform: _transform,
            transitionTimingFunction: _prefixStyle('transitionTimingFunction'),
            transitionDuration: _prefixStyle('transitionDuration'),
            transitionDelay: _prefixStyle('transitionDelay'),
            transformOrigin: _prefixStyle('transformOrigin')
        });

        me.hasClass = function (e, c) {
            var re = new RegExp("(^|\\s)" + c + "(\\s|$)");
            return re.test(e.className);
        };

        me.addClass = function (e, c) {
            if ( me.hasClass(e, c) ) {
                return;
            }

            var newclass = e.className.split(' ');
            newclass.push(c);
            e.className = newclass.join(' ');
        };

        me.removeClass = function (e, c) {
            if ( !me.hasClass(e, c) ) {
                return;
            }

            var re = new RegExp("(^|\\s)" + c + "(\\s|$)", 'g');
            e.className = e.className.replace(re, ' ');
        };

        me.offset = function (el) {
            var left = -el.offsetLeft,
                top = -el.offsetTop;

            // jshint -W084
            while (el = el.offsetParent) {
                left -= el.offsetLeft;
                top -= el.offsetTop;
            }
            // jshint +W084

            return {
                left: left,
                top: top
            };
        };

        me.preventDefaultException = function (el, exceptions) {
            for ( var i in exceptions ) {
                if ( exceptions[i].test(el[i]) ) {
                    return true;
                }
            }

            return false;
        };

        me.extend(me.eventType = {}, {
            touchstart: 1,
            touchmove: 1,
            touchend: 1,

            mousedown: 2,
            mousemove: 2,
            mouseup: 2,

            MSPointerDown: 3,
            MSPointerMove: 3,
            MSPointerUp: 3
        });

        /**
         * 动画函数
         * style为css3调用的
         * fn为js调用的
         */
        me.extend(me.ease = {}, {
            quadratic: {
                style: 'cubic-bezier(0.25, 0.46, 0.45, 0.94)',
                fn: function (k) {
                    return k * ( 2 - k );
                }
            },
            circular: {
                style: 'cubic-bezier(0.1, 0.57, 0.1, 1)',	// Not properly "circular" but this looks better, it should be (0.075, 0.82, 0.165, 1)
                fn: function (k) {
                    return Math.sqrt( 1 - ( --k * k ) );
                }
            },
            back: {
                style: 'cubic-bezier(0.175, 0.885, 0.32, 1.275)',
                fn: function (k) {
                    var b = 4;
                    return ( k = k - 1 ) * k * ( ( b + 1 ) * k + b ) + 1;
                }
            },
            bounce: {
                style: '',
                fn: function (k) {
                    if ( ( k /= 1 ) < ( 1 / 2.75 ) ) {
                        return 7.5625 * k * k;
                    } else if ( k < ( 2 / 2.75 ) ) {
                        return 7.5625 * ( k -= ( 1.5 / 2.75 ) ) * k + 0.75;
                    } else if ( k < ( 2.5 / 2.75 ) ) {
                        return 7.5625 * ( k -= ( 2.25 / 2.75 ) ) * k + 0.9375;
                    } else {
                        return 7.5625 * ( k -= ( 2.625 / 2.75 ) ) * k + 0.984375;
                    }
                }
            },
            elastic: {
                style: '',
                fn: function (k) {
                    var f = 0.22,
                        e = 0.4;

                    if ( k === 0 ) { return 0; }
                    if ( k == 1 ) { return 1; }

                    return ( e * Math.pow( 2, - 10 * k ) * Math.sin( ( k - f / 4 ) * ( 2 * Math.PI ) / f ) + 1 );
                }
            }
        });

        /**
         * 模拟tap事件
         * @param e
         * @param eventName
         */
        me.tap = function (e, eventName) {
            var ev = document.createEvent('Event');
            ev.initEvent(eventName, true, true);
            ev.pageX = e.pageX;
            ev.pageY = e.pageY;
            e.target.dispatchEvent(ev);
        };

        /**
         * 模拟点击事件
         * @param e
         */
        me.click = function (e) {
            var target = e.target,
                ev;

            if ( !(/(SELECT|INPUT|TEXTAREA)/i).test(target.tagName) ) {
                ev = document.createEvent('MouseEvents');
                ev.initMouseEvent('click', true, true, e.view, 1,
                    target.screenX, target.screenY, target.clientX, target.clientY,
                    e.ctrlKey, e.altKey, e.shiftKey, e.metaKey,
                    0, null);

                ev._constructed = true;
                target.dispatchEvent(ev);
            }
        };

        return me;
    })();

    function IScroll (el, options) {
        //wrapper 是iScroll的容器
        this.wrapper = typeof el == 'string' ? document.querySelector(el) : el;
        //scroller 是iScroll 滚动的元素
        this.scroller = this.wrapper.children[0];
        // scroller 的 Style对象,通过set他的属性改变样式
        this.scrollerStyle = this.scroller.style;
        //初始化参数
        this.options = {
            //步进
            snapThreshold: 0.334,

            startX: 0,
            startY: 0,
            //默认是Y轴上下滚动
            scrollY: true,
            //方向锁定阈值,比如用户点击屏幕后,滑动5px的距离后,判断用户的拖动意图,是x方向拖动还是y方向
            directionLockThreshold: 5,
            //是否有惯性缓冲动画
            momentum: true,
            //超出边界时候是否还能拖动
            bounce: true,
            //超出边界还原时间点
            bounceTime: 600,
            //超出边界返回的动画
            bounceEasing: '',
            //是否阻止默认滚动事件
            preventDefault: true,
            //当遇到表单元素则不阻止冒泡,而是弹出系统自带相应的输入控件
            preventDefaultException: { tagName: /^(INPUT|TEXTAREA|BUTTON|SELECT)$/ },

            HWCompositing: true,
            useTransition: true,
            useTransform: true
        };
        //合并配置参数
        utils.extend(this.options,options);

        /**
         * 判断是否支持3D加速
         * @type {string}
         */
        this.translateZ = this.options.HWCompositing && utils.hasPerspective ? ' translateZ(0)' : '';
        /**
         * 判断是否支持css3的transition 动画
         * @type {*|utils.hasTransition|boolean}
         */
        this.options.useTransition = utils.hasTransition && this.options.useTransition;
        /**
         * 判断是否支持css3的Transform属性
         * 一般来说 目前主流的手机都支持Transform及transition
         * @type {*|utils.hasTransform|boolean}
         */
        this.options.useTransform = utils.hasTransform && this.options.useTransform;
        /**
         * 是否支持事件穿透
         * TODO 还不明用途
         * @type {string}
         */
        this.options.eventPassthrough = this.options.eventPassthrough === true ? 'vertical' : this.options.eventPassthrough;
        /**
         * 是否阻止默认行为,这里一般设置为 true 防止页面在手机端被默认拖动
         * @type {boolean}
         */
        this.options.preventDefault = !this.options.eventPassthrough && this.options.preventDefault;
        // If you want eventPassthrough I have to lock one of the axes
        /**
         * 判断滚动的方向 X or Y
         * @type {boolean}
         */
        this.options.scrollY = this.options.eventPassthrough == 'vertical' ? false : this.options.scrollY;
        this.options.scrollX = this.options.eventPassthrough == 'horizontal' ? false : this.options.scrollX;

        // With eventPassthrough we also need lockDirection mechanism
        /**
         * 是否是双向同时自由滚动,这个属性在项目中一般用的比较少,滚动大部分都是单方向的
         * @type {boolean|*|IScroll.options.freeScroll}
         */
        this.options.freeScroll = this.options.freeScroll && !this.options.eventPassthrough;
        this.options.directionLockThreshold = this.options.eventPassthrough ? 0 : this.options.directionLockThreshold;
        /**
         * touchend后的惯性动画效果,
         * @type {*|circular}
         */
        this.options.bounceEasing = typeof this.options.bounceEasing == 'string' ? utils.ease[this.options.bounceEasing] || utils.ease.circular : this.options.bounceEasing;
        /**
         * 当window触发resize事件60ms后还原
         * PS:感觉一般用于PC端
         * TODO 后续没用的话 就删除
         * @type {number}
         */
        this.options.resizePolling = this.options.resizePolling === undefined ? 60 : this.options.resizePolling;

        if ( this.options.tap === true ) {
            this.options.tap = 'tap';
        }

// INSERT POINT: NORMALIZATION

        // Some defaults
        //一些默认 不会被重写的参数属性
        this.x = 0;
        this.y = 0;
        this.directionX = 0;
        this.directionY = 0;
        this._events = {};

// INSERT POINT: DEFAULTS
        /**
         * 初始化
         */
        this._init();
        this.refresh();

        this.scrollTo(this.options.startX, this.options.startY);
        this.enable();
    }

    IScroll.prototype = {
        version: '5.1.1',

        _init: function () {
            this._initEvents();

// INSERT POINT: _init

        },

        destroy: function () {
            this._initEvents(true);

            this._execEvent('destroy');
        },

        _transitionEnd: function (e) {
            if ( e.target != this.scroller || !this.isInTransition ) {
                return;
            }

            this._transitionTime();
            if ( !this.resetPosition(this.options.bounceTime) ) {
                this.isInTransition = false;
                this._execEvent('scrollEnd');
            }
        },

        /**
         * touchstart 触发该函数
         * @param e
         * @private
         */
        _start: function (e) {
            // React to left mouse button only
            //判断是否是鼠标左键按下的拖动
            if ( utils.eventType[e.type] != 1 ) {
                if ( e.button !== 0 ) {
                    return;
                }
            }
            /**
             * 判断是否开启拖动,是否初始化完毕 否则就呵呵。。
             */
            if ( !this.enabled || (this.initiated && utils.eventType[e.type] !== this.initiated) ) {
                return;
            }

            /**
             * 如果参数里设置了preventDefault 则 阻止默认事件
             */
            if ( this.options.preventDefault && !utils.isBadAndroid && !utils.preventDefaultException(e.target, this.options.preventDefaultException) ) {
                e.preventDefault();
            }

            var point = e.touches ? e.touches[0] : e,
                pos;

            this.initiated	= utils.eventType[e.type];
            this.moved		= false;
            this.distX		= 0;
            this.distY		= 0;
            this.directionX = 0;
            this.directionY = 0;
            this.directionLocked = 0;
            //开启动画时间,如果之前有动画的话,便要停止动画,这里因为没有传时间,所以动画便直接停止了
            //用于停止拖动产生的惯性动作(touchstart时页面可能正在滚动)
            this._transitionTime();
            //记录下 touch start 的事件
            this.startTime = utils.getTime();
            //如果正在动画状态,则让页面停止在手指触摸处
            if ( this.options.useTransition && this.isInTransition ) {
                this.isInTransition = false;
                //获取x,y坐标值
                pos = this.getComputedPosition();
//            debugger;
                //touchstart 时 让正在滚动的页面停止下来
                this._translate(Math.round(pos.x), Math.round(pos.y));
                this._execEvent('scrollEnd');
            } else if ( !this.options.useTransition && this.isAnimating ) {
                this.isAnimating = false;
                this._execEvent('scrollEnd');
            }
            //重设一些参数
            this.startX    = this.x;
            this.startY    = this.y;
            this.absStartX = this.x;
            this.absStartY = this.y;
            this.pointX    = point.pageX;
            this.pointY    = point.pageY;

            this._execEvent('beforeScrollStart');
        },

        /**
         * touchmove时调用的函数.
         * @param e
         * @private
         */
        _move: function (e) {
            /**
             * TODO 这里做事件类型的判断是啥意思?
             */
            if ( !this.enabled || utils.eventType[e.type] !== this.initiated ) {
                return;
            }
            if ( this.options.preventDefault ) {	// increases performance on Android? TODO: check!
                e.preventDefault();
            }

            /**
             * 记录当前移动的一些数据,为dom移动做准备
             * @type {*}
             */
            var point		= e.touches ? e.touches[0] : e,             //
                deltaX		= point.pageX - this.pointX,                //拖动的距离X 这里的值每300ms刷新一次的距离 即小段小段的距离
                deltaY		= point.pageY - this.pointY,                //拖动的距离X
                timestamp	= utils.getTime(),                          //拖动时候的时间戳
                newX, newY,                                             //拖动的目的地 X Y 距离
                absDistX, absDistY;                                     //距离的绝对值,用于判断滚动方向

            this.pointX		= point.pageX;
            this.pointY		= point.pageY;

            this.distX		+= deltaX;                                  //拖动的距离
            this.distY		+= deltaY;
            absDistX		= Math.abs(this.distX);
            absDistY		= Math.abs(this.distY);
            // We need to move at least 10 pixels for the scrolling to initiate
            //滑动的时间大于300ms 并且距离小于10px 则不滑动
            if ( timestamp - this.endTime > 300 && (absDistX < 10 && absDistY < 10) ) {
                return;
            }
            /**
             * 这里根据10px的距离来做拖动方向判断,判断用户拖动的意图
             */
            // If you are scrolling in one direction lock the other
            if ( !this.directionLocked && !this.options.freeScroll ) {
                if ( absDistX > absDistY + this.options.directionLockThreshold ) {
                    this.directionLocked = 'h';		// lock horizontally
                } else if ( absDistY >= absDistX + this.options.directionLockThreshold ) {
                    this.directionLocked = 'v';		// lock vertically
                } else {
                    this.directionLocked = 'n';		// no lock
                }
            }
            //横向滚动Y
            if ( this.directionLocked == 'h' ) {
                if ( this.options.eventPassthrough == 'vertical' ) {
                    e.preventDefault();
                } else if ( this.options.eventPassthrough == 'horizontal' ) {
                    this.initiated = false;
                    return;
                }

                deltaY = 0;
            } else if ( this.directionLocked == 'v' ) {
                if ( this.options.eventPassthrough == 'horizontal' ) {
                    e.preventDefault();
                } else if ( this.options.eventPassthrough == 'vertical' ) {
                    this.initiated = false;
                    return;
                }

                deltaX = 0;
            }
            //拖动的距离
            deltaX = this.hasHorizontalScroll ? deltaX : 0;
            deltaY = this.hasVerticalScroll ? deltaY : 0;
            //将当前位置 加上 位移 得出实际移动的距离
            newX = this.x + deltaX;
            newY = this.y + deltaY;
            // Slow down if outside of the boundaries
            /**
             * 如果拖动已经超出边界了,则减慢拖动的速度
             */
            if ( newX > 0 || newX < this.maxScrollX ) {
                newX = this.options.bounce ? this.x + deltaX / 3 : newX > 0 ? 0 : this.maxScrollX;
            }
            if ( newY > 0 || newY < this.maxScrollY ) {
                newY = this.options.bounce ? this.y + deltaY / 3 : newY > 0 ? 0 : this.maxScrollY;
            }

            /**
             * TODO 干嘛的?
             * @type {number}
             */
            this.directionX = deltaX > 0 ? -1 : deltaX < 0 ? 1 : 0;
            this.directionY = deltaY > 0 ? -1 : deltaY < 0 ? 1 : 0;
            //第一次拖动时的回调
            if ( !this.moved ) {
                this._execEvent('scrollStart');
            }

            this.moved = true;

            this._translate(newX, newY);

            /* REPLACE START: _move */
            /**
             * 每300ms会重置一次当前位置以及开始时间,这个就是为什么我们在抓住不放很久突然丢开仍然有长距离移动的原因,这个比较精妙哦
             */
            if ( timestamp - this.startTime > 300 ) {
                this.startTime = timestamp;
                this.startX = this.x;
                this.startY = this.y;
            }

            /* REPLACE END: _move */

        },

        _end: function (e) {
            if ( !this.enabled || utils.eventType[e.type] !== this.initiated ) {
                return;
            }

            if ( this.options.preventDefault && !utils.preventDefaultException(e.target, this.options.preventDefaultException) ) {
                e.preventDefault();
            }

            /**
             * 在手指离开屏幕前 保存一些相关的数据
             * @type {*}
             */
            var point = e.changedTouches ? e.changedTouches[0] : e,
                momentumX,
                momentumY,
                duration = utils.getTime() - this.startTime,        //拖动的耗时,这里并不是touchstart之间的耗时,在_move() 里 每隔300ms 更新一下时间的
                newX = Math.round(this.x),
                newY = Math.round(this.y),
                distanceX = Math.abs(newX - this.startX),           //拖动的距离
                distanceY = Math.abs(newY - this.startY),
                time = 0,
                easing = '';
            //重置一些参数
            this.isInTransition = 0;        //是否处于css动画状态
            this.initiated = 0;             //是否初始化
            this.endTime = utils.getTime();

            // reset if we are outside of the boundaries
            /**
             * 若超出边界,则将重设位置 不再执行后面逻辑
             */
            if ( this.resetPosition(this.options.bounceTime) ) {
                return;
            }
            //惯性拖动距离
            this.scrollTo(newX, newY);	// ensures that the last position is rounded

            // we scrolled less than 10 pixels
            if ( !this.moved ) {
                if ( this.options.tap ) {
                    utils.tap(e, this.options.tap);
                }

                if ( this.options.click ) {
                    utils.click(e);
                }

                this._execEvent('scrollCancel');
                return;
            }

            if ( this._events.flick && duration < 200 && distanceX < 100 && distanceY < 100 ) {
                this._execEvent('flick');
                return;
            }

            // start momentum animation if needed
            /**
             * 如果需要惯性移动的话 则运行如下计算公式等
             * 根据动力加速度计算出来的动画参数
             * 计算出相关的距离
             */
            if ( this.options.momentum && duration < 300 ) {
                momentumX = this.hasHorizontalScroll ? utils.momentum(this.x, this.startX, duration, this.maxScrollX, this.options.bounce ? this.wrapperWidth : 0, this.options.deceleration) : { destination: newX, duration: 0 };
                momentumY = this.hasVerticalScroll ? utils.momentum(this.y, this.startY, duration, this.maxScrollY, this.options.bounce ? this.wrapperHeight : 0, this.options.deceleration) : { destination: newY, duration: 0 };
                newX = momentumX.destination;
                newY = momentumY.destination;
                time = Math.max(momentumX.duration, momentumY.duration);
                this.isInTransition = 1;
            }

// INSERT POINT: _end
            if ( newX != this.x || newY != this.y ) {
                // change easing function when scroller goes out of the boundaries
                /**
                 * 如果有惯性移动 并且惯性移动超出了边界,则开启css3动画的回弹效果
                 */
                if ( newX > 0 || newX < this.maxScrollX || newY > 0 || newY < this.maxScrollY ) {
                    easing = utils.ease.quadratic;
                }

                this.scrollTo(newX, newY, time, easing);
                return;
            }

            this._execEvent('scrollEnd');
        },

        _resize: function () {
            var that = this;

            clearTimeout(this.resizeTimeout);

            this.resizeTimeout = setTimeout(function () {
                that.refresh();
            }, this.options.resizePolling);
        },

        /**
         * 重置位置信息
         * @param time
         * @returns {boolean}
         */
        resetPosition: function (time) {
            var x = this.x,
                y = this.y;

            time = time || 0;

            if ( !this.hasHorizontalScroll || this.x > 0 ) {
                x = 0;
            } else if ( this.x < this.maxScrollX ) {
                x = this.maxScrollX;
            }

            if ( !this.hasVerticalScroll || this.y > 0 ) {
                y = 0;
            } else if ( this.y < this.maxScrollY ) {
                y = this.maxScrollY;
            }

            if ( x == this.x && y == this.y ) {
                return false;
            }

            this.scrollTo(x, y, time, this.options.bounceEasing);

            return true;
        },

        /**
         * 禁用iscroll
         */
        disable: function () {
            this.enabled = false;
        },
        /**
         * 开启iscroll
         */
        enable: function () {
            this.enabled = true;
        },

        /**
         * 更新iscroll的相关信息,一般用于初始化时获取页面的相关数据以便后续调用
         * 在异步加载、旋转屏幕时也调用该函数 重新获取页面数据
         */
        refresh: function () {
            var rf = this.wrapper.offsetHeight;		// Force reflow

            this.wrapperWidth	= this.wrapper.clientWidth;
            this.wrapperHeight	= this.wrapper.clientHeight;

            /* REPLACE START: refresh */

            this.scrollerWidth	= this.scroller.offsetWidth;
            this.scrollerHeight	= this.scroller.offsetHeight;

            this.maxScrollX		= this.wrapperWidth - this.scrollerWidth;
            this.maxScrollY		= this.wrapperHeight - this.scrollerHeight;

            /* REPLACE END: refresh */

            this.hasHorizontalScroll	= this.options.scrollX && this.maxScrollX < 0;
            this.hasVerticalScroll		= this.options.scrollY && this.maxScrollY < 0;

            if ( !this.hasHorizontalScroll ) {
                this.maxScrollX = 0;
                this.scrollerWidth = this.wrapperWidth;
            }

            if ( !this.hasVerticalScroll ) {
                this.maxScrollY = 0;
                this.scrollerHeight = this.wrapperHeight;
            }

            this.endTime = 0;
            this.directionX = 0;
            this.directionY = 0;

            this.wrapperOffset = utils.offset(this.wrapper);

            this._execEvent('refresh');

            this.resetPosition();

// INSERT POINT: _refresh

        },

        on: function (type, fn) {
            if ( !this._events[type] ) {
                this._events[type] = [];
            }

            this._events[type].push(fn);
        },

        off: function (type, fn) {
            if ( !this._events[type] ) {
                return;
            }

            var index = this._events[type].indexOf(fn);

            if ( index > -1 ) {
                this._events[type].splice(index, 1);
            }
        },
        /**
         * 类似于zepto的 triiger ,事件触发器
         * @param type
         * @private
         */
        _execEvent: function (type) {
            if ( !this._events[type] ) {
                return;
            }

            var i = 0,
                l = this._events[type].length;

            if ( !l ) {
                return;
            }

            for ( ; i < l; i++ ) {
                this._events[type][i].apply(this, [].slice.call(arguments, 1));
            }
        },

        scrollBy: function (x, y, time, easing) {
            x = this.x + x;
            y = this.y + y;
            time = time || 0;

            this.scrollTo(x, y, time, easing);
        },

        /**
         *
         * @param  x 为移动的x轴坐标
         * @param y 为移动的y轴坐标
         * @param time 为移动时间
         * @param easing 为移动的动画效果
         */
        scrollTo: function (x, y, time, easing) {
            easing = easing || utils.ease.circular;

            this.isInTransition = this.options.useTransition && time > 0;
            //如果有css动画 则直接调用css3移动
            if ( !time || (this.options.useTransition && easing.style) ) {
                //设置相关的css3动画属性及位置 直接位移过去
                this._transitionTimingFunction(easing.style);
                this._transitionTime(time);
                this._translate(x, y);
            } else {
                this._animate(x, y, time, easing.fn);
            }
        },

        /**
         * 这个方法实际上是对scrollTo的进一步封装,滚动到相应的元素区域。
         * @param el 为需要滚动到的元素引用
         * @param time 为滚动时间
         * @param offsetX 为X轴偏移量
         * @param offsetY 为Y轴偏移量
         * @param easing 动画效果
         */
        scrollToElement: function (el, time, offsetX, offsetY, easing) {
            el = el.nodeType ? el : this.scroller.querySelector(el);

            if ( !el ) {
                return;
            }

            var pos = utils.offset(el);

            pos.left -= this.wrapperOffset.left;
            pos.top  -= this.wrapperOffset.top;

            // if offsetX/Y are true we center the element to the screen
            if ( offsetX === true ) {
                offsetX = Math.round(el.offsetWidth / 2 - this.wrapper.offsetWidth / 2);
            }
            if ( offsetY === true ) {
                offsetY = Math.round(el.offsetHeight / 2 - this.wrapper.offsetHeight / 2);
            }

            pos.left -= offsetX || 0;
            pos.top  -= offsetY || 0;

            pos.left = pos.left > 0 ? 0 : pos.left < this.maxScrollX ? this.maxScrollX : pos.left;
            pos.top  = pos.top  > 0 ? 0 : pos.top  < this.maxScrollY ? this.maxScrollY : pos.top;

            time = time === undefined || time === null || time === 'auto' ? Math.max(Math.abs(this.x-pos.left), Math.abs(this.y-pos.top)) : time;

            this.scrollTo(pos.left, pos.top, time, easing);
        },

        /**
         * css3 动画时长
         * @param time 动画时间 单位ms 如果不传参数 则为0 ,即是直接停止动画
         * @private
         */
        _transitionTime: function (time) {
            time = time || 0;

            this.scrollerStyle[utils.style.transitionDuration] = time + 'ms';

            if ( !time && utils.isBadAndroid ) {
                this.scrollerStyle[utils.style.transitionDuration] = '0.001s';
            }

// INSERT POINT: _transitionTime

        },

        /**
         * CSS3 动画函数
         * @param easing
         * @private
         */
        _transitionTimingFunction: function (easing) {
            this.scrollerStyle[utils.style.transitionTimingFunction] = easing;

// INSERT POINT: _transitionTimingFunction

        },

        /**
         * 动画位移 如果支持css3 动画 则使用transform进行位移
         * iscorll里都是靠它进行移动的
         * @param x
         * @param y
         * @private
         */
        _translate: function (x, y) {
            if ( this.options.useTransform ) {
                var me = this;
                /* REPLACE START: _translate */
                //将上rAF位移
                rAF(function(){
                    me.scrollerStyle[utils.style.transform] = 'translate(' + x + 'px,' + y + 'px)' + me.translateZ;
                });

                /* REPLACE END: _translate */

            } else {
                x = Math.round(x);
                y = Math.round(y);
                this.scrollerStyle.left = x + 'px';
                this.scrollerStyle.top = y + 'px';
            }

            this.x = x;
            this.y = y;

// INSERT POINT: _translate

        },

        /**
         * 页面初始化时候的一些事件 如果传参数则是取消事件绑定 不传的话 就是添加事件绑定
         * @param remove
         * @private
         */
        _initEvents: function (remove) {
            var eventType = remove ? utils.removeEvent : utils.addEvent,
            //bindToWrapper 貌似官网没有特别说明,这里意思就是相对应window的事件绑定
                target = this.options.bindToWrapper ? this.wrapper : window;
            //旋转屏幕事件
            eventType(window, 'orientationchange', this);

            eventType(window, 'resize', this);

            if ( this.options.click ) {
                eventType(this.wrapper, 'click', this, true);
            }

            /**
             * 判断机型做相应的事件绑定
             * 针对PC的touch 事件
             */
            if ( !this.options.disableMouse ) {
                eventType(this.wrapper, 'mousedown', this);
                eventType(target, 'mousemove', this);
                eventType(target, 'mousecancel', this);
                eventType(target, 'mouseup', this);
            }

            /**
             * 针对win phone的touch事件
             */
            if ( utils.hasPointer && !this.options.disablePointer ) {
                eventType(this.wrapper, 'MSPointerDown', this);
                eventType(target, 'MSPointerMove', this);
                eventType(target, 'MSPointerCancel', this);
                eventType(target, 'MSPointerUp', this);
            }

            /**
             * 针对ios & Android的touch事件
             */
            if ( utils.hasTouch && !this.options.disableTouch ) {
                eventType(this.wrapper, 'touchstart', this);
                eventType(target, 'touchmove', this);
                eventType(target, 'touchcancel', this);
                eventType(target, 'touchend', this);
            }

            /**
             * css3 动画结束后的的回调事件
             */
            eventType(this.scroller, 'transitionend', this);
            eventType(this.scroller, 'webkitTransitionEnd', this);
            eventType(this.scroller, 'oTransitionEnd', this);
            eventType(this.scroller, 'MSTransitionEnd', this);
        },

        /**
         * 获得一个DOM的实时样式样式,在touchstart时候保留DOM样式状态十分有用
         * @returns {{x: *, y: *}} 返回x,y坐标的位移
         */
        getComputedPosition: function () {
            var matrix = window.getComputedStyle(this.scroller, null),
                x, y;
            //如果是css3 位移,则位移的距离从matrix获取,否则直接获取left top 的传统位移值
            if ( this.options.useTransform ) {
//            console.info(matrix[utils.style.transform])
                //css3的matrix矩阵,eg:matrix[utils.style.transform]的值为 matrix(1, 0, 0, 1, -642, 0)
                matrix = matrix[utils.style.transform].split(')')[0].split(', ');
                x = +(matrix[12] || matrix[4]);
                y = +(matrix[13] || matrix[5]);
            } else {
                x = +matrix.left.replace(/[^-\d.]/g, '');
                y = +matrix.top.replace(/[^-\d.]/g, '');
            }

            return { x: x, y: y };
        },

        /**
         * 如果启用了CSS3的动画,便会使用CSS3动画方式进行动画,否则使用_animate方法(js实现方案)
         * 这里使用了RAF的动画 用于保证动画的流程性
         * @param destX
         * @param destY
         * @param duration
         * @param easingFn
         * @private
         */
        _animate: function (destX, destY, duration, easingFn) {
            var that = this,
                startX = this.x,
                startY = this.y,
                startTime = utils.getTime(),
                destTime = startTime + duration;

            function step () {
                var now = utils.getTime(),
                    newX, newY,
                    easing;

                if ( now >= destTime ) {
                    that.isAnimating = false;
                    that._translate(destX, destY);

                    if ( !that.resetPosition(that.options.bounceTime) ) {
                        that._execEvent('scrollEnd');
                    }

                    return;
                }

                now = ( now - startTime ) / duration;
                easing = easingFn(now);
                newX = ( destX - startX ) * easing + startX;
                newY = ( destY - startY ) * easing + startY;
                that._translate(newX, newY);
                //自我调用的方式(递归)来执行动画
                if ( that.isAnimating ) {
                    rAF(step);
                }
            }

            this.isAnimating = true;
            step();
        },
        /**
         * 统一的事件处理对象
         * @param e
         */
        handleEvent: function (e) {
            switch ( e.type ) {
                case 'touchstart':
                case 'MSPointerDown':
                case 'mousedown':
                    this._start(e);
                    break;
                case 'touchmove':
                case 'MSPointerMove':
                case 'mousemove':
                    this._move(e);
                    break;
                case 'touchend':
                case 'MSPointerUp':
                case 'mouseup':
                case 'touchcancel':
                case 'MSPointerCancel':
                case 'mousecancel':
                    this._end(e);
                    break;
                case 'orientationchange':
                case 'resize':
                    this._resize();
                    break;
                case 'transitionend':
                case 'webkitTransitionEnd':
                case 'oTransitionEnd':
                case 'MSTransitionEnd':
                    this._transitionEnd(e);
                    break;
                case 'wheel':
                case 'DOMMouseScroll':
                case 'mousewheel':
                    this._wheel(e);
                    break;
                case 'keydown':
                    this._key(e);
                    break;
                case 'click':
                    if ( !e._constructed ) {
                        e.preventDefault();
                        e.stopPropagation();
                    }
                    break;
            }
        }
    };
    /**
     * 将utils工具类函数归到iscroll下面 方便开发者调用
     */
    IScroll.utils = utils;
    /**
     * 一些CMD AMD的实现 如require.js sea.js 等
     */
    if ( typeof module != 'undefined' && module.exports ) {
        module.exports = IScroll;
    } else {
        window.IScroll = IScroll;
    }

})(window, document, Math);


jQuery实现的ajax队列(queue)

先来看个需求,页面上有2个ajax call。其中一个ajax需要另一个ajax的数据才能操作。如下面这段代码所描述的

$(function(){
    var a_data;
    $.ajax({
        url: "test.php",
        success: function(data){
            a_data = data;
        },
    });
    $.ajax({
        url: "test.php",
        success: function(data){
            if(a_data == "5"){
                //....
            }
        },
    });
});

第二个ajax的操作,需要等待第一个ajax的数据才能进行。(ps:当然以上写法是错误的,这里只是描述这个需求)

相信不少人都遇到ajax queue 队列的问题。好在自从jquery 1.3 以后,有个function能够很好的支持队列,那就是queue

queue(name)
返回指向第一个匹配元素的队列(将是一个函数数组)

要实现ajax队列,可以将ajax引入queue中。如下代码实现:

// 第一个ajax请求
$(document).queue("ajaxRequests", function(){
    //全局变量,储存第一个ajax请求数据
    var a_data;
    $.ajax({
        success: function(data){
            a_data = data;
            $(document).dequeue("myName");
        }
    });
});
// 第二个ajax请求
$(document).queue("ajaxRequests", function() {
  $.ajax({
    success: function(data) {
      alert(a_data);
      $(document).dequeue("myName");
    }
  });
});
// 触发queue往下执行
$(document).dequeue("ajaxRequests");

以上代码实现了ajax队列,2个ajax同步执行,其中dequeue用来结束当前ajax,并调用下一个ajax请求。

接下来,我们再来看看另一个ajax 队列的需求(需求二):
在注册的时候验证邮箱、用户名等时候,单个客户端可以频繁发出无数的ajax请求出去,而我们的结果肯定是以最后一个ajax请求为准的。
首先模拟一个服务端页面

<?PHP
    sleep(5);
    exit(time().'');
?>

然后是前台页面,假设由一个元素触发:
html代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
        <title>测试ajax队列</title>
    </head>
<body>
    <div id="dtitle">点此触发</div>
</body>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="test.js"></script>
</html>

JS代码:

$(function(){
    $("body").queue([]);
    $("#dtitle").click(function(){
        $("body").queue(function(){
            $.get("test.php?t=" + new Date().getMilliseconds(), function(){
                //这一句让queue往下执行;
                $("body").dequeue();
                if ($("body").queue().length == 0)
                    alert("done");
            });
        });
    });
});

下面是firebug下的执行结果,我连续对dtitle元素点击三次,如愿每5秒才发送一次请求。当然这只是演示的原理,既然发了三次请求,肯定要以最后一次为准,那么可以通过队列的length属性来轮循,一时length变为0了,就是全部请求结束了,你就可以执行你想要的逻辑了

好了,通过上面的代码,应该对queue的用法和ajax队列有一定了解了。人总是要不断追求完美的,粗矿的代码,并不能提升代码水平。既然队列那么常用,那是否需要将这个功能封装?答案是肯定的。网上也有一些已经封装好了的插件。
那就重写$.ajax 这个方法吧。说干就干:

(function($) {
    var ajax = $.ajax,
        pendingRequests = {},
        synced = [],
        syncedData = [],
        ajaxRunning = [];
    $.ajax = function(settings) {
        // create settings for compatibility with ajaxSetup
        settings = jQuery.extend(settings, jQuery.extend({}, jQuery.ajaxSettings, settings));
        var port = settings.port;
        switch (settings.mode) {
            case "abort":
                if (pendingRequests[port]) {
                    pendingRequests[port].abort();
                }
                return pendingRequests[port] = ajax.apply(this, arguments);
            case "queue":
                var _old = settings.complete;
                settings.complete = function() {
                    if (_old) {
                        _old.apply(this, arguments);
                    }
                    if (jQuery([ajax]).queue("ajax" + port).length > 0) {
                        jQuery([ajax]).dequeue("ajax" + port);
                    } else {
                        ajaxRunning[port] = false;
                    }
                };
                jQuery([ajax]).queue("ajax" + port, function() {
                    ajax(settings);
                });
                if (jQuery([ajax]).queue("ajax" + port).length == 1 && !ajaxRunning[port]) {
                    ajaxRunning[port] = true;
                    jQuery([ajax]).dequeue("ajax" + port);
                }
                return;
            case "sync":
                var pos = synced.length;
                synced[pos] = {
                    error: settings.error,
                    success: settings.success,
                    complete: settings.complete,
                    done: false
                };
                syncedData[pos] = {
                    error: [],
                    success: [],
                    complete: []
                };
                settings.error = function() { syncedData[pos].error = arguments; };
                settings.success = function() { syncedData[pos].success = arguments; };
                settings.complete = function() {
                    syncedData[pos].complete = arguments;
                    synced[pos].done = true;
                    if (pos == 0 || !synced[pos - 1])
                        for (var i = pos; i < synced.length && synced[i].done; i++) {
                        if (synced[i].error) synced[i].error.apply(jQuery, syncedData[i].error);
                        if (synced[i].success) synced[i].success.apply(jQuery, syncedData[i].success);
                        if (synced[i].complete) synced[i].complete.apply(jQuery, syncedData[i].complete);
                        synced[i] = null;
                        syncedData[i] = null;
                    }
                };
        }
        return ajax.apply(this, arguments);
    };
})(jQuery);

以上代码加入了1个mode变量,有3个值”abort”(中止),”queue”(队列),”sync”同步。

对于需求二,我们用这个封装好的ajax改写并改进下,js代码部分如下:

$(function(){
    $("body").queue([]);
    $("#dtitle").click(function(){
        $.ajax({
            url: "test.php?t=" + new Date().getMilliseconds(),
            success: function(html){
                jQuery("ul").append(html);
            },
            //用abort而不用queue,是因为需求是需要最后一个ajax request,而之前的ajax request
            //其实并没有用,那何必要等它们执行完呢?中途就可以把它中止掉
            mode: "abort"
        });
    });
});

看到这里,相信你已经完全了解ajax队列了。就算不了解,你也可以直接用封装好的那段js代码,直接用mode: “abort”
就可以了。

再谈mobile web retina 下 1px 边框解决方案

本文实际上想说的是ios8下 1px解决方案。 1px的边框在devicePixelRatio = 2的retina屏下会显示成2px,在iphone 6 plug 下,更显示成3px。由其影响美感。

还好,时代总是进步的。也许很多人都不知道,现在IOS8下,已经支持0.5px了。。 那么意味着,在devicePixelRatio = 2下,我们可以使用如下的css代码:

但是在ios7以下,android等其他系统里,0.5px会被显示为0px,即该解决方案需要写hack兼容老旧系统。

三种方案:

1、JS判断UA,是否是ios8+,是的话则输出类名hairlines,为了防止重绘,这段代码加在head里即可。

if (/iP(hone|od|ad)/.test(navigator.userAgent)) {
	var v = (navigator.appVersion).match(/OS (\d+)_(\d+)_?(\d+)?/),
		version = parseInt(v[1], 10);
	if(version >= 8){
		document.documentElement.classList.add('hairlines')
	}
}

2、JS判断是否支持0.5px边框,是的话,则输出类名hairlines

if (window.devicePixelRatio && devicePixelRatio >= 2) {
  var testElem = document.createElement('div');
  testElem.style.border = '.5px solid transparent';
  document.body.appendChild(testElem);
  if (testElem.offsetHeight == 1)
  {
    document.querySelector('html').classList.add('hairlines');
  }
  document.body.removeChild(testElem);
}
// This assumes this script runs in <body>, if it runs in <head> wrap it in $(document).ready(function() {   })

相比于第一种方法,这种方法的可靠性更高一些,但是需要把js放在body标签内,相对来说会有一些重绘,个人建议是用第一种方法。

3、服务端做ios版本判断,输出相应的类名

相比于JS的实现,个人更倾向于在服务端完成,这样前端也少几行代码,并且更加可靠。

如在wormhole里的实现(wormhole是nodejs环境下的一个服务端渲染模版的容器)

{{#if($plugins.detector.os.name === "ios" && $plugins.detector.os.version >= 8)}}
    {{set (hairlines = "hairlines")}}
{{/if}}
<html class="{{hairlines}}">

加上类名后,就可以针对该类名写相应的css了。比如:

div{border:1px solid #000}
.hairlines div{border-width:0.5px}

也许你会问,那ios7以下和其他android机下怎么搞?我的建议是:还是维持老样,不去处理,随着时间的推移,我相信最终都会支持0.5 和 0.3 px边框的。

如果硬要兼容,怎么整?方案也有很多,稍微介绍下:

1、通过viewport + REM的方式来兼容。

目前这种兼容方案相对比较完美,适合新项目(老项目改用REM单位成本会比较高)。淘宝M首页就是这种方案。

在devicePixelRatio = 2 时,输出viewport

<meta name="viewport" content="initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5, user-scalable=no">

在devicePixelRatio = 3 时,输出viewport

<meta name="viewport" content="initial-scale=0.3333333333333333, maximum-scale=0.3333333333333333, minimum-scale=0.3333333333333333, user-scalable=no">

同时通过设置对应viewport的rem基准值,这种方式就可以像以前一样轻松愉快的写1px了。关于REM布局,可以参考下我上一篇文章《移动端H5页面之iphone6的适配》

其他方案(该部分内容来源于妙净同学的分享):

2、 transform: scale(0.5)

实现方式

height:1px;
-webkit-transform: scaleY(0.5);
-webkit-transform-origin:0 0;
overflow: hidden;

优点

圆角无法实现,hack代码多,实现4条边框比较闹心

缺点

只能单独使用,如果嵌套,scale的作用也会对包含的元素产生,不想要的影响,所以此种方案配合:after和:before独立使用较多,比如画一个商品的边框四条线,容器的after和before可以画2条线,利用容器的父元素的after、before再画2条线。

.after-scale{
    position: relative;
}
.after-scale:after{
    content:"";
    position: absolute;
    bottom:0px;
    left:0px;
    right:0px;
    border-bottom:1px solid #c8c7cc;
    -webkit-transform:scaleY(.5);
    -webkit-transform-origin:0 0;
}

3、 box-shadow

实现方式

利用css 对阴影处理的方式实现0.5px的效果

底部一条线

-webkit-box-shadow:0 1px 1px -1px rgba(0, 0, 0, 0.5);

优点
基本所有场景都能满足,包含圆角的button,单条,多条线,

缺点

颜色不好处理, 黑色 rgba(0,0,0,1) 最浓的情况了。有阴影出现,不好用。

参考链接

4、 background-image

实现方式

设置1px通过css 实现的image,50%有颜色,50%透明

.border {
        background-image:linear-gradient(180deg, red, red 50%, transparent 50%),
        linear-gradient(270deg, red, red 50%, transparent 50%),
        linear-gradient(0deg, red, red 50%, transparent 50%),
        linear-gradient(90deg, red, red 50%, transparent 50%);
        background-size: 100% 1px,1px 100% ,100% 1px, 1px 100%;
        background-repeat: no-repeat;
        background-position: top, right top,  bottom, left top;
        padding: 10px;
    }

优点

配合background-image,background-size,background-position 可以实现单条,多条边框。边框的颜色随意设置

缺点

如果有圆角的效果,很sorry 圆角的地方没有线框的颜色。都要写的代码也不少

参考链接

5、 用图片

实现方式

.border-image{
    border-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAECAYAAABP2FU6AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAB5JREFUeNpiPnH8zH/G////MzAxAAHTyRNn/wMEGABpvQm9g9TJ1QAAAABJRU5ErkJggg==") 2 0 stretch;
border-width: 0px 0px 1px;
}

优点

缺点

也可以通过修改图片来达到圆角的效果,但是由于图片的原因,压缩过后的图片边缘变模糊了(不放大的情况下不明显),需要引用图片或者base64,边框颜色修改起来不方便。

参考:http://dieulot.net/css-retina-hairline

移动端H5页面 iphone6的适配技巧

iphone6 及 iphone 6 plus 已经出来一段时间了。很多移动端网站,以前写死body 为320px的,现在估计也忙着做适配了。

大屏幕手机其实一直有,只是以前大家没怎么重视,移动端的H5页面大部分都以320px为基准宽度进行布局,那些大屏屌丝android用户也懒得去理,而现在iphone也搞起多屏幕,老板们重视程度就不一样了。

回归正题,兼容iphone各版本机型最佳的方式就是 自适应

1、viewport 简单粗暴的方式:

<meta name="viewport" content="width=320,maximum-scale=1.3,user-scalable=no">

直接设置viewport为320px的1.3倍,将页面放大1.3倍。

为什么是1.3?

目前大部分页面都是以320px为基准的布局,而iphone6的宽度比是375/320 = 1.171875,iphone6+则是 414/320 = 1.29375
那么以1.29倍也就约等于1.3了。

这方式也是活动页面快速适配ip6+的不二选择!

2、ip6+ 的CSS media query

@media (min-device-width : 375px) and (max-device-width : 667px) and (-webkit-min-device-pixel-ratio : 2){
    /*iphone 6*/
}

@media (min-device-width : 414px) and (max-device-width : 736px) and (-webkit-min-device-pixel-ratio : 3){
    /*iphone 6 plus*/
}

PS: 也可以直接使用实际的device-width:如device-width : 375px

在原有页面的基础上,再针对相应的屏幕大小单独写样式做适配。

3、REM布局

REM是CSS3新增的一种单位,并且移动端的支持度很高,android2.x+,ios5+ 都支持。
REM是相对于dom结构的根元素来设置大小,也就是html这个元素。相较于em单位,rem使用上更容易理解及运用。

REM布局也是目前多屏幕适配的最佳方式

REM与PX的换算可以查看网址:https://offroadcode.com/prototypes/rem-calculator/

假设,html我们设置font-size:12px; 也就是说12px相对于1rem,那么18px也就是 18/12 = 1.5rem。

那么我们以320px的设计布局为基准,将html设置为font-size:100px,即100px = 1rem。(设置100px是为了方便计算)那么可以将大部分px单位除以100就可以直接改成rem单位了。

REM如何做响应式布局?

1、如果仅仅是适配ip6+设备,那么使用media query就行。
伪代码如下:

/*320px布局*/
html{font-size: 100px;}
body{font-size: 0.14rem /*实际相当于14px*/}

/* iphone 6 */
@media (min-device-width : 375px) and (max-device-width : 667px) and (-webkit-min-device-pixel-ratio : 2){
    html{font-size: 117.1875px;}
}
/* iphone6 plus */
@media (min-device-width : 414px) and (max-device-width : 736px) and (-webkit-min-device-pixel-ratio : 3){
    html{font-size: 129.375px;}
}

这样,在ip6下,也就将页面内的元素放大了1.17倍,ip6+下也就是放大了1.29倍。

2、如果是完全自适应,那么可以通过JS来控制。

(function (doc, win) {
    var docEl = doc.documentElement,
        resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
        recalc = function () {
            var clientWidth = docEl.clientWidth;
            if (!clientWidth) return;
            docEl.style.fontSize = 100 * (clientWidth / 320) + 'px';
        };

    // Abort if browser does not support addEventListener
    if (!doc.addEventListener) return;
    win.addEventListener(resizeEvt, recalc, false);
    doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);

页面初始化的时候计算font-size,然后再绑定resize事件。这种效果就和百分比布局一样了。

3、那么用REM做单位与百分比做单位有什么优势?

主要优势在于能更好的控制元素大小【可控性强】。(一般百分比应用在布局层,一般常见设置为50%,33.3%,25%之类的整数居多,难以运用在复杂的页面小部件内)。
但是相比百分比布局,需要借助JS或media query实现,略有一点瑕疵。

DEMO地址

See the Pen Jojaqw by hugo (@baofen14787) on CodePen.

说明:使用REM布局必须选好基准宽度,如第2小点的JS实现,是以320px为基准设置的REM,若后续我们设计稿都改成以ip6为基准的375进行设计时,这个REM也要相应的做调整。

4、图片自适应

刚说完REM布局,那么用百分比布局也能实现一样的效果,但是用百分比布局,必须要面临一个问题:
图片宽度100%,页面加载时会存在高度塌陷的问题。

1

如图:页面加载时图片高度默认不存在。

那么可以用padding-top设置百分比值来实现自适应。

公式如下:

padding-top = (Image Height / Image Width) * 100%

原理:padding-top值为百分比时,取值是是相对于宽度的。

相关代码实现:

<div class="cover">
    ![](http://g.ald.alicdn.com/bao/uploaded/i1/TB1d6QqGpXXXXbKXXXXXXXXXXXX_!!0-item_pic.jpg_160x160q90.jpg)
</div>
.cover{position: relative; padding-top: 100%; height: 0; overflow: hidden;}
.cover img{position: absolute; top: 0; width: 100%;}

DEMO地址,缩放浏览器窗口看看。

See the Pen vEYzgv by hugo (@baofen14787) on CodePen.

5、图片高清化

大家都知道,iphone6 plus 是3倍高清图了,它的devicePixelRatio = 3。 关于DPR的介绍可以查看这篇文章《设备像素比devicePixelRatio简单介绍

在ios8下,已经开始支持img的srcset 属性了(目前移动端也就ios8开始支持),也就是说,可以对一张图片设置2个URL,浏览器自动加载对应的图片。

3

支持程度如下:

黄色表示仅支持旧的srcset规范,绿色表示支持全新的srcset规范,包括sizes属性,w描述符。 这里不展开,详细了解可自行google。

4

如下DEMO,请切换devicePixelRatio值进行查看:

See the Pen YPzOxB by hugo (@baofen14787) on CodePen.

不过目前前端这边图片的实现基本都用lazyload的方式实现。srcset的图片加载方式在实际项目中运用还比较少。

6、背景图高清化

media query 实现高清化

img标签的高清化,可以通过JS判断devicePixelRatio的值来加载不同尺寸的图片,但是对于背景图,写在CSS中的,用JS来判断就略麻烦了,还好CSS通过media query也能判断dpr。

目前兼容性最好的背景图高清化实现方式,使用media query的-webkit-min-device-pixel-ratio做判断:

/* 普通显示屏(设备像素比例小于等于1)使用1倍的图 */
        .css{
            background-image: url(img_1x.png);
        }

        /* 高清显示屏(设备像素比例大于等于2)使用2倍图  */
        @media only screen and (-webkit-min-device-pixel-ratio:2){
            .css{
                background-image: url(img_2x.png);
            }
        }

        /* 高清显示屏(设备像素比例大于等于3)使用3倍图  */
        @media only screen and (-webkit-min-device-pixel-ratio:3){
            .css{
                background-image: url(img_3x.png);
            }
        }

进一步,可以通过工具生成相应的3x,2x,1x的图片及css,在使用时直接引用即可。谁搞一个?

关于移动设备的-webkit-min-device-pixel-ratio值,可以查看该网页的整理:http://bjango.com/articles/min-device-pixel-ratio/

image-set 实现高清化

image-set,它是Webkit的私有属性,也是Css4的一个属性,它是为了解决Retina屏幕下的图像显示而生。

使用方式也很简单。伪代码如下:

.css {
            background-image: url(1x.png);    /*不支持image-set的情况下显示*/
            background: -webkit-image-set(
                    url(1x.png) 1x,/* 支持image-set的浏览器的[普通屏幕]下 */
                    url(2x.png) 2x,/* 支持image-set的浏览器的[2倍Retina屏幕] */
                    url(3x.png) 3x/* 支持image-set的浏览器的[3倍Retina屏幕] */
            );
        }

目前移动端的支持程度来看,ios7+,android 4.4+ 下已经支持了。如果仅仅是做ip6+的高清适配方案。image-set也是一种实现方案。

使用image-set 与 media query 实现有什么区别及好处?

这篇文章里面做了很详细的阐述,大家可以看看:http://blog.cloudfour.com/safari-6-and-chrome-21-add-image-set-to-support-retina-images/

大体的意思是:image-set不需要告诉浏览器使用什么图像,而是直接提供了图像让浏览器选择。这就意味着,如果在低网速下,浏览器可以选择加载低分辨率的图片。(PS:好智能的样子)

但是相比如media query的实现,image-set仅支持单个图片的高清化,不适合在css sprite下使用。 并且兼容性也是一大硬伤。

但是一般来说,用在LOGO区域,单个图片图标的区域下,也是个不错的选择。

7、图片列表的自适应

关于适配,也就是要让布局更灵活,在电商网站里面,商品列表是一个非常常见的结构。

一种比较智能的列表方式是: 两端对齐,间距自适应。

那么可以使用FLEXBOX布局来实现两端对齐的效果,也可以使用text-align:justify的方式实现。

先看个flex实现的例子,主要通过justify-content:space-between,来实现:

See the Pen YPzOLM by hugo (@baofen14787) on CodePen.

flexbox的布局方式,在PC端就不合适了,ie9以下都不支持,那么更友好的方式可以使用text-align:justify来实现,兼容各大主流浏览器,包括IE6。

详情请移步我以前写的博文:《inline-block + justify实现列表两端对齐

小DEMO:

See the Pen raNZKp by hugo (@baofen14787) on CodePen.

但是这2种布局方式都有一定的局限性。就是列表个数必须凑整。目前还没找到一种能够兼容不限个数的实现方案,如果各位看官有更好的实现方式,也欢迎提出,一起交流。

总结

  1. 活动页面快速适配可以使用修改viewport的方式快速适配。
  2. 目前我所知道的适配方案里面,使用REM单位做布局是目前最佳的实现方案,可优先考虑。
  3. 移动端ip6的适配方案有很多,没有固定的套路及方法,请根据自身业务的特点,选择其中的一些方法组合使用。