adobe

2013-09-17

可通过添加微信公共帐号icodekata，或者微博帐号姜志辉iS与我讨论

Javascript是单线程的

javascript的事件机制

for(var i = 0;i<=3;i++){
    setTimeout(function() {
        console.log(i);
    }, 0);
}

javascript天生就是单线程的

var startDate = new Date();
setTimeout(function() {
    var endDate = new Date();
    console.log(endDate - startDate);
},500);
while(new Date - startDate < 1000){};

事件与作用域

    $('#content').bind('click',function() {
        $(this).addClass('a');
        /*setTimeout(function() {
            $(this).addClass('b');
        },1000);*/
        /*setTimeout($.proxy(function() {
            $(this).addClass('b');
        },this),1000);*/
        var that = this;
        setTimeout(function() {
            $(that).addClass('b');
        },1000);
    });

函数的几种调用模式

var obj = {
    name:'jobs',
    sayHello:function() {
        console.log("hello," + this.name);
    }
}

作为方法调用

obj.sayHello();

作为函数调用

var method = obj.sayHello;
method();

使用call || apply 来指定作用域

var method = obj.sayHello;
method.call(obj,'ddd');
var other = {name:'gates'};
obj.sayHello.call(other,'abc');
obj.sayHello.apply(other,['abc']);

作为构造函数来调用

var obj = {
    name:'jobs',
    sayHello:function(arg) {
        console.log("hello," + this.name + ' : ' + arg);
        this.msg = arg;
    }
}

var jobs = new obj.sayHello('abc');
console.log(jobs.msg);

Javascript定义角色的几种模式

定义{}

var obj = {
    name:'jobs',
    age:55,
    sayHello:function() {

    }
}

通过new调用构造函数

var Person = function(name,age) {
    this.name = name;
    this.age = age;
    this.sayHello = function() {
        console.log(this.name + ":" + this.age);
    };
};

var jobs = new Person('jobs',55);
var gates = new Person('gates',56);

通过prototype与构造函数定义对象

var Person = function(name,age) {
    this.name = name;
    this.age = age;
};

Person.prototype.sayHello = function() {
    console.log(this.name + ":" + this.age);
}

var jobs = new Person('jobs',55);
var gates = new Person('gates',56);
jobs.sayHello();
gates.sayHello();

模块

通过即时函数创建模块

(function() {
    c = 'c';
    var a = 'a';
    var name = 'jobs';
    var sayHello = function() {
        console.log(this.name);
    };
    this.adobe = this.adobe || {};
    this.adobe.tools = {
        name : name,
        sayHello:sayHello
    };
}).call(global);

命名空间

        this.adobe = this.adobe || {};

module

module.exports = adobe;

创建类

class

var Person = new Class();

构造函数

Person.prototype.initialize = function(name) {
    this.name = name;
};

方法定义

Person.method('sayHello',function() {
    console.log(this.name);
})
.method('a',function() {console.log('a')})
.method('b',function() {console.log('b')});

示例代码

Function.prototype.method = function(name, func) {
    this.prototype[name] = func;
    return this;
};

function Class() {
    var klass = function() {
        if (typeof this.init === 'function') {
            this.init.apply(this, arguments);
        }
    };
    return klass;
}
var Person = new Class();
Person.prototype.init = function(name) {
    this.name = name;
};
Person.method('sayHello', function() {
    console.log(this.name);
}).method('a', function() {
    console.log('a');
});
var jobs = new Person('jobs');
jobs.sayHello();

Javascript的类体系

定义类

function Class () {
    return function() {};
}

定义构造函数

function Class () {
    return function() {
        if(typeof this.initialize === 'function'){
            this.initialize.apply(this,arguments);
        }
    };
}

定义公共实例方法

function Class () {
    var klass = function() {
        if(typeof this.initialize === 'function'){
            this.initialize.apply(this,arguments);
        }
    };
    klass.method = function(name,func) {
        this.prototype[name] = func;
    };
    return klass;
}

Javascript的继承

对象的继承

proto

obj2.__proto__ = obj;

Object.create()

var obj2 = Object.create(obj);

类的继承

prototype

var Surrogate = function(){ this.constructor = child; };
Surrogate.prototype = parent.prototype;
child.prototype = new Surrogate;

类抄写

function Child (name) {
    Parent.call(this,name);
}

圣杯模式

var klass = function() {
    if(typeof this.initialize === 'function'){
        this.initialize.apply(this,arguments);
    }
};
klass.method = function(name,func) {
    this.prototype[name] = func;
};
klass.extend = function() {
    var child = function() {
        klass.apply(this,arguments);
    };
    var Surrogate = function(){ this.constructor = child; };
Surrogate.prototype = this.prototype;
child.prototype = new Surrogate;
child.prototype.__super__ = this.prototype;
    return child;
};

对象属性复制

for(var name in options){
    child.prototype[name] = options[name];
}

Adobe.Model

使用代码

var Todo = Adobe.Model.extend({
    initialize:function(title) {
        if(typeof title === 'string'){
            this.set({title:title});
        }
    }
});
var todo = new Todo('Test');
console.log(typeof todo.get === 'function');
console.log(typeof todo.initialize === 'function');

命名空间

var Adobe = Adobe || {};
var Model = Adobe.Model = function() {

};

为Adobe.Model添加实例方法

Model.prototype = {
    constructor:Model,
    get:function() {},
    set:function() {}
}

继承

Adobe.Model.extend = function() {
    var klass = function() {};
    var F = function() {};
    F.prototype = this.prototype;
    klass.prototype = new F();
    klass.prototype.__super__ = this.prototype;
    return klass;
};

扩展

for(var name in options){
    klass.prototype[name] = options[name];
}

构造函数

var klass = function() {
    if(typeof this.initialize === 'function'){
        this.initialize.apply(this,arguments);
    }
};

揭示模块

var Adobe = (function() {
    var Model =  function() {};
    Model.extend = function(options) {

    };
    Model.prototype = {
    }
    return {
        Model:Model
    }
})();

最终的结果

var Adobe = (function() {
    var Model =  function() {};
    Model.extend = function(options) {
        var klass = function() {
            if(typeof this.initialize === 'function'){
                this.initialize.apply(this,arguments);
            }
        };
        var F = function() {};
        F.prototype = this.prototype;
        klass.prototype = new F();
        klass.prototype.__super__ = this.prototype;

        for(var name in options){
            klass.prototype[name] = options[name];
        }
        return klass;
    };
    Model.prototype = {
        constructor:Model,
        get:function() {},
        set:function() {}
    }
    return {
        Model:Model
    }
})();

Adobe.View

Adobe.View

View.extend =   Model.extend = function(options)

绑定事件

    var klass = function() {
        if(typeof this.initialize === 'function'){
            this.initialize.apply(this,arguments);
        }
        //Hack:
        var events = this.events || {};
        for(var item in events){
            var func = this[events[item]];
            var reg = /(.+)\s+(.+)/;
            var result = reg.exec(item);
            $(result[2]).bind(result[1],func);
        }
    };

　绑定作用域

function proxy (func,context) {
    return function() {
        func.apply(context,arguments);
    };
}

        var events = this.events || {};
        for(var item in events){
            var func = proxy(this[events[item]],this);
            var reg = /(.+)\s+(.+)/;
            var result = reg.exec(item);
            $(result[2]).bind(result[1],func);
        }

关注点分离

var View = function () {
    //Hack:
    var events = this.events || {};
    for(var item in events){
        var func = proxy(this[events[item]],this);
        var reg = /(.+)\s+(.+)/;
        var result = reg.exec(item);
        $(result[2]).bind(result[1],func);
    }
};

    var parent = this;
    var klass = function() {
        if(typeof this.initialize === 'function'){
            this.initialize.apply(this,arguments);
        }
        parent.apply(this,arguments);
    };

完整版本

var Adobe = (function() {
    var Model =  function() {};
    Model.prototype = {
        constructor:Model,
        get:function() {},
        set:function() {}
    }

    function proxy (func,context) {
        return function() {
            func.apply(context,arguments);
        };
    }

    var View = function () {
        //Hack:
        var events = this.events || {};
        for(var item in events){
            var func = proxy(this[events[item]],this);
            var reg = /(.+)\s+(.+)/;
            var result = reg.exec(item);
            $(result[2]).bind(result[1],func);
        }
    };

    View.extend =   Model.extend = function(options) {
        var parent = this;
        var klass = function() {
            if(typeof this.initialize === 'function'){
                this.initialize.apply(this,arguments);
            }
            parent.apply(this,arguments);
        };
        var F = function() {};
        F.prototype = this.prototype;
        klass.prototype = new F();
        klass.prototype.__super__ = this.prototype;

        for(var name in options){
            klass.prototype[name] = options[name];
        }
        return klass;
    };
    return {
        Model:Model,
        View:View
    }
})();