Kiss Note

<dojo functions/>

1.  dojo.require(“dojo.fx”);
//This registers a function to be run when the document (and all required dependencies) are ready
2. dojo.addOnLoad(function(){
console.log(“document ready!”);
});
similarly,
var init = function(){
console.log(“document ready!”);
}
3. dojo.addOnLoad(init);

4. dojo.byId -  get DomNode
5. digit.byId – get widget

6. dojo.query – returns a list of Dom nodes based on CSS selector

eg.  // every element in the page with the class “blueButton” assigned
dojo.query(“.blueButton”).forEach(function(node, index, arr){
console.debug(node.innerHTML);
});

7.dojo.forEach
eg.disable all the select tags
dojo.forEach(
dojo.query(“select”, document),
function(selectTag) {
selectTag.disabled = true;
}
);
// >= 1.0 only.
dojo.query(“select”, document).forEach(“item.disabled = true;”);

8. dojo.connect

eg. connect event to js event handler
function helloPressed(){
alert(‘You pressed the button’);
}

function init(){
button = dojo.byId(‘helloButton’);
dojo.connect(button, ‘onclick’, ‘helloPressed’);
}

eg.bind mult connections when exampleObj.bar() gets called, exampleObj.foo() will be called.
var exampleObj = {
counter: 0,
foo: function(){
alert(“foo”);
this.counter++;
},
bar: function(){
alert(“bar”);
this.counter++;
}
};

dojo.connect(exampleObj, “foo”, exampleObj, “bar”);

<OO -Object Orientied/>
OO,think is as Java.

pass Functions as Variables
eg.

function applyTwoParameterFn(a, b, function){
return function(a,b);
}
console.debug(applyTwoParameterFn(1, 2, Math.max)); //not as strict as java in terms of type/variables checking.

<delcare a class/> – woo… pretty much like java
dojo.declare(“ClassName”, null, {/*class body*/});

dojo.declare(“Person”, null, {
constructor: function(name, age, currentResidence){
this.name=name;
this.age=age;
this.currentResidence=currentResidence;
},
moveToNewState: function(newState){
this.currentResidence=newState;
}
});
eg. create person class and instantialize it

var matt= new Person(‘Matt’, 25, ‘New Mexico’);

<Arrays and Objects as Member Variables/>
eg.
dojo.declare(“my.classes.bar”, my.classes.foo, {
constructor: function() {
this.someData = [ ]; // each object has it’s own array
},
someData: [1, 2, 3, 4], // doesn’t do what I want: ends up being static
numItem : 5, // one per bar
strItem : “string”, // one per bar
statics: { counter: 0, somethingElse: “hello” } // static variables
});

IMPORTANT:
Why is this true for arrays and objects, but not primitives? It’s because, like most OOP languages, JavaScript uses object references. For example, given:

x = { fruit: “apple” };
y = x;

Now x and y both refer to the same object. Modifying x.fruit will also affect y.fruit.

<inheritance/> – haha, it is java
dojo.declare(“Employee”, Person, {
constructor: function(name, age, currentResidence, position){
// remember, Person constructor is called automatically as the parent
this.password=”";
this.position=position;
},
login: function(){
if(this.password){
alert(‘you have successfully logged in’);
}else{
alert(‘please ask the administrator for your password’);
}
}
});
initialize the subclass
var kathryn=new Employee(‘ Kathryn ‘, 26, ‘Minnesota’, ‘Designer’);

Calling Superclass Methods
someMethod: function() {
// call base class someMethod
this.inherited(arguments);
// now do something else
}

<Mixins/> – multiple inheritance, hmm… java doesn’t do this.
eg. blizzard class will inherit VanillaSoftServe, MandMs, CookiDough
dojo.declare(“VanillaSoftServe”,null, {
constructor: function() { console.debug (“mixing in Vanilla”); }
});
dojo.declare(“MandMs”,null, {
constructor: function() { console.debug(“mixing in MandM’s”); },
kind: “plain”
});
dojo.declare(“CookieDough”,null, {
chunkSize: “medium”
});
dojo.declare(“Blizzard”, [VanillaSoftServe, MandMs, CookieDough], {
constructor: function() {
console.debug(“A blizzard with “+
this.kind+” M and Ms and “+
this.chunkSize+” chunks of cookie dough.”
);
}
});

PS. VanillaSoftServe is the only superclass of Blizzard, others two just mixed in. Does not make sense to me, thinking it as three superclasses makes more sense

<Understanding The Parser/>
Not sure why dojo doc always tries to complicate this part. Parser is just create widget object for your source node.

pretty straight forward:
* locating the nodes with dojoType attributes in the page
* taking the attributes assigned to them and passing them into the constructor as properties on the configuration object
* passing the source node for the widget as the second parameter to the constructor
constructor: function(args, node){}

<modules/>
modularization – namespace, collection of your widgets
function sum() {
var sum1; object level var
sum2; globel var
}

Module Helpers
eg.
var imgNode = document.createElement(“img”);
imgNode.src = dojo.moduleUrl(“explosive.space”,”images/kaboom.gif”);

once the module is binded with the gif. It doesn’t matter where the code snippet is located relative to kaboom.gif.Yeah!!!

Use requireIf to save runtime.
dojo.requireIf(dojo.isIE, “explosive.space.BlueScreenOfDeathCatcher”);