JavaScript Programming Patterns

JavaScript Programming Patterns

The Old-School Way
working example
<br />function changeColor1(linkObj, newColor) {<br /> linkObj.style.backgroundColor = newColor;<br />}<br /><br />function anchorChange1() {<br /> // set configuration<br /> var config = {<br /> colors: [ "#F63", "#CC0", "#CFF" ]<br /> };<br /><br /> // get all links on page<br /> var anchors = document.getElementsByTagName("a");<br /> var size = anchors.length;<br /><br /> // loop through anchors and attach events<br /> for (var i = 0; i < size; i++) {<br /> anchors[i].color = config.colors[i];<br /><br /> anchors[i].onclick = function () {<br /> changeColor1(this, this.color);<br /> return false;<br /> };<br /> }<br />}<br />

---

singleton
working example
<br />// singleton syntax<br />// creates a class and immediately instantiates an object<br />var anchorChange2 = {<br /> config: {<br /> colors: [ "#F63", "#CC0", "#CFF" ]<br /> },<br /><br /> // does the actual change of the background color<br /> alterColor: function (linkObj, newColor) {<br /> linkObj.style.backgroundColor = newColor;<br /> },<br /><br /> init: function () {<br /> var self = this; // assign reference to current object to "self"<br /><br /> // get all links on the page<br /> var anchors = document.getElementsByTagName("a");<br /> var size = anchors.length;<br /><br /> for (var i = 0; i < size; i++) {<br /> anchors[i].color = self.config.colors[i];<br /><br /> anchors[i].onclick = function () {<br /> self.alterColor(this, this.color); // this is bound to the anchor object<br /> return false;<br /> };<br /> }<br /> }<br />}; <br />

---

Module Pattern
working example
var anchorChange3 = function () {}();<br />
<br />var anchorChange3 = function () {<br /><br /> // private property<br /> var config = {<br /> colors: [ "#F63", "#CC0", "#CFF" ]<br /> }<br /><br /> // this is a private method<br /> // can be accessed within anchorChange3<br /> // cannot be accessed from outside<br /> function alterColor(linkObj, color) {<br /> linkObj.style.backgroundColor = color;<br /> }<br /><br /> return {<br /> // public method<br /> // can be accessed from outside<br /> changeColor: function (linkObj, newColor) {<br /> // calls private function to change color<br /> alterColor(linkObj, newColor);<br /> },<br /><br /> // public method<br /> // can be accessed from outside<br /> init: function () {<br /> var self = this; // assign reference to current object to "self"<br /><br /> // get all links on the page<br /> var anchors = document.getElementsByTagName("a");<br /> var size = anchors.length;<br /><br /> for (var i = 0; i < size; i++) {<br /> anchors[i].color = config.colors[i];<br /><br /> anchors[i].onclick = function () {<br /> self.changeColor(this, this.color); // this is bound to the anchor object<br /> return false;<br /> };<br /> }<br /> }<br /> };<br />}();<br /> // () ensures that the function gets called immediately when the page<br /> // is loaded and the object becomes available<br /><br />

---

Revealing Module Pattern
working example
var anchorChange4 = function () {}();<br />
<br />// revealing module pattern<br />var anchorChange4 = function () {<br /><br /> // this will be a private property<br /> var config = {<br /> colors: [ "#F63", "#CC0", "#CFF" ]<br /> }<br /><br /> // this will be a public method<br /> var init = function () {<br /> var self = this; // assign reference to current object to "self"<br /><br /> // get all links on the page<br /> var anchors = document.getElementsByTagName("a");<br /> var size = anchors.length;<br /><br /> for (var i = 0; i < size; i++) {<br /> anchors[i].color = config.colors[i];<br /><br /> anchors[i].onclick = function () {<br /> self.changeColor(this, this.color); // this is bound to the anchor object<br /> return false;<br /> };<br /> }<br /> }<br /><br /> // this will be a public method<br /> var changeColor = function (linkObj, newColor) {<br /> linkObj.style.backgroundColor = newColor;<br /> }<br /><br /> return {<br /> // declare which properties and methods are supposed to be public<br /> init: init,<br /> changeColor: changeColor<br /> }<br />}();<br />

---

Custom Objects
working example
var anchorChanger = function () {};<br />
Using prototype, we can now add additional properties to the object “blueprint” so that these items are available for every instance of that object right from the start. I ended up with having 3 properties, namely: config, changeColor and init.
<br />// custom object constructor<br />var anchorChanger = function () {<br /> this.init();<br />};<br /><br />anchorChanger.prototype.config = {<br /> colors: [ "#F63", "#CC0", "#CFF" ]<br />}<br /><br />anchorChanger.prototype.changeColor = function (linkObj, newColor) {<br /> linkObj.style.backgroundColor = newColor;<br />};<br /><br />anchorChanger.prototype.init = function () {<br /> var self = this;<br /><br /> // get all links on the page<br /> var anchors = document.getElementsByTagName("a");<br /> var size = anchors.length;<br /><br /> for (var i = 0; i < size; i++) {<br /> anchors[i].color = self.config.colors[i];<br /><br /> anchors[i].onclick = function () {<br /> self.changeColor(this, this.color);<br /> return false;<br /> };<br /> }<br />};<br />
呼叫用法也不同
<br />new anchorChanger();<br />

---

Lazy Function Definition
his pattern is particularly useful when you need to do computations on the page once and then reuse the output multiple times.
working example
var anchorChange5 = function () {};<br />
<br />// lazy function definition<br />var anchorChange5 = function () {<br /> // define configuration<br /> var config = {<br /> colors: [ "#F63", "#CC0", "#CFF" ]<br /> };<br /><br /> // get all links<br /> var anchors = document.getElementsByTagName("a");<br /> var size = anchors.length;<br /><br /> // loop through anchors and attach events<br /> for (var i = 0; i < size; i++) {<br /> anchors[i].color = config.colors[i];<br /><br /> anchors[i].onclick = function () {<br /> anchorChange5().changeColor(this, this.color);<br /> return false;<br /> };<br /> }<br /> //All the above should only be done once and there is no need to include these properties in subsequent calls to that function. To put the Lazy Function Definition in the game, you need to redeclare your function:<br /><br /> // redefine function so that it only holds the changeColor function<br /> anchorChange5 = function () {<br /> return {<br /> changeColor: function (linkObj, newColor) {<br /> linkObj.style.backgroundColor = newColor;<br /> }<br /> };<br /> };<br />};<br />
用法
anchorChange5();<br />
As stated above, this pattern is not that handy here, but consider a situation when there is some heavy and complex computing involved. You certainly do not want to do that each time the function gets called. Peter calls this kind of function definition a “promise”, which means the outer declaration can be viewed as some kind of promise that later on this function will get redeclared to provide something more useful.

---

Conclusion

There is no general solution on how such problems should be approached. For a task like this, I believe that the singleton pattern is the most convenient way of doing it. Mostly because less lines of code are required. But for other, more complex problems, using the module pattern or creating custom objects or the lazy function definition might be more appropriate.