변환과정

CodeCoastColorChanger.js

/**
 * Created by jarvis on 2016. 12. 30..
 이렇게 하니 최초한번 색깔이 바뀌게 잘 안바뀜..
 */
var CodeCoast = CodeCoast || {}

CodeCoast.AjaxReceiver = function(url){
    this.url = url;
}

CodeCoast.AjaxReceiver.prototype = {
    getColor : function(colorChanger, callback){
        var $this = this;
        $.ajax({
            url:$this.url,
            method:"GET",
            success:function(result){
                if(callback && result){
                    callback(colorChanger, result);
                }
            }
        });
    }
}



CodeCoast.newColorChanger = function(receiver){
    console.log("생성자 생김" ,  receiver);
    this.receiver = receiver;
};
CodeCoast.newColorChanger.prototype.setReceiver = function(receiver) {
    this.receiver = receiver;
}
CodeCoast.newColorChanger.prototype.receiverColor = function(callback){
        console.log("클릭 눌림", this.receiver);
        this.receiver.getColor(this, callback);
};

// http://www.nextree.co.kr/p7323/
// Object.create 는 아마 es5 였지?
CodeCoast.newColorChanger$ = function(receiver, jq, target){
    CodeCoast.newColorChanger.apply(this, arguments);
    this.jq = jq;
    this.target = target;
};
CodeCoast.newColorChanger$.prototype = CodeCoast.newColorChanger.prototype;
CodeCoast.newColorChanger$.prototype.on = function(eventType, callback){
    var $this = this;
    console.log("test", $this.receiverColor);
    if(!this.jq) throw 1;
    this.jq.on(eventType, $this.receiverColor(callback));
};

$(function(){
    var cc = new CodeCoast.newColorChanger$(
        new CodeCoast.AjaxReceiver("/getRamdomColor"),
        $("#changeColor"), $("#color-panel"));
    cc.on("click", function(cc, color){cc.target.css("background-color", color);});

    $("#changeColor").on("click", function(){console.log("hello world");});

});