JavaScript技巧

JavaScript技巧篇：

1》状态机

     var state = function () {
                this.count = 0;
                this.fun = null;
                this.nowcount = 0;

            };      
            state.prototype = {
                load: function (count,fun) {
                    this.count = count;
                    this.fun = fun;
                    this.nowcount=0;
                },
                trigger: function () {
                    this.nowcount++;
                    if (this.nowcount >= this.count){
                        this.fun();
                    }
                }
            };

            //--------------

            function method1() {
                s.trigger();
            }
            function method2() {
                s.trigger();
            }
            var s = new state();
            s.load(2, function () {
                console.log('执行完毕');
            });
            setTimeout(method1, 1000);
            setTimeout(method2, 1000);

　　状态机一般用在多个异步任务的情况下，任务执行到某个阶段执行某个函数!

　　场景：同时请求多个异步执行[并发异步or异步串行](ajax,nodejs的io)，并处理结果集合，以上的写法最简单，但却不够优美，

　　这是我发现的至今为止最好的一js异步流程文章: http://www.docin.com/p-687111809.html~

2》setTimeout 的特殊应用　　

var hander=setTimeout(function () { },100);
clearTimeout(hander);

　　场景1》：按钮三次快速点击才触发事件　　 

     var num = 0;
        var hander = 0;
        function btnClick() {
            if (hander != 0){
                clearTimeout(hander);
                hander = 0;
            }
            num++;
            if (num >= 3) {
                Run();
                num = 0;
                clearTimeout(hander);
                hander = 0;
            }
            hander = setTimeout(function () {
                num = 0;
            }, 300);
        }
        function Run() {
            console.log('Run');
        }
    <input type="button" onclick="btnClick()" value="快速点击三次触发" />　

　　场景2》：快速多次点击只触发最后一次

 	var hander = 0;
        function btnClick() {
            if (hander != 0) {
                clearTimeout(hander);
                hander = 0;
            }
            hander = setTimeout(function () {
                Run();
            }, 300);
        }
        function Run() {
            console.log('Run');
        }
    <input type="button" onclick="btnClick()" value="快速点击只触发最后一次" />

 其他(长期更新)....

JavaScript写法：

　　《. & []》

     var obj = new Object();
        obj.add = function (a, b) {
            return a + b;
        }
        console.log(obj.add(1, 2));

        var obj2 = new Object();
        obj2['add'] = function (a, b) {
            return a + b;
        }
        console.log(obj2.add(1, 2));

　　《prototype》 最常见

     var obj = function (name) {
            this.name = name;
        }
        obj.prototype.say = function () {
            console.log(this.name);
        }
        obj.prototype.add = function (a, b) {
            return a + n;
        }
        var o = new obj('fuck');
        o.say();

        var obj = function (age) {
            this.age = age;

        };
        obj.prototype = {
            add: function (a, b) {
                return this.age;
            },
            say: function () {
                console.log('@');
            }
        }
        var o = new obj(23333);
        console.log(o.add());

　　《运行创建对象》 简单闭包

    var obj2 = function () {
            var _name = '123';
            function _add(a, b) {
                return a + b+_name;
            }
            return {
                add: _add,
                name: _name
            };
        }();
        console.log(obj2.add(1,3));

　　Object.create Object.defineProperty

        var obj = function () {
            this.add = function () {
                console.log('add')
            }
        }
        var outo = new obj();
        var o = Object.create(outo, {
            sub: {
                value: function () {
                    console.log('sub')
                }
            }
        });
        o.add();
        o.sub();　

  var obj = function () {
            this.add = function () {
                console.log('add')
            }
        }
        var o = new obj();
        Object.defineProperty(o, {
            "sub": {
                value: function () {
                    console.log('sub')
                },
                writeable: false
            }
        });
        o.sub();

　　__proto__

     var obj = function () {};
        obj.prototype = {
            add: function () {
                console.log('add');
            },
            sub: function () {
                console.log('sub');
            }
        };

        var o = {};//new Object();
        o.__proto__ = obj.prototype;

        o.add();
        o.sub();

    var o = {};//new Object();
        o.__proto__ = {
            add: function () {
                console.log('add');
            },
            sub: function () {
                console.log('sub');
            }
        };
        o.__proto__.go = function () {
            console.log('go');
        }

        o.add();
        o.sub();
        o.go();

　　call bind

   var obj = new Object();
        obj.name = 'myname';
        function add() {
            console.log(this.name+':add');
        }
        add.call(obj);


        var obj = new Object();
        obj.name = 'myname';
        function add() {
            console.log(this.name + ':add');
        }
        var newadd = add.bind(obj);
        newadd();

　　

 写在最后：

　　prototype》function的内置属性

　　__proto__》任意对象的内置属性

　　add.call(obj)》在obj对象域下执行add apply同是

　　add.bind(obj)》给add绑定一个obj对象执行域，obj对象并不会得到add，bind返回一个绑定执行域obj的函数add

　　类.add，为静态，不会被实例化

　　类.prototype.add，是修改原型，可以实例化 prototype 等价 this

　　对象.add 是为对象添加 add ，仅对象使用

　　对象.__proto__，是对象的所有属性集，

　　表达式:对象.__proto__= 某类.prototype 为原始属性完全继承，对象.__proto__=另一对象.__proto__ 为对象简单深层复制

　　表达式:对象.__proto__.add 为对象添加add或修改add，同理：对象.__proto__.add()为执行

　　同理:表达式：for (var i in o.__proto__) {console.log(o.__proto__[i])}为遍历对象属性

　　表达式：for (var i in 类.prototype ) {}为遍历类属性