《基于MVC的JavaScript Web富应用开发》笔记

var foo = 42;   // foo is a Number
foo = "bar";    // foo is a String
foo = true;     // foo is a Boolean

var obj = {bar: 1, foo: 2, baz: 3};
obj.bar = undefined;
obj.foo = null;
delete obj.baz;
for (var i in obj) {
    if (obj.hasOwnProperty(i)) {
        console.log(i, '' + obj[i]);
    }
}
// bar undefined
// foo null

var a = {name: 'a'};
var b = {name: 'a'};
a == b      // false
a === b     // false
var c = a;
c === a     // true

// Constructor
var Animal = function(name) {
    // property
    this.name = name;
};
Animal.prototype.home = 'Earth';
Animal.prototype.breath = function() {
    console.log('breath');
};

var cat = new Animal('susan');
console.log(cat.name);  // 'susan'
console.log(cat.home);  // 'Earth'
cat.breath();           // 'breath'
// ES5 Syntax
Object.create(proto, [ propertiesObject ])

Animal.prototype.isPrototypeOf(cat)
cat.constructor === Animal

cat.hasOwnProperty('name')      // true
cat.hasOwnProperty('home')      // false

'name' in cat                   // true
'home' in cat                   // true

var data = {
    'prop1': 1, 'prop2': 2
};
data['prop3'] = 3;
data.prop4 = 4;
Object.defineProperty(data, 'prop5', {
    value: 6,
    writeable: true,
    enumerable : true,
    configurable : true
});

var Dog = function() {};
Dog.prototype = new Animal();
Dog.prototype.wag = function() {
    console.log('wag tail');
};

// Shape - superclass
function Shape() {
    this.x = 0;
    this.y = 0;
}
Shape.prototype.move = function(x, y) {
    this.x += x;
    this.y += y;
    console.info("Shape moved");
}
// Rectangle - subclass
function Rectangle() {
    Shape.call(this);   // call super constructor
}
Rectangle.prototype = Object.create(Shape.prototype);   // inherit
// Multiple inheritance
function RectA() {
    Shape.call(this);
    Rectangle.call(this);
}
RectA.prototype = Object.create(Shape.prototype);   // inherit
mixin(Shape.prototype, Rectangle.prototype);        // mixin

fun.apply(thisArg, [argsArray])
fun.call(thisArg[, arg1[, arg2[, ...]]])

function Product(name, price) {
    this.name = name;
    this.price = price;
}
function Food(name, price) {
    Product.call(this, name, price);
    this.category = 'food';
}

var numbers = [5, 6, 2, 3, 7];
var max = Math.max.apply(null, numbers);
var min = Math.min.apply(null, numbers);

var logger = {
    log: function () {
        var args = Array.prototype.slice.call(arguments);
        args.unshift('[' + new Date().toLocaleString() + ']');
        console.log.apply(console, args);
    }
};

var user = {
    data: [
        { name: "Alex", age: 27 },
        { name: "Bob", age: 23 }
    ],
    clickHandler: function(event) {
        var idx = Math.floor(Math.random() * 2); // random between 0, 1
        $("input").val(this.data[idx].name + " " + this.data[idx].age);
    }
}
$("button").click(user.clickHandler);   // Error
$("button").click(user.clickHandler.bind(user));

function LateBloomer() {
    this.petalCount = Math.ceil(Math.random() * 12) + 1;
}
// Declare bloom after a delay of 1 second
LateBloomer.prototype.bloom = function() {
    window.setTimeout(this.declare.bind(this), 1000);
};
LateBloomer.prototype.declare = function() {
console.log('I am a beautiful flower with ' +
    this.petalCount + ' petals!');
};
var flower = new LateBloomer();
flower.bloom();

var Person = function() {};
(function() {
    var findByName = function(name) {
        console.log('Anonymous ' + name);
    }
    Person.find = function(name) {
        if (typeof name === 'string') {
            return findByName(name);
        }
    }
})();

function foo() {
    for (var i = 0; i < 10; i++) {
        var value = "hello world";
    }
    console.log(i);        // 10
    console.log(value);    // hello world
}

// 第三个参数 useCapture 指定事件类型，默认 false 即冒泡
button.addEventListener("click", function() { /* ... */ }, false);
button.addEventListener("click", function(e) {
    // 终止事件冒泡，父节点的事件回调都不会触发
    e.stopPropagation();
});

list.addEventListener("click", function(e) {
    if (e.currentTarget.tagName === "li") {
        /* ... */
        return false;
    }
}, false);

$("ul").delegate("li", "click", /* ... */);

// 绑定自定义事件
$(".class").bind("refresh.widget", function() {});
// 触发自定义事件
$(".class").trigger("refresh.widget");

$(".class").bind("frob.widget", function(e, dataNumber) {
    console.log(dataNumber):
});
$(".class").trigger("frob.widget", 5);

var PubSub = {
    subscribe: function(ev, callback) {
        var calls = this._callbacks || (this._callbacks = {});
        (this._callbacks[ev] || (this._callbacks[ev] = [])).push(callback);
        return this;
    },
    publish: function() {
        var args = Array.prototype.slice.call(arguments, 0);
        var ev = args.shift();
        var list, calls;
        if (!this._callbacks || !this._callbacks[ev]) {
            return this;
        } else {
            calls = this._callbacks;
            list = this._callbacks[ev];
        }
        for (var i = 0, l = list.length; i < l; i++) {
            list[i].apply(this, args);
        }
        return this;
    }
};
PubSub.subscribe('Test', function() {
    console.log('Test');
});
PubSub.publish('Test');

var User = {
    records: [ /* ... */ ],
    fetchRemote: function() { /* ... */ }
};

var User = function(atts) {
    this.attributes = atts || {};
};
User.prototype.destroy = function() {
    /* ... */
};
User.fetchRemote = function() {
    /* ... */
};

var Events = {
    bind: function() {
        if (!this.o) {
            this.o = $({});
        }
        this.o.bind.apply(this.o, arguments);
    },
    trigger: function() {
        if (!this.o) {
            this.o = $({});
        }
        this.o.trigger.apply(this.o, arguments);
    },
};

var StateMachine = function() {};
StateMachine.fn = StateMachine.prototype;
// 添加 bind 和 trigger
$.extend(StateMachine.fn, Events);
StateMachine.fn.add = function(controller) {
    this.bind("change", function(e, current) {
        if (controller == current) {
            controller.activate();
        } else {
            controller.deactivate();
        }
    });
    controller.active = $.proxy(function() {
        this.trigger("change", controller);
    }, this);
};

var controller1 = {
    activate: function() {
        $("#con1").addClass("active");
    },
    deactivate: function() {
        $("#con1").removeClass("active");
    },
};
var controller2 = {
    activate: function() {
        $("#con2").addClass("active");
    },
    deactivate: function() {
        $("#con1").removeClass("active");
    },
};
var sm = new StateMachine;
sm.add(controller1);
sm.add(controller2);
controller1.active();

define(id?: String, dependencies?: String[], factory: Function|Object)

define("module", ["dep1", "dep2"], function(d1, d2) {
    return someExportedValue;
});
require(["module", "../file"], function(mod, fs) {
    /* ... */
});