GreenBackbone view 的 ajax(template | component)

--------------------------------------------------------------------------
// component的例子
<div>
    {{x}}
</div>
<script>
    // 把上面的 html內容傳進 fun
    function(template) {
        return Backbone.BForView.extend({
            templateContent: template
        });
    }
</script>
--------------------------------------------------------------------------
// template的例子
<div>
    {{x}}
</div>
<script>
    function(view) {
          // template mounted
    }
</script>
<script>
    function(view) {
          // template removed    }
</script>
 --------------------------------------------------------------------------
// template 改進
<div>
    {{x}}
</div>
<script>
  
    function() {
         return {
               mounted: fun(view),
               unmouted: fun(view)
              }
    }
</script>

 --------------------------------------------------------------------------

Backbone.Reactive 重要的例子

var d_1 = [{
            age: 12,
            selected: true
        }, {
            age: 1,
            selected: false
        }, {
            age: 2,
            selected: false
        }];
        var d_2 = Backbone.Reactive(d_1, {
            link: function(parent, child) {

                parent.listenTo(child, 'all', function(e, event, options) {
                    debugger;
                    var info = 'parent => ' + event + '|' + JSON.stringify(arguments);

                    for (var i = 0; i < this.value.length; i++) {
                        debugger;
                        var v = this.value[i];
                        var ob = v._bc_ob_;

                        if (v._bc_ob_.cid !== e.target.cid) {
                            ob.triggerOptions = {
                                exclude: [this] // 防止事件無窮回圈
                            }
                            v.selected = false;
                        }
                    }

                    $('#msg_1').html(JSON.stringify(this));
                })
            }
        });
        /*--------------------------*/

        d_2._bc_ob_.on('change', function() {
            var info = 'parent => ' + event + '|' + JSON.stringify(arguments);
            alert(info);
        });

        function set() {

            var index = Math.floor(Math.random() * d_2.length);
            index = (index >= d_2.length ? (d_2.length - 1) : index);
            d_2[index].selected = true;
        }

javascript Map

Properties   
    Map.prototype.size   

Methods
    Map.prototype.clear()

    Map.prototype.delete()

    Map.prototype.entries()

    Map.prototype.forEach()

    Map.prototype.get()

    Map.prototype.has()

    Map.prototype.keys()

    Map.prototype.set()

    Map.prototype.values()

    Map.prototype[@@iterator]()
-----------------------------------------------------------------

範例

區段

使用 Map 物件

區段

var myMap = new Map();

var keyString = 'a string',
    keyObj = {},
    keyFunc = function() {};

// setting the values
myMap.set(keyString, "value associated with 'a string'");
myMap.set(keyObj, 'value associated with keyObj');
myMap.set(keyFunc, 'value associated with keyFunc');

myMap.size; // 3

// getting the values
myMap.get(keyString);    // "value associated with 'a string'"
myMap.get(keyObj);       // "value associated with keyObj"
myMap.get(keyFunc);      // "value associated with keyFunc"

myMap.get('a string');   // "value associated with 'a string'"
                         // because keyString === 'a string'
myMap.get({});           // undefined, because keyObj !== {}
myMap.get(function() {}) // undefined, because keyFunc !== function () {}

使用 NaN 作為 Map 的鍵

區段

NaN can also be used as a key. Even though every NaN is not equal to itself (NaN !== NaN is true), the following example works because NaNs are indistinguishable from each other:

var myMap = new Map();
myMap.set(NaN, 'not a number');

myMap.get(NaN); // "not a number"

var otherNaN = Number('foo');
myMap.get(otherNaN); // "not a number"

透過 for..of 迭代 Maps

區段

Maps can be iterated using a for..of loop:

var myMap = new Map();
myMap.set(0, 'zero');
myMap.set(1, 'one');
for (var [key, value] of myMap) {
  console.log(key + ' = ' + value);
}
// 0 = zero
// 1 = one

for (var key of myMap.keys()) {
  console.log(key);
}
// 0
// 1

for (var value of myMap.values()) {
  console.log(value);
}
// zero
// one

for (var [key, value] of myMap.entries()) {
  console.log(key + ' = ' + value);
}
// 0 = zero
// 1 = one

透過 forEach() 迭代 Maps

區段

Maps can be iterated using the forEach() method:

myMap.forEach(function(value, key) {
  console.log(key + ' = ' + value);
});
// Will show 2 logs; first with "0 = zero" and second with "1 = one"

與 Array 物件關聯

區段

var kvArray = [['key1', 'value1'], ['key2', 'value2']];

// Use the regular Map constructor to transform a 2D key-value Array into a map
var myMap = new Map(kvArray);

myMap.get('key1'); // returns "value1"

// Use the Array.from function to transform a map into a 2D key-value Array
console.log(Array.from(myMap)); // Will show you exactly the same Array as kvArray

// Or use the keys or values iterators and convert them to an array
console.log(Array.from(myMap.keys())); // Will show ["key1", "key2"]

green backbone 基礎架構

https://github.com/jashkenas/backbone

https://github.com/jashkenas/backbone

drupal 簡單 model_example

<?php

// $Id$

function gt_site_menu() {

    $items['site/%'] = array(
        'title' => 'test',
        'page callback' => 'goPage',
        'access callback' => true
    );

    return $items;
}

function goPage() {
    $res = theme('home', array());
    return $res;
}

function gt_site_theme() {
    // 取得 gt_site 該 model 的 path
    $path = drupal_get_path('module', 'gt_site');
    $path .= '/themes';

    return array(
        'home' => array(
            'template' => 'home',
            'path' => $path)
    );
}

/**
 * Implements hook_help().
 */
function gt_site_help($path, $arg) {

    $res = array();

    foreach ($_GET as $key => $value) {
        $res[] = sprintf('%s => %s', $key, $value);
    }
   
    $res[] = $path = drupal_get_path('module', 'gt_site');
   
    $res = implode(' | ', $res);

    return t($res);
}

js 筆記

let x = 1;

      y = (++x, ++x);
      console.log(y);

y=3
-----------------------------------------------------------------------------
js 基本類型

boolean, number, string, undefined
null is object
-----------------------------------------------------------------------------

js一些預設方法

 

string.slice(s, e), array.slice(s, e) => slice(切片) 

string.split(符號) 分割成 array => split (分裂)

array.splice(s, l, data_1, data_2)=>splice (拼接)

string.match() => //正則是否用/g差別很大，/g將不顯示捕獲組，但會將符合的化為 array
regular.exec()

jquery 處理單位換算

// elem: dom
    // prop: cssKey
    // valueParts(單位與數值)
    function adjustCSS(elem, prop, valueParts, tween) {
        debugger;

        var adjusted;
        var scale = 1;
        var maxIterations = 20;

        //----------------------------
        // 獲取現在的值
        var currentValue = tween ?
                function () {
                    return tween.cur();
                } :
                function () {
                    return jQuery.css(elem, prop, "");
                };
        var initial = currentValue();
        //----------------------------
        // 設定的單位
        let unit;

        if (valueParts && valueParts[3]) {
            unit = valueParts[3];
        } else {
            unit = (jQuery.cssNumber[prop] ? "" : "px");
        }
        //----------------------------
        // 預設單位
        // Starting value computation is required for potential unit mismatches
        var initialInUnit = (jQuery.cssNumber[prop] || unit !== "px" && +initial);

        if (initialInUnit) {
            initialInUnit = rcssNum.exec(jQuery.css(elem, prop));
        }

        //----------------------------
        // 若預設單位與設定單位不同
        // 必須進入轉換
        if (initialInUnit && initialInUnit[3] !== unit) {

            // Trust units reported by jQuery.css
            unit = unit || initialInUnit[3];

            // Make sure we update the tween properties later on
            valueParts = valueParts || [];

            // Iteratively approximate from a nonzero starting point
            initialInUnit = +initial || 1;

            do {

                // If previous iteration zeroed out, double until we get *something*.
                // Use string for doubling so we don't accidentally see scale as unchanged below
                scale = scale || ".5";

                // Adjust and apply
                initialInUnit = initialInUnit / scale;
                jQuery.style(elem, prop, initialInUnit + unit);

                // Update scale, tolerating zero or NaN from tween.cur()
                // Break the loop if scale is unchanged or perfect, or if we've just had enough.
            } while (
                    (function () {
                        debugger;
                        let c_value = currentValue();
                        let a = scale;

                        // initial(一開始的值)
                        // 用目標單位移動後，取比例值，供下次修正
                        let b = scale = (c_value / initial);

                        return (a !== b) && (scale !== 1) && --maxIterations;
                    })()
                    );
        }
        //----------------------------
        if (valueParts) {
            initialInUnit = +initialInUnit || +initial || 0;

            // Apply relative offset (+=/-=) if specified
            adjusted = valueParts[1] ?
                    initialInUnit + (valueParts[1] + 1) * valueParts[2] :
                    +valueParts[2];
            if (tween) {
                tween.unit = unit;
                tween.start = initialInUnit;
                tween.end = adjusted;
            }
        }
        return adjusted;
    }--------------------------------------------------------------------

js easing-fun

http://gsgd.co.uk/sandbox/jquery/easing/

https://github.com/gdsmith/jquery.easing/blob/master/jquery.easing.js

// 緩動函式
    // 擴增 jquery.easing 的功能
    $.easing['jswing'] = $.easing['swing'];


// x: percent (0 ~ 1)
    // t: current time (經過時間 ms)
    // b: begInnIng value (0)
    // c: change In value (1)
    // d: duration (總時間 ms)
    $.extend($.easing, {
        def: 'easeOutQuad',
        ease: function(x, t, b, c, d) {
            return $.easing[$.easing.def](x, t, b, c, d);
        },
        linear: function(x) {
            return x;
        },
        swing: function(x, t, b, c, d) {
            //alert(jQuery.easing.default);
            return $.easing[$.easing.def](x, t, b, c, d);
        },
        easeInQuad: function(x, t, b, c, d) {
            return c * (t /= d) * t + b;
        },
        easeOutQuad: function(x, t, b, c, d) {
            var result = -c * (t /= d) * (t - 2) + b;
            return result;
        },
        easeInOutQuad: function(x, t, b, c, d) {
            if ((t /= d / 2) < 1)
                return c / 2 * t * t + b;
            return -c / 2 * ((--t) * (t - 2) - 1) + b;
        },
        easeInCubic: function(x, t, b, c, d) {
            return c * (t /= d) * t * t + b;
        },
        easeOutCubic: function(x, t, b, c, d) {
            return c * ((t = t / d - 1) * t * t + 1) + b;
        },
        easeInOutCubic: function(x, t, b, c, d) {
            if ((t /= d / 2) < 1)
                return c / 2 * t * t * t + b;
            return c / 2 * ((t -= 2) * t * t + 2) + b;
        },
        easeInQuart: function(x, t, b, c, d) {
            return c * (t /= d) * t * t * t + b;
        },
        easeOutQuart: function(x, t, b, c, d) {
            return -c * ((t = t / d - 1) * t * t * t - 1) + b;
        },
        easeInOutQuart: function(x, t, b, c, d) {
            if ((t /= d / 2) < 1)
                return c / 2 * t * t * t * t + b;
            return -c / 2 * ((t -= 2) * t * t * t - 2) + b;
        },
        easeInQuint: function(x, t, b, c, d) {
            return c * (t /= d) * t * t * t * t + b;
        },
        easeOutQuint: function(x, t, b, c, d) {
            return c * ((t = t / d - 1) * t * t * t * t + 1) + b;
        },
        easeInOutQuint: function(x, t, b, c, d) {
            if ((t /= d / 2) < 1)
                return c / 2 * t * t * t * t * t + b;
            return c / 2 * ((t -= 2) * t * t * t * t + 2) + b;
        },
        easeInSine: function(x, t, b, c, d) {
            // console.dir(arguments);
            var result = -c * Math.cos(t / d * (Math.PI / 2)) + c + b;
            return result;
        },
        easeOutSine: function(x, t, b, c, d) {
            return c * Math.sin(t / d * (Math.PI / 2)) + b;
        },
        easeInOutSine: function(x, t, b, c, d) {
            return -c / 2 * (Math.cos(Math.PI * t / d) - 1) + b;
        },
        easeInExpo: function(x, t, b, c, d) {
            return (t == 0) ? b : c * Math.pow(2, 10 * (t / d - 1)) + b;
        },
        easeOutExpo: function(x, t, b, c, d) {
            return (t == d) ? b + c : c * (-Math.pow(2, -10 * t / d) + 1) + b;
        },
        easeInOutExpo: function(x, t, b, c, d) {
            if (t == 0)
                return b;
            if (t == d)
                return b + c;
            if ((t /= d / 2) < 1)
                return c / 2 * Math.pow(2, 10 * (t - 1)) + b;
            return c / 2 * (-Math.pow(2, -10 * --t) + 2) + b;
        },
        easeInCirc: function(x, t, b, c, d) {
            return -c * (Math.sqrt(1 - (t /= d) * t) - 1) + b;
        },
        easeOutCirc: function(x, t, b, c, d) {
            return c * Math.sqrt(1 - (t = t / d - 1) * t) + b;
        },
        easeInOutCirc: function(x, t, b, c, d) {
            if ((t /= d / 2) < 1)
                return -c / 2 * (Math.sqrt(1 - t * t) - 1) + b;
            return c / 2 * (Math.sqrt(1 - (t -= 2) * t) + 1) + b;
        },
        easeInElastic: function(x, t, b, c, d) {
            var s = 1.70158;
            var p = 0;
            var a = c;
            if (t == 0)
                return b;
            if ((t /= d) == 1)
                return b + c;
            if (!p)
                p = d * .3;
            if (a < Math.abs(c)) {
                a = c;
                var s = p / 4;
            } else
                var s = p / (2 * Math.PI) * Math.asin(c / a);
            return -(a * Math.pow(2, 10 * (t -= 1)) * Math.sin((t * d - s) * (2 * Math.PI) / p)) + b;
        },
        easeOutElastic: function(x, t, b, c, d) {
            var s = 1.70158;
            var p = 0;
            var a = c;
            if (t == 0)
                return b;
            if ((t /= d) == 1)
                return b + c;
            if (!p)
                p = d * .3;
            if (a < Math.abs(c)) {
                a = c;
                var s = p / 4;
            } else
                var s = p / (2 * Math.PI) * Math.asin(c / a);
            return a * Math.pow(2, -10 * t) * Math.sin((t * d - s) * (2 * Math.PI) / p) + c + b;
        },
        easeInOutElastic: function(x, t, b, c, d) {
            var s = 1.70158;
            var p = 0;
            var a = c;
            if (t == 0)
                return b;
            if ((t /= d / 2) == 2)
                return b + c;
            if (!p)
                p = d * (.3 * 1.5);
            if (a < Math.abs(c)) {
                a = c;
                var s = p / 4;
            } else
                var s = p / (2 * Math.PI) * Math.asin(c / a);
            if (t < 1)
                return -.5 * (a * Math.pow(2, 10 * (t -= 1)) * Math.sin((t * d - s) * (2 * Math.PI) / p)) + b;
            return a * Math.pow(2, -10 * (t -= 1)) * Math.sin((t * d - s) * (2 * Math.PI) / p) * .5 + c + b;
        },
        easeInBack: function(x, t, b, c, d, s) {
            if (s == undefined)
                s = 1.70158;
            return c * (t /= d) * t * ((s + 1) * t - s) + b;
        },
        easeOutBack: function(x, t, b, c, d, s) {
            if (s == undefined)
                s = 1.70158;
            return c * ((t = t / d - 1) * t * ((s + 1) * t + s) + 1) + b;
        },
        easeInOutBack: function(x, t, b, c, d, s) {
            if (s == undefined)
                s = 1.70158;
            if ((t /= d / 2) < 1)
                return c / 2 * (t * t * (((s *= (1.525)) + 1) * t - s)) + b;
            return c / 2 * ((t -= 2) * t * (((s *= (1.525)) + 1) * t + s) + 2) + b;
        },
        easeInBounce: function(x, t, b, c, d) {
            return c - $.easing.easeOutBounce(x, d - t, 0, c, d) + b;
        },
        easeOutBounce: function(x, t, b, c, d) {
            if ((t /= d) < (1 / 2.75)) {
                return c * (7.5625 * t * t) + b;
            } else if (t < (2 / 2.75)) {
                return c * (7.5625 * (t -= (1.5 / 2.75)) * t + .75) + b;
            } else if (t < (2.5 / 2.75)) {
                return c * (7.5625 * (t -= (2.25 / 2.75)) * t + .9375) + b;
            } else {
                return c * (7.5625 * (t -= (2.625 / 2.75)) * t + .984375) + b;
            }
        },
        easeInOutBounce: function(x, t, b, c, d) {
            if (t < d / 2)
                return $.easing.easeInBounce(x, t * 2, 0, c, d) * .5 + b;
            return $.easing.easeOutBounce(x, t * 2 - d, 0, c, d) * .5 + c * .5 + b;
        }
    });

用4點產生 cubicBezier 的座標

/**
 * 給予所有的控制點(只負責一維)
 *
 * @param {*} points: 控制曲線的點數
 * @param {*} t: 0-1
 */
function cubicBezier(points, t) {

    var tmpPoints;

    while (points.length > 1) {

        tmpPoints = [];
        for (var i = 0; typeof points[i + 1] !== 'undefined'; i++) {

            var value = (points[i + 1] - points[i]) * t + points[i];
            tmpPoints.push(value);
        }
        points = tmpPoints.slice();
    }

    return points[0];
}


// 形成座標軸
function genCoordinate(data, sample) {
    var sample = sample || 10;

    var coordinate = [];

    var x = [];
    var y = [];

    data.forEach(function (v, i) {
        x.push(v.x);
        y.push(v.y);
    });

    var loop = true;
    var _sample = (1 / sample);
    for (var i = 0; loop; i += _sample) {

        if (i >= 1) {
            i = 1;
            loop = false;
        }
        var _x = cubicBezier(x, i);
        var _y = cubicBezier(y, i);

        coordinate.push({x: _x, y: _y});
    }

    return coordinate;
}

// 4個控制點
var points = [{x: 0, y: 0}, {x: 1, y: 0}, {x: 1, y: 0}, {x: 1, y: 1}];

// 產生座標
var res = genCoordinate(points);

console.dir(res);

// 必須用內差法從座標軸取值

cubicBezier 的 function 轉換

https://github.com/matthewlein/Ceaser/blob/master/developer/ceaser-easings.js

var ceaser = {

// defaults

'linear' : 'linear',

'ease' : 'ease',

'easeIn' : 'ease-in',

'easeOut' : 'ease-out',

'easeInOut' : 'ease-in-out',

// Penner equations

'easeInCubic' : 'cubic-bezier(.55,.055,.675,.19)',

'easeOutCubic' : 'cubic-bezier(.215,.61,.355,1)',

'easeInOutCubic' : 'cubic-bezier(.645,.045,.355,1)',

'easeInCirc' : 'cubic-bezier(.6,.04,.98,.335)',

'easeOutCirc' : 'cubic-bezier(.075,.82,.165,1)',

'easeInOutCirc' : 'cubic-bezier(.785,.135,.15,.86)',

'easeInExpo' : 'cubic-bezier(.95,.05,.795,.035)',

'easeOutExpo' : 'cubic-bezier(.19,1,.22,1)',

'easeInOutExpo' : 'cubic-bezier(1,0,0,1)',

'easeInQuad' : 'cubic-bezier(.55,.085,.68,.53)',

'easeOutQuad' : 'cubic-bezier(.25,.46,.45,.94)',

'easeInOutQuad' : 'cubic-bezier(.455,.03,.515,.955)',

'easeInQuart' : 'cubic-bezier(.895,.03,.685,.22)',

'easeOutQuart' : 'cubic-bezier(.165,.84,.44,1)',

'easeInOutQuart' : 'cubic-bezier(.77,0,.175,1)',

'easeInQuint' : 'cubic-bezier(.755,.05,.855,.06)',

'easeOutQuint' : 'cubic-bezier(.23,1,.32,1)',

'easeInOutQuint' : 'cubic-bezier(.86,0,.07,1)',

'easeInSine' : 'cubic-bezier(.47,0,.745,.715)',

'easeOutSine' : 'cubic-bezier(.39,.575,.565,1)',

'easeInOutSine' : 'cubic-bezier(.445,.05,.55,.95)',

'easeInBack' : 'cubic-bezier(.6,-.28,.735,.045)',

'easeOutBack' : 'cubic-bezier(.175, .885,.32,1.275)',

'easeInOutBack' : 'cubic-bezier(.68,-.55,.265,1.55)'

};

jq 當遇到如 ie left=auto 時的處理方式

cur: function() {
        debugger;
        if ( this.elem[ this.prop ] != null && (!this.elem.style || this.elem.style[ this.prop ] == null) ) {
            return this.elem[ this.prop ];
        }

        var parsed,
            r = jQuery.css( this.elem, this.prop );
        // Empty strings, null, undefined and "auto" are converted to 0,
        // complex values such as "rotate(1rad)" are returned as is,
        // simple values such as "10px" are parsed to Float.
        return isNaN( parsed = parseFloat( r ) ) ? !r || r === "auto" ? 0 : r : parsed;
    }

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);
})();