-
Core Methods (each, extend & namespace)
<![CDATA[
// js2 starts with 3 methods that JavaScript developers will find familiar: "each", "extend" and "namespace".
// While not unique to js2, they are provided so that js2 can be utilized as a standalone framework.
// Simple JavaScript Array.
var myArray = [2,4,6,8];
// "each": standard Array iteration.
each(myArray, function(val, idx) {
alert("[" + idx + "]: " + val);
});
// Simple JavaScript Object.
var myObject = {
prop1: "val1",
prop2: "val2",
};
// "each": standard Object iteration.
each(myObject, function(key, val) {
alert(key + ": " + val);
});
// "extend": add/update properties of an Object.
extend(myObject, {
prop3: "val3",
prop4: "val4"
}, {
prop2: "updatedVal2",
prop5: "val5"
}
);
// Add a child object to the primary object.
extend(myObject, {
aNewObject: {
aNewProp1: "newVal1",
aNewProp2: "newVal2"
}
});
// "extend" properly updates existing nested objects without fully over-writing them.
extend(myObject, {
aNewObject: {
aNewProp2: "updatedNewVal2",
aNewProp3: "newVal3"
}
});
/* At this point, "myObject" is:
{
prop1 : "val1",
prop2 : "updatedVal2",
prop3 : "val3",
prop4 : "val4",
prop5 : "val5",
aNewObject: {
aNewProp1: "newVal1",
aNewProp2: "updatedNewVal2",
aNewProp3: "newVal3"
}
}
*/
// "myObject" can be assigned to a specific js2-managed namespace as such:
namespace("js2_samples.space") = myObject;
// window.js2_samples.space is now equivalent to "myObject".
// js2 can also be setup in "No Conflict Mode" (detailed next).
]]>
-
"No-Conflict" Mode (Implementor-Scoped)
<![CDATA[
// Similar to jQuery, js2 can be attached in "No Conflict" mode.
var MyScope = {js2: {}};
window.js2 = MyScope.js2;
<!-- No-Conflict mode: include js2 after defining window.js2 -->
<script type="text/javascript" src="http://js2library.com/code/js2.min.js"></script>
// js2 is now scoped to the specific namespace and used as such (more detail on Classes next).
var Person = new MyScope.js2.Class(function (name) {
MyScope.js2.extend(this, {
toString: function () {
return name;
}
});
});
]]>
-
Object-Oriented Classes (super)
<![CDATA[
// js2 simulates much of the OO-functionality of Java that is not readily available via the "Class" object.
// The js2 "Class" should be the base/foundation object for most object that you'll build using js2.
// Define a "Person" js2 "Class".
namespace("js2_samples.oo").Person = new Class(function (name) {
extend(this, {
toString: function () {
return name;
}
});
});
// Instantiate and test the "Person".
var myPerson = new js2_samples.oo.Person("Joe Person");
alert(myPerson); // Alerts 'Joe Person'.
// Create a sub-class called "Employee" which utilizes the base functionality of "Person", then overrides it.
namespace("js2_samples.oo").Employee = new Class({
extends : js2_samples.oo.Person,
constructor: function (name, title) {
var self = this.super(name);
extend(self, {
toString: function () {
return self.super("toString") + " (" + title + ")";
}
});
}
});
// Instantiate and test the "Employee".
var myEmployee = new js2_samples.oo.Employee("Joe Person", "Employee");
alert(myEmployee); // Alerts 'Joe Person (Employee)'.
]]>
-
Interfaces
<![CDATA[
// js2 provides simulated Java Interface functionality.
// A js2 "Interface" is a simple JavaScript Object with empty method definitions.
namespace("js2_samples.interfaces").ITest = {
getGrade: function (pAnswers) {},
getScore: function (pAnswers) {}
};
// A js2 "Class" that "implements" a js2 "Interface" is validated by js2 upon definition.
namespace("js2_samples.interfaces").Test = new Class({
implements : js2_samples.interfaces.ITest,
constructor: function (pAnswerKey) {
var self = this;
var isCorrect = function (pAnswer, pIdx) {
return pAnswerKey[pIdx] === pAnswer;
};
extend(self, {
getGrade: function (pAnswers) {
var score = self.getScore(pAnswers);
if (score > 89) { return "A"; }
else if (score > 79) { return "B"; }
else if (score > 69) { return "C"; }
else if (score > 59) { return "D"; }
return "F";
},
getScore: function (pAnswers) {
var score = 0;
var perAnswer = 100 / pAnswers.length;
each(pAnswers, function(answer, idx) {
score += isCorrect(answer, idx) ? perAnswer : 0;
});
return Math.round(score);
}
});
}
});
// js2 supports implementing multiple "Interfaces" as demonstrated below.
namespace("js2_samples.interfaces").IHonorsTest = {
getHonorsScore: function (pAnswers) {}
};
namespace("js2_samples.interfaces").IHistoryTest = {
getContinentsCovered: function () {},
getTimePeriodCovered: function () {}
};
namespace("js2_samples.interfaces").HonorsHistoryTest = new Class({
extends : js2_samples.interfaces.Test,
implements : [js2_samples.interfaces.IHonorsTest, js2_samples.interfaces.IHistoryTest],
constructor: function (pAnswerKey) {
var self = this.super(pAnswerKey);
extend(self, {
getHonorsScore : function (pAnswers) {
var score = self.getScore(pAnswers);
return parseInt(score + score * 0.2, 10);
},
getContinentsCovered: function () {
return ["Africa", "Antarctica", "Asia", "Australia", "Europe", "North America", "South America"];
},
getTimePeriodCovered: function () {
return "1800s-1900s";
}
});
}
});
]]>
-
Enums
<![CDATA[
// js2 provides simulated Java Enum functionality.
// A js2 "Enum" for school-based test grades.
namespace("js2_samples.enums").GradesEnum = new Class({
extends : Enum,
static : true,
constructor: function () {
var self = this.super("A", "B", "C", "D", "F");
js2.extend(self,
{
alertAllGrades: function() {
// Method will alert: "A", "B", "C", "D", "F".
self.each(function(pGrade) {
alert(pGrade);
});
},
getLetterGrade: function (pPercent) {
if (pPercent > 89) { return self.A; }
else if (pPercent > 79) { return self.B; }
else if (pPercent > 69) { return self.C; }
else if (pPercent > 59) { return self.D; }
return self.F;
},
isValidGrade : function(pGrade) {
return self.hasType(pGrade); // OR: return self.valueOf(pGrade) !== NULL;
}
}
);
}
});
// GradesEnum is static and may be referenced as such:
var myGrade = js2_samples.enums.GradesEnum.C;
]]>
-
Config
<![CDATA[
// The js2 "Config" object should be a familiar to seasoned JavaScript developers.
// It is used primarily as an alternative to passing multiple parameters to a constructor, method or callback.
// A js2 "Enum" is used as part of this example.
var SeverityLevelsEnum = new Enum("UNKNOWN", "MINIMAL", "MANAGEABLE", "STABLE");
// The test Config object extends the base js2 "Config" object; the defined values are defaults.
namespace("js2_samples.config").Config = new Class({
extends : Config,
constructor: function () {
this.super(
{
code : null,
message : null,
severity: SeverityLevelsEnum.UNKNOWN
}, arguments // Pass through additional arguments (potential sub-class(es) configs).
);
}
});
// The js2 "Config" object will extend/update itself by all parameters passed to its' instance.
// Every parameter passed is "flattened" and combined into a final 1-dimensional arguments list.
// This allows for parameters that can be arrays of arguments themselves with nested child arrays to any level.
var myConfig = new js2_samples.config.Config({
code : 123,
message: "hello world"
});
/* At this point, "myConfig" is:
{
code : 123,
message : "hello world",
severity: SeverityLevelsEnum.UNKNOWN
}*/
// The "Config" class can be easily chained, allowing sub-classes to elegantly provide their own defaults.
namespace("js2_samples.config.subspace").Config = new Class({
extends : js2_samples.config.Config,
constructor: function () {
this.super(
{
code : 12345, // New default for "code".
namespace: "subspace" // New property with default value.
}, arguments // Pass through any additional arguments (potential sub-class(es) configs).
);
}
});
var mySubspaceConfig = new js2_samples.config.subspace.Config({
message : "hello subspace world",
severity: SeverityLevelsEnum.MANAGEABLE
});
/* At this point, "mySubspaceConfig" is:
{
code : 12345,
message : "hello subspace world",
namespace: "subspace",
severity : SeverityLevelsEnum.MANAGEABLE
}*/
// Passing multiple configuration objects results in extending the js2 Config giving precedence in the order passed.
var myMoreComplexSubspaceConfig = new js2_samples.config.subspace.Config({
message : "hello subspace world",
severity: SeverityLevelsEnum.MANAGEABLE
}, {
code : 999,
namespace: "subspace.and.beyond"
}
);
/* At this point, "myMoreComplexSubspaceConfig" is:
{
code : 999,
message : "hello subspace world",
namespace: "subspace.and.beyond",
severity : SeverityLevelsEnum.MANAGEABLE
}*/
// While not terribly exciting as shown, in practice the "Config" object allows for rather powerful implementations.
]]>
-
Include (CSS/JS/HTML)
<![CDATA[
// js2 allows for the importing of CSS, HTML & JavaScript using the method "include".
// "include" accepts any number of files and/or js2 plugins in order of download & interpretation/rendering.
// Dom is a js2library plugin; all js2 plugins are referenced by package name and version.
include("com.js2library.dom-1.0", function (js2) {
// This closure executes when all files are loaded, passing the js2 namespace as an argument.
var mySelect = new js2.dom.Select({
selector: "#my_select_id",
onChange: function() {
var opt = mySelect.getSelectedOption();
alert("Selection is: " + opt ? (opt.text + " [" + opt.value + "]") : "[none]");
}
});
});
// If js2 is global (by default), there is no need to reference or define it as an argument.
include("com.js2library.dom-1.0", function () {
var mySelect = new dom.Select({
selector: "#my_select_id",
onChange: function() {
var opt = mySelect.getSelectedOption();
alert("Selection is: " + opt ? (opt.text + " [" + opt.value + "]") : "[none]");
}
});
});
// External CSS/JS/HTML is also supported by "include".
var host = "http://crossdomainallowed.com/";
include(host + "css_lib.css", host + "html_lib.html", host + "js_lib.js", function (js2) {
// Now you can use the functionality provided by the files passed.
});
]]>
-
Ajax
<![CDATA[
// js2 provides Ajax functionality similar to jQuery.
// Sample URL, success and error handlers (handlers are optional).
var url = "http://somedomain.com/content.html";
var onError = function(pType, pRequest) {
alert("Error [" + pType + "]: " + pRequest.status + " (" + pRequest.statusText + ")";
};
var onSuccess = function(pResponse) {
alert("Page content: " + pResponse);
};
// Simple Ajax "GET".
Ajax(url, onSuccess, onError);
// Standard Ajax "GET".
Ajax.get({
data : {some: "data"} || null,
error : onError,
success: onSuccess,
url : url
});
// Standard Ajax "POST".
Ajax.post({
data : {some: "data"} || null,
error : onError,
success: onSuccess,
url : url
});
]]>