animate 草案.....省去 cssHook 方法

$('#box_1').maya({
                left: '80%'
            }, {
                    duration: 800
                }, function () {
                    // init-fun
                    // 取得與目標相同的單位
                    // 如 left: px or %
                    // 若單位不同，程式將自動檢視並不執行
                    return {
                        left: $(this).css('left')
                    };
                }, function (initData, finalData, ratio) {
                    // 每個 tick 會執行
                    // 此函式將隱身在後面
                    var initLeft = parseFloat(initData.left);
                    var final_left = finalData.left;
                    var current_left = (final_left - initLeft) * ratio + left - initLeft;

                    $(this).css({
                        left: current_left + (單位)
                    });
                });

當一區塊文字過多，想以 ... 做省略

.x{
  overflow:hidden; /* 必要 */
  white-space: nowrap; /* 必要 */
  text-overflow: ellipsis;
}

網路字形

http://weloveiconfonts.com

vue2 Event Bus Example

var bus = new Vue();

var vueAwesomeCompare = new Vue({
 ... 
 components:{
    'vue-table':{

       // or mounted
       created:function(){
          bus.$on('popState', function(state){
             self.popState(state);
         });
       },
       methods:{
          popState:function(state){
          ...
         }
      }
    }
  ...
  }
 ...
});

window.onpopstate = function(event){
    bus.$emit('popState',event.state);
};

/////////////////////////////////////////////////////////////////////

var vueAwesomeCompare = new Vue({
      components:{
        'vue-table':{
            template:'#vue-table',
            
            props:[''],
            
            data:function(){
                return {
                    items:null,
                    brands:null,
                    brand:null,
                    comparing:false
                }
            },
       }
      ....
  },
});
console.log(vueAwesomeCompare.$data); //== Object {__ob__: Observer}
console.log(vueAwesomeCompare.$data.brand); //== undefined
console.log(vueAwesomeCompare.brand); //== undefined

/////////////////////////////////////////////////////////////////////

var bus = new Vue();

var vueAwesomeCompare = new Vue({
 ... 
 components:{
    'vue-table':{
       created:function(){
          bus.$on('popState', function(state){
             self.popState(state);
         });
       },
       methods:{
          popState:function(state){
          ...
         }
      }
    }
  ...
  }
 ...
});

window.onpopstate = function(event){
    bus.$emit('popState',event.state);
};

/////////////////////////////////////////////////////////////////////

export default {
      data () {
          return {
              title: '我的',
              headerInfo: []
          }
      },
      mounted: function () {
          this.$bus.on('getMessageCount', this.setMessageCount);
          this.$bus.on('setCenterHeader', this.setCenterHeader);
      },
      methods: {
          setMessageCount: function (params) {
              document.querySelector('.my_message').setAttribute('data-count', params.num)
          },
          setCenterHeader: function (params) {
              this.$set(this.$data, 'title', params.title)// 改变数据并且更新视图
              this.$set(this.$data, 'headerInfo', params)
          }
      }
  }

export default{
    data () {
        return {
            listData: [],
            loading: false,
            currentPageCount: 1,
            pageCount: 0
        }
    },
    mounted: function () {
        this.$bus.emit('setCenterHeader', {title: '消息中心', left: {className: 'back', href: ''}, 'right': {hide: true}})
    }
}

Flexbox 可參考的頁面

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes

https://demos.scotch.io/visual-guide-to-css3-flexbox-flexbox-playground/demos/

https://developer.mozilla.org/en-US/docs/Web/CSS/flex

網頁在手機顯示下，要弄側邊 slide 要注意的

html {
        width: 100%;
        height: 100%;
        overflow-x: hidden; /* 不知如何解釋 ，有時沒設 
                                            body.overflow-x 會沒效果 */
    }
    body {
        width: 100%;
        min-height: 100%;
        overflow-x: hidden; /* 超過頁面就 cut 掉 */
        position: relative;
    }

html { overflow:auto;} 是默认的。
如果不设置html height怎么会有滚动条，原来html有点特殊，它的widht和height是有浏览器窗口大小决定的。

几乎所有的浏览器，默认的偏移margin是在body元素上，而不是html的padding.（通过做实验确实如此）有些还是body的padding，所有重置页边距用body{margin:0;padding:0}缺一不可。

Promise 擴增，與 簡單的 $Deferred

(function () {

    if (typeof Promise !== 'function') {
        throw new Error('need Promise');
    }
    /*------------------------------------------------------------------------*/
    // promise.done()
    if (typeof Promise.prototype.done === 'undefined') {
        Promise.prototype.done = function (onFulfilled) {
            return this.then(onFulfilled, undefined);
        };
    }

    // promise.doneWith()
    if (typeof Promise.prototype.doneWith === 'undefined') {
        Promise.prototype.doneWith = function (onFulfilled, context) {
            onFulfilled = onFulfilled.bind(context);
            return this.then(onFulfilled, undefined);
        };
    }
    /*------------------------------------------------------------------------*/
    // promise.catchWith()
    if (typeof Promise.prototype.catchWith === 'undefined') {
        Promise.prototype.catchWith = function (onRejected, context) {
            onRejected = onRejected.bind(context);
            return this.then(undefined, onRejected);
        };
    }
    /*------------------------------------------------------------------------*/
    // promise.always()
    if (typeof Promise.prototype.always === 'undefined') {
        Promise.prototype.always = function (callback) {
            return this.then(function (data) {
                callback(false, data);
            }, function (error) {
                callback(true, error);
            });
        };
    }

    // promise.alwaysWith()
    if (typeof Promise.prototype.alwaysWith === 'undefined') {
        Promise.prototype.alwaysWith = function (callback, context) {

            callback = callback.bind(this);

            return this.then(function (data) {
                callback(false, data);
            }, function (error) {
                callback(true, error);
            });
        };
    }
    /*------------------------------------------------------------------------*/
    // setImmediate => process => setTimeout
    var async = typeof setImmediate !== 'undefined' ?
        (function (fn) {
            setImmediate(fn);
        }) : (typeof process !== 'undefined' && process.nextTick ?
            process.nextTick :
            function (fn) {
                setTimeout(fn, 0);
            });

    /*------------------------------------------------------------------------*/
    if (typeof module === 'object' && typeof module.exports === 'object') {
        module.exports = $Deferred;
    } else if (typeof window === 'object') {
        window.$Deferred = window.$Deferred || $Deferred;
    }
    /*------------------------------------------------------------------------*/
    function $Deferred() {
        if (this === window) {
            return new $Deferred();
        }
        var self = this;
        this._reject;
        this._resolve;
        this._promise = new Promise(function (resolve, reject) {
            self._resolve = resolve;
            self._reject = reject;
        });
    }

    (function () {
        this.p = this.promise = function () {
            return this._promise;
        };
        /**********************************************************************/
        this.resolve = function (arg, nextTick) {

            var self = this;

            if (nextTick != null && nextTick === true) {

                var job = (function () {
                    // 避免某些情況有些瀏覽器會叫
                    this._resolve(arg);
                }).bind(this);

                async(job);
            } else {
                this._resolve(arg);
            }
        };
        /**********************************************************************/
        this.reject = function (arg, nextTick) {
            var self = this;
            if (nextTick != null && nextTick === true) {

                var job = (function () {
                    // 避免某些情況有些瀏覽器會叫
                    this._reject(arg);
                }).bind(this);

                async(job);
            } else {
                this._reject(arg);
            }
        };
        /**********************************************************************/
        this.then = function (onFulfilled, onRejected) {
            var def = $Deferred();
            var p = this.promise();

            p = p.then(function (data) {
                return onFulfilled(data);
            }, function (error) {
                return onRejected(error);
            });
            /*--------------------------*/
            p.then(function (data) {
                def.resolve(data);
            }, function (error) {
                def.reject(error);
            });
            return def;
        };

        this.thenWith = function (onFulfilled, onRejected, context) {
            onFulfilled = onFulfilled.bind(context);
            onRejected = onRejected.bind(context);

            var def = $Deferred();
            var p = this.promise();

            p = p.then(function (data) {
                return onFulfilled(data);
            }, function (error) {
                return onRejected(error);
            });
            /*--------------------------*/
            p.then(function (data) {
                def.resolve(data);
            }, function (error) {
                def.reject(error);
            });
            return def;
        };
        /**********************************************************************/
        this.done = function (onFulfilled) {
            var def = $Deferred();
            var p = this.promise();


            p = p.then(function (data) {
                return onFulfilled(data);
            }, undefined);
            /*--------------------------*/
            p.then(function (data) {
                def.resolve(data);
            }, function (error) {
                def.reject(error);
            });
            return def;
        };

        this.doneWith = function (onFulfilled, context) {
            onFulfilled = onFulfilled.bind(context);

            var def = $Deferred();
            var p = this.promise();

            p = p.then(function (data) {
                return onFulfilled(data);
            }, undefined);
            /*--------------------------*/
            p.then(function (data) {
                def.resolve(data);
            }, function (error) {
                def.reject(error);
            });
            return def;
        };
        /**********************************************************************/
        this.catch = function (onRejected) {
            var def = $Deferred();
            var p = this.promise();

            p = p.catch(function (error) {
                return onRejected(error);
            });
            /*--------------------------*/
            p.then(function (data) {
                def.resolve(data);
            }, function (error) {
                def.reject(error);
            });
            return def;
        };

        this.catchWith = function (onRejected, context) {
            onRejected = onRejected.bind(context);

            var def = $Deferred();
            var p = this.promise();

            p = p.catch(function (error) {
                return onRejected(error);
            });
            /*--------------------------*/
            p.then(function (data) {
                def.resolve(data);
            }, function (error) {
                def.reject(error);
            });
            return def;
        };
        /**********************************************************************/
        this.always = function (callback) {
            var def = $Deferred();
            var p = this.promise();

            p = p.then(function (data) {
                return callback(false, data);
            }, function (error) {
                return callback(true, error);
            });
            /*--------------------------*/
            p.then(function (data) {
                def.resolve(data);
            }, function (error) {
                def.reject(error);
            });
            return def;
        };

        this.alwaysWith = function (callback, context) {
            callback = callback.binf(context);

            var def = $Deferred();
            var p = this.promise();

            p = p.then(function (data) {
                return callback(false, data);
            }, function (error) {
                return callback(true, error);
            });
            /*--------------------------*/
            p.then(function (data) {
                def.resolve(data);
            }, function (error) {
                def.reject(error);
            });
            return def;
        };
    }).call($Deferred.prototype);
})();