Start: 2017

2017年12月29日星期五

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>

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

2017年12月21日星期四

green backbone 基礎架構

2017年12月14日星期四

https://github.com/jashkenas/backbone

2017年10月14日星期六

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

2017年10月12日星期四

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)'

};

2017年9月6日星期三

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

2017年8月30日星期三

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

2017年8月23日星期三

網路字形

http://weloveiconfonts.com

2017年8月22日星期二

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

2017年8月17日星期四

網頁在手機顯示下，要弄側邊 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}缺一不可。

2017年7月20日星期四

練習用

http://itindex.net/detail/22-%E8%82%A1%E7%A5%A8-api
http://www.cnblogs.com/jiekoupt/p/5063324.html
https://www.juhe.cn/docs/api/id/21
http://kie0723.blogspot.tw/2010/11/google-stock-api.html
https://www.lightblue.asia/realtime-tw-stockprice-in-google-spreadsheet/
https://sites.google.com/site/kentyeh2000/zheng-jiao-suo-ji-shi-zi-xun-jie-xi

http://mis.twse.com.tw/stock/group.jsp?ex=tse&ind=TIDX
https://jerrynest.io/python-yahoo-finance-api-historical-stock-price/

2017年7月7日星期五

underscore.php

http://brianhaveri.github.io/Underscore.php/

$result = __($data_1)->find(function($data) {
return $data['value'] == 2;
});

NetBeans 深色背景主題更改教學

https://svenspruijt.nl/themebuilder/

2017年7月6日星期四

vue.....用 render 切換模板

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
    <script src="../../js_script/vue-2.3.0.js"></script>
    <script src="./template/temp_1.js"></script>
</head>

<body>
    <div id="app">
        <div>
            {{condition}}
        </div>
        <div>
            0<input type="radio" v-model="condition" value="0" /> 1
            <input type="radio" v-model="condition" value="1" />
        </div>
        <hr />
        <breed-table :breeds="breeds">
            <div>
                5555
            </div>
        </breed-table>
    </div>
    <script>
        new Vue({
            el: '#app',
            data: {
                condition: "0",
                breeds: [{
                    name: 'Persian',
                    colour: 'orange',
                    affection: 3,
                    shedding: 5
                }, {
                    name: 'Siberian',
                    colour: 'blue',
                    affection: 5,
                    shedding: 4
                }, {
                    name: 'Bombay',
                    colour: 'black',
                    affection: 4,
                    shedding: 2
                }]
            },
            components: {
                breedTable: breedTable
            }
        });
    </script>
</body>

</html>
////////////////////////////////////////////////////////////////////////////////////////////////

/temp_1.js>>

2017年7月5日星期三

(呆灣出屁王)組件父子間的資料同步

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>test v-mode transfore</title>
    <script src="../../js_script/vue-2.3.0.js"></script>
    <script>
        window.onload = function() {
            Vue.component('child', {
                template: '#child',
                props: ['y'],
                data: function() {
                    return {
                        x: this.y
                    }
                },
                watch: {
                    x: function() {
                      debugger;
                        this.$emit('update:y', this.x);
                    }
                }
            });

            new Vue({
                el: '#app',
                data: {
                    y: 'hi'
                },
                methods: {
                    updateY: function(value) {
                        this.y = value;
                    }
                }
            });
        }
    </script>
</head>

<body>
    <template id="child">
          <div>
            <p>
                x = {{x}}
            </p>
            <p>
                <input type="text" v-model="x" />
            </p>
          </div>
        </template>
    
    <div id="app">
        <div>
            y = {{y}}
        </div>
        <child :y="y" @update:y="updateY"></child>
    </div>
</body>

</html>
/////////////////////////////////////////////////////////////////////////////////////////////////
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>test v-mode transfore</title>
    <script src="../../js_script/vue-2.3.0.js"></script>
    <script>
        window.onload = function() {
            Vue.component('child', {
                template: '#child',
                props: ['y'],
                data: function() {
                    return {
                        x: this.y
                    }
                },
                watch: {
                    x: function() {
                        debugger;
                        this.$parent.$emit('update:y', this.x);
                    }
                }
            });
            /* ============================================================== */
            new Vue({
                el: '#app',
                data: {
                    y: 'hi'
                },
                created: function() {
                    debugger;
                    this.$on('update:y', this.updateY);

                },
                methods: {
                    updateY: function(value) {
                        debugger;
                        this.y = value;
                    }
                }
            });
        }
    </script>
</head>

<body>
    <template id="child">
          <div>
            <p>
                x = {{x}}
            </p>
            <p>
                <input type="text" v-model="x" />
            </p>
          </div>
        </template>
    
    <div id="app">
        <div>
            y = {{y}}
        </div>
        <child :y="y"></child>
    </div>
</body>

</html>

2017年6月30日星期五

(vue)另一種切換模版內容的方式(模版 data 不變)

<!DOCTYPE html>
<html lang="en">

<head>
    <title></title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="../js_lib/vue-2.3.0.js"></script>
    <script>
Vue.component('child', {
    template: `<div>
            <h1 v-if="level === 1">
                1
            </h1>
            <h1 v-if="level === 2">
                2
            </h1>
            <h1 v-if="level === 3">
                3
            </h1>
        </div>`,
    props: {
        level: {
            type: Number
        }
    }
});

</script>
</head>

<body>
    <div id="app">
        <span v-for="i in 3">
            {{i}}:
            <input type="radio" v-model="level" :value="i">
        </span>
        <child ref="child" :level="level"></child>
    </div>
    <script>
        new Vue({
            el: '#app',
            data: {
                level: 1
            }
        });
    </script>
</body>

</html>

2017年6月20日星期二

angularJS 控制器，數據注入

var myApp = angular.module('myApp', []);

// 注入 appMsg

myApp.value('appMsg', 'Hello from My App');

var controller = function ($scope, msg) {

$scope.message = msg;

};

controller['$inject'] = ['$scope', 'appMsg'];

myApp.controller('controllerA', controller);

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

var myApp = angular.module('myApp', []);

// 注入 y

myApp.value('y', 'gy');

myApp.config(function($provide){

// 注入 x

$provide.value('x', 'xman....');

});

myApp.controller('ct_1', ['$scope', 'x','y',function($scope, x, y){

$scope.name = x;

}]);

2017年5月26日星期五

$.closestChildren 找到符合過濾條件最接近的子孫

//for backbone(取代 find)
(function ($) {
    // 找到符合過濾條件最接近的子孫
    $.fn.closestChildren = function (selector) {
        debugger;
        var self = this;
        this.each(function (i, dom) {

            $find = $.closestChildren(dom, selector);
            self[i] = $find.get(0);
        });
        /*------------------------------------*/
        var resultList = this.toArray().filter(function (item) {
            return (item != null);
        });
        for (var i = 0; i < this.length; i++) {
            if (resultList[i]) {
                this[i] = resultList[i];
            } else {
                delete this[i];
            }
        }

        this.length = resultList.length;

        return this;
    };
    /* ====================================================================== */
    $.closestChildren = function (dom, selector) {
        var domList = [];
        var target = find(dom);
        /* ---------------------------------- */
        if (target.length) {
            // 第一輪就找到
        } else {
            // 廣域搜尋
            for (var i = 0; i < domList.length; i++) {
                target = find(domList[i]);
                if (target.length > 0) {
                    break;
                }
            }
        }
        /* ---------------------------------- */
        function find(dom) {
            var $findList = $(dom).children(selector);

            if ($findList.length) {
                // 有找到
            } else {
                // 沒找到
                var childList = $(dom).children().toArray();
                domList = domList.concat(childList);
            }
            return $findList;
        }

        domList = [];
        return target;
    };
})(jQuery);

(js)編寫含式變項，常會遇到的問題

2017年5月25日星期四

alert視窗如何換行？

在要斷行的地方插入一個 "\n" , 要斷幾行就插幾個 "\n

<script>
alert("第一行\n第二行\n\n第四行")
</script>

2017年5月16日星期二

mustache

if
{{#print}}
    {{#beatles}}
        <p>{{name}}</p>
    {{/beatles}}
{{/print}}
------------------------------------
else
{{^print}}
    {{#beatles}}
        <p>no print: {{name}}</p>
    {{/beatles}}
{{/print}}

viewData =
{
            print: true,
            beatles: [
                { "firstName": "John", "lastName": "Lennon" },
                { "firstName": "Paul", "lastName": "McCartney" },
                { "firstName": "George", "lastName": "Harrison" },
                { "firstName": "Ringo", "lastName": "Starr" }
            ],
            name: function () {
                return this.firstName + " " + this.lastName;
            }
        }

2017年5月15日星期一

atom 設定

'.platform-win32':
'ctrl-\\': 'unset!'
'ctrl-alt-l': 'unset!'
'ctrl-`':'tree-view:toggle'
'alt-`':'symbols-list:toggle'

'atom-text-editor':
'ctrl-space': 'unset!'
'ctrl-\\': 'autocomplete-plus:activate'
# 'ctrl-\\': 'autocomplete:toggle'
'alt-/': 'autocomplete:toggle'

'.active.pane':
'alt-\'': 'autocomplete:toggle'

'atom-workspace':
'ctrl-alt-g': 'git-control:toggle'

comic mono,jetbrains mono nl, Menlo, Consolas, DejaVu Sans Mono, monospace

2017年5月3日星期三

(codeIgniter)筆記

網頁緩衝 >>

寫在 controller

$this>output>cache(5);

-----------------------------------------------------------------------
路由 >>

$route['test/([a-zA-Z]+)/\\1'] = 'test_2/classTest';

url(test/a/a) => 'test_2/classTest';

$route['test/\w+/\w+/(.*)'] = 'test_2/classTest/$1'; ($1區塊為收到的參數)

test1/5/6/..... => 'test_2/classTest/$1'

$route['test/\w+/\w+/(:any)'] = 'test_2/classTest/$1'; ($1區塊為收到的參數)

test1/5/6/..... => 'test_2/classTest/$1'

2017年4月29日星期六

(js)_.debounce_b

////////////////////////////////////////////////////////////////////////////////
/**
* _.debounce_b
*
* 1.0.1
*
* 2017-4-14
*
* 減輕高頻執行事件的執行頻率
*
* for backbone.js event
*
*/
////////////////////////////////////////////////////////////////////////////////
!(function (root) {
// 被引用了嗎

if (typeof _ === 'function') {
_.mixin({
debounce_b: debounce_
});
} else if (typeof module === 'object' && typeof module.exports === 'object') {
module.exports = debounce_;
} else {
return;
}
/* ====================================================================== */
/**
* @param {int} wait: 要超過多少時間間隔才執行
* @param {function} job: 要執行的事
*
*/
function debounce_(callback, wait) {
var d = new Debounce({
callback: callback,
waitTime: wait
});
return d.proxy_fn();
};
////////////////////////////////////////////////////////////////////////////
// core
function Debounce(option) {
var self = this;

this.waitTime = 5;
this._waitTime;
/* ---------------------------------- */
this._callback;
this.timeHandle;
this.dataList = [];
this.checkTime;
/* ================================================================== */
// 建構式
(function () {
(option !== Object(option)) && (option = {});

(typeof option.waitTime === 'number') && (this.waitTime = option.waitTime);
(typeof option.callback === 'function') && (this._callback = option.callback);

this.check();
}).call(this);
}
////////////////////////////////////////////////////////////////////////////
(function () {
/**
* 暴露在外的函式
* 外部呼叫此
*/
this.proxy_fn = function () {
return function (data) {
this._check(data);
}.bind(this);
};
/* ================================================================== */
this._check = function (data) {
// 記錄每次呼叫傳來的資料
this.dataList.push(data);

// 更新時間
this.checkTime = (new Date()).getTime();

this._bindTimeCheck();
};
/* ================================================================== */
this._bindTimeCheck = function () {
if (!this.timeHandle) {
console.log('no lock but will lock');
this._waitTime = this._waitTime || this.waitTime;

this.timeHandle = setTimeout(function () {
console.log('open lock');
this.timeHandle = undefined;
this._timeEnd();
}.bind(this), this._waitTime);
} else {
console.log('is lock');

}
};
/* ================================================================== */
this._timeEnd = function () {
var now = (new Date()).getTime();
var diff = now - this.checkTime;

console.log('timeCheck: 離上一次激發時間: ', diff);

if (diff < this.waitTime) {

// 未過時間檢測間隔
this._waitTime = this.waitTime - diff;

console.log('will lock agin: 上鎖時間: ', this._waitTime);

this._bindTimeCheck();
} else {
// 已過時間檢測間隔

console.log('finish');

this._waitTime = undefined;

// 執行任務
this._doJob();
}
};
/* ================================================================== */
this._doJob = function () {
var self = this;

// 執行任務
this._callback(this.dataList);

};
/* ================================================================== */
this.check = function () {
var error_array = [];

if (!this._callback) {
error_array.push('no setting function');
}

if (error_array.length > 0) {
throw new Error(error_array.join(' | '));
}
};
}).call(Debounce.prototype);

})(this || {});

訂閱：文章 (Atom)

2017年12月29日 星期五

2017年12月21日 星期四

2017年12月14日 星期四

2017年10月14日 星期六

2017年10月12日 星期四

2017年9月6日 星期三

2017年8月30日 星期三

2017年8月23日 星期三

2017年8月22日 星期二

2017年8月17日 星期四

2017年7月20日 星期四

2017年7月7日 星期五

2017年7月6日 星期四