var PureRenderMixin = require('react').addons.PureRenderMixin;
React.createClass({
    mixins: [PureRenderMixin],

  render: function() {
    return <div className={this.props.className}>foo</div>;
    }
});

var routes = (
  <Route handler={App} path="/">
    <DefaultRoute handler={Home} />
    <Route name="about" handler={About} />
    <Route name="users" handler={Users}>
        <Route name="recent-users" path="recent" handler={RecentUsers} />
        <Route name="user" path="/user/:userId" handler={User} />
        <NotFoundRoute handler={UserRouteNotFound}/>
    </Route>
    <NotFoundRoute handler={NotFound}/>
    <Redirect from="company" to="about" />
  </Route>
);

Router.run(routes, function (Handler) {
  React.render(<Handler/>, document.body);
});

// Or, if you'd like to use the HTML5 history API for cleaner URLs:

Router.run(routes, Router.HistoryLocation, function (Handler) {
  React.render(<Handler/>, document.body);
});

var React = require('react'),
injectTapEventPlugin = require("react-tap-event-plugin");
injectTapEventPlugin();

var Main = React.createClass({
render: function() {
    return <button onTouchTap={this._handleTouchTap}>Tap Me</button>
},

_handleTouchTap: function() {
    alert('Tap');
}
});

React.render(<Main />, document.body);

var tweenState = require('react-tween-state');
var React = require('react');

var App = React.createClass({
    mixins: [tweenState.Mixin],
    getInitialState: function() {
        return {left: 0};
    },
    handleClick: function() {
        this.tweenState('left', {
            easing: tweenState.easingTypes.easeInOutQuad,
            duration: 500,
            endValue: this.state.left === 0 ? 400 : 0
        });
    },
    render: function() {
        var style = {
            position: 'absolute',
            width: 50,
            height: 50,
            backgroundColor: 'lightblue',
            left: this.getTweeningValue('left')
        };
        return <div style={style} onClick={this.handleClick} />;
    }
});

var ws = new WebSocket('ws://www.websocket.org')

// 当websocket连接建立成功时
ws.onopen = function() {
    console.log('websocket 打开成功');    
};

// 当收到服务端的消息时
ws.onmessage = function(e) {
    // e.data 是服务端发来的数据
    console.log(e.data);
};

// 当websocket关闭时
ws.onclose = function() {
    console.log("websocket 连接关闭");
};

// 当出现错误时
ws.onerror = function() {
    console.log("出现错误");
};

// 发送消息 
ws.send('blablabla')

// 关闭socket
ws.close()

// 客户端发送给服务端
{
    method: 'xxx',
    request: {} 
}

// 服务端返回给客户端
{
    data: {},
    success: true,
    errorCode: 0,
    request: {} // 如果是服务端主动推消息给客户端，request会带有method参数
                // 如果是服务端返回客户端请求，request就是客户端之前请求的数据
}

/*
 * @example
 *  var ws = new Socket('ws://www.websocket.org')
 *  ws.on('ready',function() {
 *      console.log('服务器连接成功');
 *      ws.on('message', function(json) {
 *          console.log('一条新消息：'+json.session);
 *      });
 *      ws.emit("send", {
 *          session: "一条新消息"
 *      })
 *  })
 *  ws.on("error",function(){
 *      console.log("连接报错")
 *  })
 *  ws.on("close",function(){
 *      console.log("连接关闭");
 *  })
 */

function Socket(url) {
    this.init(url)
}

Socket.prototype = {
    init: function(url) {
        this.initListeners()
        this.initSocket(url)
        this.bindSocketEvent()
    },

    initSocket: function(url) {
        this.url = url
        this.socket = new WebSocket(url)
        return this
    },

    initListeners: function() {
        this.listeners = {}
        return this
    },

    bindSocketEvent: function() {
        var me = this

        me.socket.onopen = function() {
            me.stopHeartBeat()
            me.startHeartBeat()
            me.clearAll()
            me.trigger('ready')
        }

        me.socket.onerror = function(e) {
            me.trigger('close', e)
            me.close()
        }

        me.socket.onmessage = function(e) {
            me.refreshServerTimer();
            var json = JSON.parse(e.data);
            me.trigger(json.request.method, json);
        }

        return this
    },

    reConnect: function() {
        this.initSocket(this.url).bindSocketEvent()
        this.trigger('reconnect')
    },

    isOffline: function() {
        return this.socket.readyState != WebSocket.OPEN
    },

    on: function(evt, fn) {
        var me = this

        if(me.listeners[evt] && me.listeners[evt].length) {
            if(me.listeners[evt].indexOf(fn) == -1){
                me.listeners[evt].push(fn)
            }
        }else {
            me.listeners[evt] = [fn]
        }

        return this
    },

    off: function(evt, fn) {
        var me = this

        if(me.listeners[evt] && me.listeners[evt].length){
            var index = me.listeners[evt].indexOf(fn)

            if(index != -1){
                me.listeners[evt].splice(index,1)
            }
        }

        return this
    },

    emit: function(method, info) {
        var me = this

        me.socket.send(JSON.stringify({
            method: method,
            request: info || ''
        }))

        return this
    },

    trigger: function(evt) {
        var me = this

        if(me.listeners[evt]) {
            for(var i=0; i<me.listeners[evt].length; i++) {
                me.listeners[evt][i].apply(me, [].slice.call(arguments,1))
            }
        }

        return this
    },

    startHeartBeat: function() {
        var me = this

        me.heartBeatTimer = setInterval(function() {
            me.emit("heartBeat")
        }, 5000)
    },

    stopHeartBeat: function() {
        clearInterval(this.heartBeatTimer)
    },

    //重新开始断线计时，20秒内没有收到任何正常消息或心跳就超时掉线
    refreshServerTimer: function() {
        var me = this

        clearTimeout(me.serverHeartBeatTimer)
        me.serverHeartBeatTimer = setTimeout(function() {
            me.trigger("disconnect")
            me.close()
            me.reConnect()
        }, 20000)
    },

    clearAll: function() {
        var tmp = this.listeners['ready']

        this.listeners = {}
        this.listeners['ready'] = tmp

        return this
    },

    close: function(options) {
        var me = this;

        clearTimeout(me.serverHeartBeatTimer);
        me.stopHeartBeat();
        me.socket.close();

        return this
    }
}

var newComponent = Class({
    init : function(cfg) {
        var defaults = {};
        cfg = $.extend({},defaults,cfg);
        this.renderUI();
        this.bindEvents();
    },
    // 绘制UI
    renderUI : function() {
        var htmlStr = itpl(tpl,data);
        $('body').append(htmlStr);
    },
    // 事件绑定
    bindEvents : function() {
        var handleEvent = this.handleEvent;
        cfg.el.on('click',handleEvent);
        cfg.el.on('mouseenter',handleEvent);
        ...
    },
    // 事件处理
    handeEvent : function(e) {
        switch (e.type) {
            case : 'click' : this._onClick();
                break;
            case : 'mouseenter' : this._onMouseEnter();
        }
    },
    _onClick : function() {
        ...
    },
    _onMouseEnter : function() {
        ...
    },
    // 销毁，释放内存
    destory : function() {
        ...
    }

})

<ul class="list-group">
  <li class="list-group-item repeat" ng-repeat="item in vm.items">
    {{item}}
    <button type="button" class="close" ng-click="vm.delItem($index)">&times;</button>
  </li>
</ul>
<button class="btn btn-default mmm" ng-click="vm.addItem()">添加一条</button>

/*给repeat中的enter和leave事件添加基础动画*/
.repeat.ng-enter,
.repeat.ng-leave {
  -webkit-transition: 0.5s linear all;
  transition: 0.5s linear all;
}

.repeat.ng-enter,
.repeat.ng-leave.ng-leave-active {
  opacity: 0;
}

.repeat.ng-leave,
.repeat.ng-enter.ng-enter-active {
  opacity: 1;
}

angular.module('ngShowcaseApp').controller('ctrl.animation.basic', function ($scope) {
  var vm = $scope.vm = {};

  vm.items = ['item1', 'item2'];
  vm.itemId = 3;

  vm.addItem = function() {
    vm.items.push('item' + vm.itemId);
    vm.itemId++;
  };

  vm.delItem = function(index) {
    vm.items.splice(index, 1);
  };
});

多职责：
var index = (function(){
    return {
        login : function() {
            ...
        },
        dialog : function() {
            ...
        },
        tab : function() {
            ...
        },
        play : function() {
            ...
        },
        ...
    }
})();

单一职责（利用seajs）：    
define(function(require, exports, module){
    var $ = require("jquery");
    var login = require("./login");
    var dialog = require("./dialog");
    var tab = require("./tab");
    var play = require("./play");

    $(function(){
        login();
        dialog();
        tab();
        play();
    })
})

/**
 * EVENT model
 */
var func = {};

;(function(func) {

    var _cache = {};

    /**
     * 广播事件
     * 目标: 为了尽可能的减少模块之间业务逻辑的耦合度, 而开发了这个eventbus, 主要用于业务逻辑的事件传递
     * 使用规范: 每个js模块尽可能通过事件去通信, 减少模块之间的直接调用和依赖(耦合)
     */

    /**
     * 派发
     * @param  {[type]} type 事件类型
     * @param  {[type]} data 回调数据
     * @return {[type]}      [description]
     */
    func.fire = function(type, data) {
        var listeners = _cache[type],
            len = 0;
        if (typeof listeners !== 'undefined') {
            var args = [].slice.call(arguments, 0);
            args = args.length > 2 ? args.splice(2, args.length - 1) : [];
            args = [data].concat(args);

            len = listeners.length;
            for (var i = 0; i < len; i++) {
                var listener = listeners[i];
                if (listener && listener.callback) {
                    args = args.concat(listener.args);
                    listener.callback.apply(listener.scope, args);
                }
            }
        }
        return this;
    }

    /**
     * 订阅广播事件
     * @param  {[type]}   types     事件类型，支持,分隔符
     * @param  {Function} callback 回调函数
     * @param  {[type]}   scope    回调函数上下文
     * @return {[type]}            this
     */

    func.on = function(types, callback, scope) {
        types = types || [];
        var args = [].slice.call(arguments);

        if (typeof types === 'string') { 
            types = types.split(',');
        }
        var len = types.length;
        if (len === 0) {
            return this;
        }
        args = args.length > 3 ? args.splice(3, args.length - 1) : [];
        for (var i = 0; i < len; i++) {
            var type = types[i];
            _cache[type] = _cache[type] || [];
            _cache[type].push({
                callback: callback,
                scope: scope,
                args: args
            });
        }
        return this;
    }

    /**
     * 退订
     * @param  {[type]}   type     [description]
     * @param  {Function} callback 假如传入则移出传入的监控事件，否则移出全部
     * @return {[type]}            [description]
     */

    func.un = function(type, callback, scope) {
        var listeners = _cache[type];
        if (!listeners) {
            return this;
        }
        if (callback) {
            var len = listeners.length,
                tmp = [];

            for (var i = 0; i < len; i++) {
                var listener = listeners[i];
                if (listener.callback == callback && listener.scope == scope) {} else {
                    tmp.push(listener);
                }
            }
            listeners = tmp;
        } else {
            listeners.length = 0;
        }
        return this;
    }

    func.removeAll = function() {
        _cache = {};
        return this;
    }

})(func)

// 区域模块：
define(function(require, exports, module){
    var $ = require("jquery");
    var login = require("./login");
    var dialog = require("./dialog");

    function loginArea() {
        login();
        dialog();
    }
    return loginArea;
})

// 业务模块：  
define(function(require, exports, module){
    var $ = require("jquery");
    var loginArea = require("./loginArea");
    var tab = require("./tab");
    var play = require("./play");

    $(function(){
        loginArea();
        tab();
        play();
    })
})

burnCalories = Math.floor(weight *minute/60*K);

/**
 * 指数K
 * 运动卡路里消耗数据
 * 单位（小时）：卡路里/公斤
 */

K = {
    '仰卧起坐' : 9.38 ,
    '一般健美操' : 4.02 ,
    '减肥健美操，强度较大' : 6.7 ,
    '芭蕾，现代舞，扭摆舞，爵士舞，踢踏舞，吉特巴舞' : 5.09 ,
    '快速跳舞' : 6.03 ,
    '慢慢跳舞（华尔兹，狐步）' : 2.68 ,
    '爱尔兰舞，波尔卡' : 4.69 ,
    '一般舞蹈，草裙舞，希腊舞，佛拉明哥舞，摇摆舞' : 4.69 ,
    '慢速游泳，自由式，中低强度' : 8.04 ,
    '游泳(侧泳)' : 9.38 ,
    '游泳(仰式)' : 8.04 ,
    '蛙泳，一般' : 12.06 ,
    ... // 不一一列出了，感兴趣的同学可以去我的github上扒一下源码
}

var arr1 = []
console.log(Array.isArray(arr1))
// true

var arr2 = new Array()
console.log(Array.isArray(arr2))
// true

var arr3 = [1,2,3,4]
console.log(Array.isArray(arr3))
// true

var arr4 = 'is Array'
console.log(Array.isArray(arr4))
// false

var arr = [1,2,3,3,2,1]
console.log(arr.indexOf(1))
// 0
console.log(arr.indexOf(4))
// -1
console.log(arr.indexOf(1,1))
// 5
console.log(arr.indexOf(1,-2))
// 5

Array.prototype.indexOf = Array.prototype.indexOf || function(searchElement) {
    var len = this.length
    var i = +arguments[1] || 0 // fromIndex

    if(len === 0 || isNaN(i) || i>=len) {
        return -1
    }
    if(i<0) {
        i = len + i
        i<0 && i=0
    }
    for(; i<len; i++) {
        if( this.hasOwnProperty(String(i)) && this[i] ===  searchElement )
            return i
    }
    return -1
}

var arr = [1,2,3,3,2,1]
console.log(arr.lastIndexOf(1))
// 5
console.log(arr.lastIndexOf(4))
// -1
console.log(arr.lastIndexOf(1,-2))
// 0

Array.prototype.lastIndexOf = Array.prototype.lastIndexOf || function(searchElement) {
    var len = this.length
    var i = +arguments[1] || len-1 // fromIndex

    if(len === 0 || isNaN(i) || i>=len) {
        return -1
    }
    if(i<0) {
        i = len + i
    }else if(i>=len){
        i = len - 1
    }

    for(; i>=0; i--) {
        if( this.hasOwnProperty(String(i)) && this[i] ===  searchElement )
            return i
    }
    return -1
}

var arr = [1,2,3,4]
var result = arr.every(function(value) {
    return value>0
})
console.log(result)
// true

var arr = [1,2,3,4]
var result = arr.every(function(value) {
    return value>this.zero
},{
    zero: 0
})
console.log(result)
// true

var __isCallable = (function(){ 

    var __sortCase = (function(){
            try {
                [].sort('abc');
                return false;
            } catch(ex) {
                return true;
            }
        })();

    return function(obj){
        if( typeof obj === 'function' )
            return true;
        if( typeof obj !== 'object' ) 
            return false;
        if( obj instanceof Function || obj instanceof RegExp )
            return true;
        if( __sortCase ) {
            try {
                [].sort(obj);
                return true;
            } catch(ex){ /* nothing to do */ }
        }
        return false;
    };
})();

Array.prototype.every = Array.prototype.every || function(callback){
    if( !__isCallable(callback) )
        throw new TypeError( callback + " is not a callable object" );

    var thisArg = arguments[1]; 
    for(var i=0, len=this.length; i < len; i++) {
        if( this.hasOwnProperty(String(i)) ) {
            if( !callback.call(thisArg, this[i], i, this) )
                return false;
        }
    }

    return true;
};

var arr = [1,2,3,4]
var result = arr.some(function(value) {
    return value>2
})
console.log(result)
// true

var arr = [1,2,3,4]
var result = arr.every(function(value) {
    return value>this.min
},{
    min: 2
})
console.log(result)
// true

var __isCallable = (function(){ 

    var __sortCase = (function(){
            try {
                [].sort('abc');
                return false;
            } catch(ex) {
                return true;
            }
        })();

    return function(obj){
        if( typeof obj === 'function' )
            return true;
        if( typeof obj !== 'object' ) 
            return false;
        if( obj instanceof Function || obj instanceof RegExp )
            return true;
        if( __sortCase ) {
            try {
                [].sort(obj);
                return true;
            } catch(ex){ /* nothing to do */ }
        }
        return false;
    };
})();

Array.prototype.every = Array.prototype.every || function(callback){
    if( !__isCallable(callback) )
        throw new TypeError( callback + " is not a callable object" );

    var thisArg = arguments[1]; 
    for(var i=0, len=this.length; i < len; i++) {
        if( this.hasOwnProperty(String(i)) ) {
            if( callback.call(thisArg, this[i], i, this) )
                return false;
        }
    }

    return true;
};

var arr = [1,2,3,4]

arr.forEach(funcion(value, index, arr) {
    console.log('value:'+value+', index:'+index)
})

// output
// value:1, index:0
// value:2, index:1
// value:3, index:2
// value:4, index:3

Array.prototype.forEach = Array.prototype.forEach || function(callback){
    if( !__isCallable(callback) )
        throw new TypeError( callback + " is not a callable object" );

    var thisArg = arguments[1]; 
    for(var i=0, len=this.length; i < len; i++) {
        if( this.hasOwnProperty(String(i)) ) {
            callback.call(thisArg, this[i], i, this);
        }
    }       
}

var arr = [1,2,3,4]
var result = arr.map(function(value) {
    return value*2
})
console.log(result)
// [2,4,6,8]

var arr = [1,2,3,4]
var result = arr.map(function(value) {
    return value*this.number
},{
    min: 2
})
console.log(result)
// [2,4,6,8]

Array.prototype.map = Array.prototype.map || function(callback){
    if( !__isCallable(callback) )
        throw new TypeError( callback + " is not a callable object" );

    var thisArg = arguments[1],
        len = this.length,
        results = new Array(len);
    for(var i=0; i < len; ++i) {
        if( this.hasOwnProperty(String(i)) ) {
            results[i] = callback.call(thisArg, this[i], i, this);
        }
    }

    return results;
};

var arr = [1,2,3,4]
var result = arr.filter(function(value) {
    return value>2
})
console.log(result)
// [3,4]

var arr = [1,2,3,4]
var result = arr.filter(function(value) {
    return value>this.min
},{
    min: 2
})
console.log(result)
// [3,4]

Array.prototype.filter = Array.prototype.filter || function(callback){
    if( !__isCallable(callback) )
        throw new TypeError( callback + " is not a callable object" );

    var thisArg = arguments[1],
        len = this.length,
        results = [];
    for(var i=0; i < len; ++i) {
        if( this.hasOwnProperty(String(i)) ) {
            callback.call(thisArg, this[i], i, this) && results.push( this[i] );
            }
        }

    return results;
};

var arr = [1,2,3,4]
var result = arr.reduce(function(previousValue, currentValue) {
    return previousValue + currentValue
})
console.log(result)
// 10

var arr = [1,2,3,4]
var result = arr.reduce(function(previousValue, currentValue) {
    return previousValue + currentValue
},5)
console.log(result)
// 15

Array.prototype.reduce = Array.prototype.reduce || function(callback){
    if( !__isCallable(callback) )
        throw new TypeError( callback + " is not a callable object" );

    var len = this.length;
    if( len === 0 && arguments.length < 2 )
        throw new TypeError( "reduce of empty array with no initial value" );

    var initIdx = -1;
    if( arguments.length < 2 ) {
        if( (initIdx = __firstIndex(this)) === -1 )
            throw new TypeError( "reduce of empty array with no initial value" );               
    }

    var val = arguments.length > 1 ? arguments[1] : this[initIdx];

    for(var i=initIdx+1; i < len; i++) {
        if( this.hasOwnProperty(String(i)) ) {
            val = callback(val, this[i], i, this);
        }
    }

    return val;
};

var arr = [1,2,3,4]
var result = arr.reduceRight(function(previousValue, currentValue) {
    return previousValue + currentValue
})
console.log(result)
// 10

var arr = [1,2,3,4]
var result = arr.reduceRight(function(previousValue, currentValue) {
    return previousValue + currentValue
},5)
console.log(result)
// 15

Array.prototype.reduceRight = Array.prototype.reduceRight || function(callback){
    if( !__isCallable(callback) )
        throw new TypeError( callback + " is not a callable object" );

    var len = this.length;
    if( len === 0 && arguments.length < 2 )
        throw new TypeError( "reduce of empty array with no initial value" );

    var initIdx = len;
    if( arguments.length < 2 ) {
        for( var k=len-1; k >=0; --k ) {
            if( this.hasOwnProperty(String(k)) ) {
                initIdx = k;
                break;
            }
        }
        if( initIdx === len )
            throw new TypeError( "reduce of empty array with no initial value" );               
    }       

    var val = arguments.length > 1 ? arguments[1] : this[initIdx];

    for(var i=initIdx-1; i >= 0; --i) {
        if( this.hasOwnProperty(String(i)) ) {
            val = callback(val, this[i], i, this);
        }
    }

    return val;
};

indexOf(searchvalue,fromindex):方法返回某个指定字符串在字符中首次出现的位置
    参数：1.必须，检索的字符串值
         2.可选，字符串开始检索的位置，合法取值是0-stringObject.length-1，不填，则从开始检索
substring(start,stop)：提取字符串中介于两个指定下标之间的字符
    参数：1.必须，一个非负的整数，要提取的子串的第一个字符在stringObject中的位置
         2.可选，一个非负的整数，要比提取的子串的最后一个字符在stringObject中多1，若省略，则匹配到stringObject的结尾。
charAt(index)：返回指定位置的字符
    参数：1.必须，字符在字符串中的下标
split(separator,howmany)：把一个字符串分割成字符串数组
    参数：1.必须，字符串或正则表达式，从该参数指定的地方分割stringObject
    2.可选，指定返回数组的最大长度，如果没有设置参数，整个字符串都会被分割

RegExpObject.test(string)：检测字符串是否匹配一个模式，返回布尔值
    参数：1.必须，要检测的字符串
RegExpObject.search(regexp)：检索字符串中指定的子字符串，或检索与正则表达式想匹配的字符串
stringObject.match(regexp)：正则去匹配字符串，如果匹配成功，就返回匹配成功的数组，如果匹配不成功，就返回null
    示例：
    var str="1 plus 2 equal 3"
    console.log(str.match(/\d+/g))==>[1,2,3]
stringObject.replace(regexp,replacement)：正则去匹配字符串，匹配成功的字符去替换成新的字符串
    参数：replacement:可以使字符串，也可以是一个回调函数($0==>母亲，$1==>第一个子项，$2==>第二个子项..)

转义字符：
\s：空格
\S：非空格
\d：数字
\D：非数字
\w：字符(字符，数字，下划线)
\W：非字符
\.：真正的点
\b：独立的部分 （起始，结束，空格）
\B：非独立的部分
\1：重复的子项

特殊字符：
$：匹配输入字符串的结尾位置。如果设置了 RegExp 对象的 Multiline 属性，则 $ 也匹配 ‘\n' 或 ‘\r'。要匹配 $ 字符本身，请使用 \$。
()：分组操作，子项。要匹配这些字符，请使用 \( 和 \)。
*：匹配前面的子表达式零次或多次。要匹配 * 字符，请使用 \*。
+：匹配前面的子表达式一次或多次。要匹配 + 字符，请使用 \+。
.：匹配除换行符 \n之外的任何单字符。要匹配 .，请使用 \.。
[ ]：标记一个中括号表达式的开始。要匹配 [，请使用 \[。
?：匹配前面的子表达式零次或一次，或指明一个非贪婪限定符。要匹配 ? 字符，请使用 \?。
\：将下一个字符标记为或特殊字符、或原义字符、或向后引用、或八进制转义符。例如， ‘n' 匹配字符 ‘n'。'\n' 匹配换行符。序列 ‘\\' 匹配 “\”，而 ‘\(' 则匹配 “(”。
^：匹配输入字符串的开始位置，除非在方括号表达式中使用，此时它表示不接受该字符集合。要匹配 ^ 字符本身，请使用 \^。
{ }：标记限定符表达式的开始。要匹配 {，请使用 \{。
|：指明两项之间的一个选择。要匹配 |，请使用 \|。

//css
.ib { display:inline-block; *display: inline; *zoom:1; width: 60px; height: 60px; background: red;}
//html
<div class="ib">我是ie6/7下模拟的inline-block元素</div>

obj.addEventListener(ev,fn,false);

<div id="outDiv">
  <div id="middleDiv">
    <div id="inDiv">请在此点击鼠标。</div>
  </div>
</div>

function bindEvent(elem,type,fn){
    if(elem.attachEvent){
        elem.attachEvent("on"+type,function(){
            fn.apply(elem,arguments);
        });
    }else{
        elem.addEventListener(type,fn,false);
    }
}

//如果提供了事件对象，则这是一个非IE浏览器
if ( e && e.stopPropagation )
//因此它支持W3C的stopPropagation()方法
e.stopPropagation(); 
else
//否则，我们需要使用IE的方式来取消事件冒泡 
window.event.cancelBubble = true;
return false;

//如果提供了事件对象，则这是一个非IE浏览器 
if ( e && e.preventDefault ) 
//阻止默认浏览器动作(W3C) 
e.preventDefault(); 
else
//IE中阻止函数器默认动作的方式 
window.event.returnValue = false; 
return false;

function getIE(e){
    var t=e.offsetTop;
    var l=e.offsetLeft;
    while(e=e.offsetParent){
        t+=e.offsetTop;
        l+=e.offsetLeft;
    }
}

fastclick.attach(document.body);

for(; i<len ; i++) {
    pushHtml += '<a href="'+ d.info[i]['url'] +'" class="item">' ;
    pushHtml += '<p class="img_wrap">' ;
    pushHtml += '<span class="notes_wrap">' ;
    pushHtml += '<span class="img_time">'+ d.info[i]['durationSecond'] +'</span>' ;
    pushHtml += '<img class="lazy" src="http://static.vas.pptv.com/vas/assets/app/1717wan/wap/'+ vers +'/css/gb/lazypic.jpg" lazyimg="'+ d.info[i]['sloturl'] +'" />' ;
    pushHtml += '</span></p>' ;
    pushHtml += '<h5>'+ d.info[i]['title'] +'</h5>' ;
    pushHtml += '<p class="info">' ;
    pushHtml += '<span class="tit">'+ d.info[i]['author'] +'</span>' ;
    pushHtml += '<span class="views">'+ d.info[i]['pv'] +'</span>' ;
    pushHtml += '</p></a>'
}
$video.append(pushHtml);

组件js示例：
define(function(require, exports, module){
    var $ = require('../zepto/zepto');
    var func = require('../core/func');

    var defaults = {
        type : 'none',
        htype : 'hide'
    }

    var Widget = func.Class({
        // 初始化
        init : function(option) {
            var option = this.option = $.extend({},defaults,option);
            this.bindEvent();
        },
        bindEvent : function() {},
        handler : function() {},
        destory : function() {}
    })

    return Widget;

})

业务层代码调用：
define(function(require, exports, module){
    var widget = require('./widgets/widget');
    // 调用
    widget(option);
})

/**
 * @author : matthewsun
 * @mail : [email protected]
 * @description : API 聚合地址页 ( json 数据格式 )
 */
define(function(require, exports, module){
    var APIDOMAIN = apiUrl ;
    var API = { 
        loginPPTV : 'http://user.vas.pptv.com/api/ajax/loginCms.php?app=1717wan', // 登录检测接口 对 PPTV主站     
        indexVideoData : 'http://m.1717wan.cn/?ajax=1&page=', // 首页精彩视频数据      
        scheduleListData : 'http://m.1717wan.cn/match/?ajax=1&page=', // 赛程页赛程列表数据       
        gamesListLiveData : 'http://m.1717wan.cn/game/list/?ajax_1=1&', // 游戏列表页直播视频数据      
        gamesListVideoData : 'http://m.1717wan.cn/game/list/?ajax=1&', // 游戏列表页精彩视频数据      
        recordsListData : 'http://m.1717wan.cn/mylottery/order?ajax=1&p=', // 赛程页赛程列表数据      
        quizzeFuncData : APIDOMAIN + '/lottery/bet?&platform=2&', // 竞猜投注页     
        reserveData : APIDOMAIN + '/user/follow?uid=', // 订阅页 => 订阅      
        unReserveData : APIDOMAIN + '/user/unfollow?uid=', // 订阅页 => 取消订阅      
        exchangeMoneyData : APIDOMAIN + '/user/exchange?amount=', // 猜币兑换接口
        playerHomeList : 'http://m.1717wan.cn/player/detail/?ajax=1&room_id=', // 主播主页列表数据
        starHomeList : 'http://m.1717wan.cn/player/detail_star/?ajax=1&author=', // 伪主播列表数据
        WATCHPLAY : "http://apicdn.liveplatform.pptv.com/media/v3/1717wan/program/{pid}/watch" // 普通用户获取播放地址
    }

    return API ;

});

var map = {
    libs : {
        'zepto' : [],
        'swipe' : []
    },
    utils : {
        'func' : ['zepto'],
        'ajax_api' : []
    },
    widget : {
        'common' : ['zepto','func','ajax_api'],
        'lazyload' : ['zepto'],
        'loader' : ['zepto'],
        'dialog' : ['zepto'],
        'share' : ['zepto'],
        'itpl' : []
    },
    ui : {
         'index' : ['zepto','common','swipe','ajax_api','loader','lazyload'],
         'details' : ['zepto','common'],
         'exchange' : ['zepto','common','ajax_api'],
         'forget' : ['zepto'],
         'games' : ['zepto','common'],
         'games_list' : ['zepto','common','ajax_api','loader','lazyload'],
         'home' : ['zepto','common','ajax_api','loader','lazyload'],
         'instruct' : ['zepto','common'],
         'live' : ['zepto','common','ajax_api','loader','lazyload'],
         'login' : ['zepto'],
         'personal' : ['zepto','common'],
         'players' : ['zepto','common'],
         'quizze' : ['zepto','common','ajax_api'],
         'records' : ['zepto','common','ajax_api','loader'],
         'reg' : ['zepto'],
         'reserve' : ['zepto','common','ajax_api'],
         'schedule' : ['zepto','common','ajax_api','loader'],
         'star_home' : ['zepto','common','ajax_api','loader','lazyload'],
         'strategy' : ['zepto','common'],
         'vlive' : ['zepto','lazyload'],
         'weixin_share' : ['zepto','share'],
         '404' : ['zepto','common']
    }
}

单业务（不复杂）：
var view = (function(){
    return {
        login : function() {
            ...
        },
        dialog : function() {
            ...
        },
        tab : function() {
            ...
        },
        play : function() {
            ...
        },
        ...
    }
})();

多业务（较复杂）：
define(function(require, exports, module){
    var $ = require("jquery");
    var login = require("./login");
    var dialog = require("./dialog");
    var tab = require("./tab");
    var play = require("./play");

    $(function(){
        login();
        dialog();
        tab();
        play();
    })
})

多业务（复杂）：
在业务粒子和业务模块之间架一层区域模块
区域模块：
define(function(require, exports, module){
    var $ = require("jquery");
    var login = require("./login");
    var dialog = require("./dialog");

    function loginArea() {
        login();
        dialog();
    }
    return loginArea;
})
业务模块：   
define(function(require, exports, module){
    var $ = require("jquery");
    var loginArea = require("./loginArea");
    var tab = require("./tab");
    var play = require("./play");

    $(function(){
        loginArea();
        tab();
        play();
    })
})

// html output:
<a href="javascript:;" class="J_action">btn call alert</a>
<a href="javascript:;" class="J_action">btn call alert</a>
<a href="javascript:;" class="J_action">btn call alert</a>
<a href="javascript:;" class="J_action">btn call alert</a>

// js output:
// require jquery
$('body').on('click', '.J_action', function() {
    alert('a')
})

// html output:
<a href="javascript:;" data-action="alert">btn call alert</a>
<a href="javascript:;" data-action="alert">btn call alert</a>
<a href="javascript:;" data-action="alert">btn call alert</a>
<a href="javascript:;" data-action="alert">btn call alert</a>

// js output:
// require jquery
$('body').on('click', '[data-action=alert]', function() {
    alert('a')
})

<section class="kontext">
    <div class="layer show">...</div>
    <div class="layer">...</div>
    <div class="layer">...</div>
</section>

// 创建一个kontext实例
var k = kontext( document.querySelector( '.kontext' ) );

// API METHODS:
k.prev(); // 展示上一个场景
k.next(); // 展示下一个场景
k.show( 3 ); // 展示指定索引值的场景
k.getIndex(); // 现在展示的场景的索引值
k.getTotal(); // 场景的数量

// kontext对象全屏包裹
.kontext {
    width: 100%;
    height: 100%;
}

// 每一个场景绝对定位，并默认看不见
.kontext .layer {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    visibility: hidden;
}

// 设置show的场景显示出来  
.kontext .layer.show {
    visibility: visible;
}

// 如果当前浏览器支持css3的景深效果，则加上capable，这个会在js中操作实现
// 在ie6等等不支持css3景深效果的低级浏览器中，则表现为正常的场景切换，没有动画效果
.kontext.capable {
    -webkit-perspective: 1000px;
       -moz-perspective: 1000px;
            perspective: 1000px;

    -webkit-transform-style: preserve-3d;
       -moz-transform-style: preserve-3d;
            transform-style: preserve-3d;
}

// 场景延Z轴向里缩100px
.kontext.capable .layer {
    -webkit-transform: translateZ( -100px );
       -moz-transform: translateZ( -100px );
            transform: translateZ( -100px );
}

// 对于显示的场景保持原位置
.kontext.capable .layer.show {
    -webkit-transform: translateZ( 0px );
       -moz-transform: translateZ( 0px );
            transform: translateZ( 0px );
}

// 向右翻页时，需要显示的页面，用js加上show和right的class命，给予它名为show-right的动画
.kontext.capable.animate .layer.show.right {
    -webkit-animation: show-right 1s forwards ease;
       -moz-animation: show-right 1s forwards ease;
            animation: show-right 1s forwards ease;
}

// 向右翻页时，需要隐藏的页面，用js加上hide和right的class命，给予它名为hide-right的动画
.kontext.capable.animate .layer.hide.right {
    -webkit-animation: hide-right 1s forwards ease;
       -moz-animation: hide-right 1s forwards ease;
            animation: hide-right 1s forwards ease;
}

/* 这里即以下把left的代码给省略了，原理和right一样
/* CSS animation keyframes */

// show页面
// 0%时：延Z轴向里偏移200px
// 40%时：向右偏移40%，缩小至0.8，向y轴的负方向旋转20度
// 100%时：延Z轴方向恢复0px
@keyframes show-right {
    0%   { transform: translateZ( -200px ); }
    40%  { transform: translate( 40%, 0 ) scale( 0.8 ) rotateY( -20deg ); }
    100% { transform: translateZ( 0px ); }
}

// hide页面
// 0%时：延Z轴方向0px，显示效果为显示
// 40%时：向左偏移40%，缩小至0.8，向y轴的正方向旋转20度
// 100%时：延Z轴向里偏移200px，显示效果为隐藏
@keyframes hide-right {
    0%   { transform: translateZ( 0px ); visibility: visible; }
    40%  { transform: translate( -40%, 0 ) scale( 0.8 ) rotateY( 20deg ); }
    100% { transform: translateZ( -200px ); visibility: hidden; }
}

/* Dimmer */
.kontext .layer .dimmer {
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    visibility: hidden;
    background: transparent;
    z-index: 100;
}

.kontext.capable.animate .layer .dimmer {
    -webkit-transition: background 0.7s ease;
       -moz-transition: background 0.7s ease;
            transition: background 0.7s ease;
}

// 需要隐藏的场景，让遮罩显示出来，0.7s变化背景颜色
.kontext.capable.animate .layer.hide .dimmer {
    visibility: visible;
    background: rgba( 0, 0, 0, 0.8 );
}

// window上挂载kontext全局对象
window.kontext = function( container ) {

    // 这是一个观察者，也可称为自定义事件，用于观察场景是否发生了变化，实现方法在最下
    var changed = new kontext.Signal();

    //找到所有的场景
    var layers = Array.prototype.slice.call( container.querySelectorAll( '.layer' ) );

    // 判断浏览器是否支持3d景深
    var capable =   'WebkitPerspective' in document.body.style ||
                    'MozPerspective' in document.body.style ||
                    'msPerspective' in document.body.style ||
                    'OPerspective' in document.body.style ||
                    'perspective' in document.body.style;

    // 支持效果，则加上class名capable
    if( capable ) {
        container.classList.add( 'capable' );
    }

    // 给每一场景加上dimmer遮罩
    layers.forEach( function( el, i ) {
        if( !el.querySelector( '.dimmer' ) ) {
            var dimmer = document.createElement( 'div' );
            dimmer.className = 'dimmer';
            el.appendChild( dimmer );
        }
    } );

    // show(1,'left') || show(1,'right')
    function show( target, direction ) {

        layers = Array.prototype.slice.call( container.querySelectorAll( '.layer' ) );

        // 给kontext加上class名animate，用于准备动画
        container.classList.add( 'animate' );

        // 如果没有指定方向，则自行判断要运行的方向
        direction = direction || ( target > getIndex() ? 'right' : 'left' );

        if( typeof target === 'string' ) target = parseInt( target );
        if( typeof target !== 'number' ) target = getIndex( target );

        target = Math.max( Math.min( target, layers.length ), 0 );

        if( layers[ target ] && !layers[ target ].classList.contains( 'show' ) ) {

            layers.forEach( function( el, i ) {
                // 取消原先的动画
                el.classList.remove( 'left', 'right' );
                // 加上现在的动画方向
                el.classList.add( direction );
                if( el.classList.contains( 'show' ) ) {
                    // 给现在显示的场景加上class名hide
                    el.classList.remove( 'show' );
                    el.classList.add( 'hide' );
                }
                else {
                    // 除了有class名show之外的场景去掉class名hide
                    el.classList.remove( 'hide' );
                }
            } );

            // 给目标场景加上class名show
            layers[ target ].classList.add( 'show' );

            // 场景转换时派发事件
            changed.dispatch( layers[target], target );

        }

    }

    /**
     * 显示上一个场景
     */
    function prev() {

        var index = getIndex() - 1;
        show( index >= 0 ? index : layers.length + index, 'left' );

    }

    /**
     * 显示下一个场景
     */
    function next() {

        show( ( getIndex() + 1 ) % layers.length, 'right' );

    }

    /**
     * 返回现在显示场景的索引值
     */
    function getIndex( of ) {

        var index = 0;

        layers.forEach( function( layer, i ) {
            if( ( of && of == layer ) || ( !of && layer.classList.contains( 'show' ) ) ) {
                index = i;
                return;
            }
        } );

        return index;

    }

    /**
     * 返回场景的数量
     */
    function getTotal() {

        return layers.length;

    }

    // API
    return {

        show: show,
        prev: prev,
        next: next,

        getIndex: getIndex,
        getTotal: getTotal,

        changed: changed

    };

};

/**
 * 观察者
 */
kontext.Signal = function() {
    this.listeners = [];
}

kontext.Signal.prototype.add = function( callback ) {
    this.listeners.push( callback );
}

kontext.Signal.prototype.remove = function( callback ) {
    var i = this.listeners.indexOf( callback );

    if( i >= 0 ) this.listeners.splice( i, 1 );
}

kontext.Signal.prototype.dispatch = function() {
    var args = Array.prototype.slice.call( arguments );
    this.listeners.forEach( function( f, i ) {
        f.apply( null, args );
    } );
}

 $parent.on('click',function(event){ //给父元素添加click绑定事件
    var $this = $(event.target) ; // 活动响应源

    if($this.is($myTarget)) { // 事件发生，判断是否是确切要执行函数的绑定
        foo();// 需执行的事件函数       
    }
}

    <div class="mod_x">
        <div class="mod_x_inner">
            <div class="mod_x_hd"></div>
            <div class="mod_x_bd"></div>
            <div class="mod_x_ft"></div>
        </div>
    </div>

比如：<div class="mod_list hotsale_list">

    .hotlist > .hotlist_hd > .hotlist_hd_extra

    .hotlist > .hotlist_hd > .hotlist_extra

    /* 注释 */
    /* 所在地注释 */
    .location_area { color:#f30; }

    注释的形式：/* ==页面-{页面名称}== */
    /* ==页面-退货流程== */
    .tuihuo .hd {font:700 12px/21px Arial;}
    .tuihuo .bd {font:700 12px/21px Arial;}

统一使用“*”和“_”分别对IE7和6进行Hack。
/* IE7会显示灰色#888，IE6会显示白色#fff，其他浏览器显示黑色#000 */
.m-list{color:#000;*color:#888;_color:#fff;}

html代码：
<div class="pos">定位元素</div>
<div class="bug">margin-top失效元素</div>
css代码：
.pos { position: fixed; left: 0; top: 0; width: 100%; background: blue; height: 40px; line-height: 40px; }
.bug { margin-top: 40px; background: red; height: 40px; line-height: 40px;  }

.bug { padding-top: 40px; background: red; height: 40px; line-height: 40px;  }

<div class="pos">定位元素</div>
<div></div>
<div class="bug">margin-top失效元素</div>
或者（交换位置）：
<div class="bug">margin-top失效元素</div>
<div class="pos">定位元素</div>

.bug { margin-top: 40px; background: red; line-height: 40px; }

//ele为目标元素，type为事件类型不用'on'，func为事件响应函数
var addEvent=function(ele,type,func){
    if(window.document.all) 
        ele.attachEvent('on'+type,func);//ie系列直接添加执行
    else{//ff
        if(type==='mouseenter')
            ele.addEventListener('mouseover',this.withoutChildFunction(func),false);
        else if(type==='mouseleave')
            ele.addEventListener('mouseout',this.withoutChildFunction(func),false);
        else
            ele.addEventListener(type,func,false);      
    }
}
var withoutChildFunction=function(func){
    return function(e){
        var parent=e.relatedTarget;//上一响应mouseover/mouseout事件的元素
        while(parent!=this&&parent){//假如存在这个元素并且这个元素不等于目标元素（被赋予mouseenter事件的元素）
            try{
                parent=parent.parentNode;}//上一响应的元素开始往上寻找目标元素
            catch(e){
                break;
            }
        }
        if(parent!=this)//以mouseenter为例，假如找不到，表明当前事件触发点不在目标元素内
        func(e);//运行目标方法，否则不运行
    }
}

  ╔═════════╗       ╔════════╗       ╔═════════════════╗
  ║ Actions ║──────>║ Stores ║──────>║ View Components ║
  ╚═════════╝       ╚════════╝       ╚═════════════════╝
       ^                                      │
       └──────────────────────────────────────┘

  注意：图片仅仅是FLUX**，而不是Facebook的实现。

.
+-- app
|   +-- actions
|       +-- index.js
|   +-- components
|       +-- content.js
|       +-- footer.js
|       +-- searchBar.js
|   +-- constants
|       +-- ActionTypes.js
|   +-- containers
|       +-- App.js
|   +-- reducers
|       +-- index.js
|       +-- items.js
|       +-- filter.js
|   +-- utils
|   +-- configureStore.js
|   +-- index.js
+-- scss
|   +-- pure.scss
+-- index.html

var dt = new Date("30 July 2010 15:05 UTC");
console.log(dt.toISOString());

// Output:
//  2010-07-30T15:05:00.000Z

console.log(Date.now())
// 1420015125590

console.log(+new Date())
// 1420015125590
console.log( (Date.now() === +new Date()) )
// true

var o = Object.create({
    name: 'matthewsun',
    getName: function() {
        return this.name
    }
})

console.log(o.getName())
console.log(Object.getPrototypeOf(o)) // 获取原始对象的原型
console.log(Object.getOwnPropertyDescriptor(o)) // 获取对象的属性描述符

// output
// "matthewsun"
// [object Object]
// undefined

var o = Object.create(null, {
  name: {
     value: 'matthewsun',
     writable: true
  }
})

console.log(o.name)
console.log(Object.getPrototypeOf(o)) 
console.log(Object.getOwnPropertyDescriptor(o, 'name'))

// output
// "matthewsun"
// null
// Object {value: "matthewsun", writable: true, enumerable: false, configurable: false} 

var obj = {};

Object.defineProperty(obj, "newDataProperty", {
    value: 101,
    writable: true,
    enumerable: true,
    configurable: true
});

obj.newDataProperty = 102;
console.log( Object.getOwnPropertyDescriptor(obj, 'newDataProperty') )
console.log("Property value: " + obj.newDataProperty);

// output
// [object Object] {configurable: true,enumerable: true,value: 102,writable: true}
// "Property value: 102"

Object.defineProperty(obj, "newDataProperty", { writable: false });

console.log( Object.getOwnPropertyDescriptor(obj, 'newDataProperty')['writable'] )

// output
// false

var obj = {};

Object.defineProperty(obj, "newAccessorProperty", {
    set: function (x) {
        document.write("in property set accessor" + newLine);
        this.newaccpropvalue = x;
    },
    get: function () {
        document.write("in property get accessor" + newLine);
        return this.newaccpropvalue;
    },
    enumerable: true,
    configurable: true
});

obj.newAccessorProperty = 30;
console.log("Property value: " + obj.newAccessorProperty);

// output
// Property value: 30

Object.defineProperty(obj, "newAccessorProperty", {
    get: function () {
        console.log('change.')
        return this.newaccpropvalue; 
    }
});

console.log("Property value: " + obj.newAccessorProperty);

// output
// change.
// Property value: 30

var descriptor = Object.getOwnPropertyDescriptor(Element.prototype, "querySelector");

descriptor.value = "query";
descriptor.writable = false;
Object.defineProperty(Element.prototype, "querySelector", descriptor);

var elem = document.getElementById("div");

elem.querySelector = "anotherQuery";
console.log(elem.querySelector);
// query

var obj = {}

Object.defineProperties(obj, {
    newData: {
        value: 10,
        writable: true
    },
    newAccessor: {
        get: function() {
            console.log('get')
            return this.newAccessorValue
        },
        set: function(x) {
            console.log('set')
            this.newAccessorValue = x
        },
        enumerable: true
    }
})

obj.newData = 10
console.log( obj.newData )

// output
// set
// get
// 10

Object.defineProperties(obj, {
    newData: {writable: false},
    newAccessor: {enumerable: false}
})

function Person(name, age) {
  this.name = name
  this.age = age
}
var me = new Person('matthew', 22)
var proto = Object.getPrototypeOf(me)

proto.sex = 'male'
console.log(me.sex)
console.log(Person.prototype.sex)
console.log(proto === Person.prototype)
console.log(proto.isPrototypeOf(me))

// output
// male
// male
// true
// true

var arr = []
var result = (Object.getPrototypeOf(arr) === Array.prototype)
console.log(result)
// true

var arr = []
var result = (Object.prototype.toString.call(arr) === '[object Array]')
console.log(result)
// true

var o = {
    name: 'matthew',
    age: 22
}

console.log(Object.keys(o))
// ['name', 'age']

function keys(obj) {
    var keys = [];
    for (var key in obj) {
        if (obj.hasOwnProperty(key)) keys.push(key)
    }
    return keys;
}

var obj = { pasta: "spaghetti", length: 10 };   
Object.defineProperty(obj, 't', {
  value: 't',
  writable: true
})
Object.seal(obj);
console.log(Object.isSealed(obj));

obj.newProp = 50;
console.log(obj.newProp);

delete obj.length;
console.log(obj.length);

obj.t = 'not t'
console.log(obj.t)

// Output:
// true
// undefined
// 10
// not t

var obj = { pasta: "spaghetti", length: 10 };

Object.defineProperty(obj, 't', {
  value: 't',
  writable: true
})
Object.freeze(obj);
// console.log(Object.isSealed(obj));

obj.newProp = 50;
console.log(obj.newProp);

delete obj.length;
console.log(obj.length);

obj.t = 'not t'
console.log(obj.t)

// Output:
// undefined
// 10
// t

var obj = { pasta: "spaghetti", length: 10 };

Object.preventExtensions(obj);
console.log(Object.isExtensible(obj));

obj.newProp = 50;
document.write(obj.newProp);

// Output:
// false
// undefined

var obj = {};
obj.newDataProperty = "abc";

var descriptor = Object.getOwnPropertyDescriptor(obj, "newDataProperty");
console.log(descriptor)
// output
//[object Object] {
//  configurable: true,
//  enumerable: true,
//  value: "abc",
//  writable: true
}

function Pasta(grain, width, shape) {
    // Define properties.
    this.grain = grain;
    this.width = width;
    this.shape = shape;
    this.toString = function () {
        return (this.grain + ", " + this.width + ", " + this.shape);
    }
}

var spaghetti = new Pasta("wheat", 0.2, "circle");

var arr = Object.getOwnPropertyNames(spaghetti);
document.write (arr);

// Output:
// grain,width,shape,toString