Noisebridge - User contributions [en]

JavaScript/Notes/PrivateProxy

2014-05-19T20:48:07Z

209.10.200.2: /* Object Oriented Design */

== Proxy ==
A proxy is as an interface to something else.

== Private Proxy ==
A public interface object delegates some of its responsibility to a private instance in the same scope.

'''Structural Pattern:''' The private and public instances are <dfn>tightly coupled</dfn>. They share data with each other only within the scope where they are defined.

'''Usage:''' Details and complexities of the underlying object must be hidden. By exposing a very limited set of methods, the public interface offers little opportunity to modify and break its corresponding private counterpart.

'''Example:''' User wants to be able to interact with "program" objects on a calendar. The <dfn>program</dfn> can be then modified by the user.

The application handles modification of program objects through a <dfn>ProgramProxy</dfn>, by calling <dfn>setPhases</dfn>, <dfn>setCampaigns</dfn>. The client of the API may call <dfn>buildHTML</dfn> to generate new HTML for the program or <dfn>toJSON</dfn> to get a JSON representation of it.

=== Alternatives ===
The popular alternative to this approach is MVC with libraries such as Backbone, YUI app framework, Meteor, or Angular, most of which use Handlebars.

Prefabricated solutions can work, in the general sense. But they often entail creating a much larger codebase with less specificity to the design of the application. These frameworks, while commonly used, add the complexity of adapting your application's logic to their framework (shoehorning). Being so generalized, they generally fail to address specific problem effectively.

Such interdependent, large libraries introduce inevitable bugs and memory leaks that can be extremely difficult to track down, harder yet to patch, and with patches might never get merged into the existing codebase.

=== Object Oriented Design ===
Design patterns are not frameworks. A design pattern is any reusable solution to a type problem in a given context. ''Any'' elegant solution therefore depends on the problem at hand (and not the other way around). Although this architectural pattern depicts the architecture, it is not an architecture.

It thus follows that the PrivateProxy presented can be a solution for some sorts of problems, but cannot be the Answer to Solve our Problems, in the general sense.

== Code Example ==
<source lang="javascript">
var Program = function(A) {

"use strict";

var phaseListClassName = "program-phase-list",
phaseClassName = "program-phase";

function Program(id, config) {
var start = config.startDate,
end = config.endDate;
this.id = id;
this.dateRange = new A.DateRange(start, end);
this.phases = config.phases.slice();
}

var programs = {},
programProxies = {};

var phaseListElement = document.createElement("ul"),
phaseElement = document.createElement("li");
phaseListElement.className = phaseListClassName;
phaseElement.className = phaseClassName;

function ProgramProxy(id, config) {
this.id = id;
this.start = config.startDate;
this.displayName = config.name;
this.end = config.endDate;
programs[id] = new Program(id, config);
}

ProgramProxy.prototype = {
setPhases: function(phases) {
if(phases && phases.slice) {
programs[this.id].phases = phases.slice();
}
},

buildHTML: function() {
var program = programs[this.id],
html = "";
html += buildPhaseHTML(program);
html += buildCampaignHTML(program);
return html;
}
};

var div = document.createElement("div");
function buildPhaseHTML(program) {
div.innerHTML = "";
var i, li,
phases = program.phases,
len = phases.length,
phaseRationalValue,
ul = phaseListElement.cloneNode(false);
ul.id = "program-" + program.id;
for(i = 0; i < len; i++) {
li = phaseElement.cloneNode(false);
li.id = "program-"
+ program.id
+ "-phase-"
+ phases[i].name
+ "";
li.style.width =
getPhaseWidth(phases[i], program.dateRange.duration);
ul.appendChild(li);
}
div.appendChild(ul);
return div.innerHTML;
}

function buildCampaignHTML() {
return"";
"<ul>"
+ "<li>fixme:\u00A0buildCampaignHTML"
+ "</ul>";
}

function getPhaseWidth(phase, programDuration) {
var phaseDateRange = new A.DateRange(
phase.startDate, phase.endDate);
var rationalValue = phaseDateRange.duration/programDuration;
return (0|100 * rationalValue) + "%";
}

function getOrCreateProgram(config) {
return programProxies[config.id] ||
(programProxies[config.id] = new ProgramProxy(config.id, config));
}

function removeProgram(id) {
if(!programs[id]) {
throw new ReferenceError("Program: "
+ id
+ " does not exist." );
}
delete programs[id];
delete programProxies[id];
}

return {
getOrCreate: getOrCreateProgram,
remove: removeProgram
};
}({
DateRange: DateRange // defined elsewhere.
});
</source>

<code>Program.getOrCreate</code> returns a <code>ProgramProxy</code>.

<code>ProgramProxy</code> has two methods, both of which delegate to <code>Program</code> instances.

The body of buildHTML:
<source lang="javascript">
setPhases: function(phases) {
if(phases && phases.slice) {
programs[id].phases = phases.slice();
}
}
</source>

Because each <code>ProgramProxy</code> instance has a corresponding <code>Program</code> instance with the same id, any <code>ProgramProxy</code> or can access its <code>Program</code> instance counterpart from within any of its instance methods, and vice versa.

This shared instance access is possible because both <code>Program</code> and <code>ProgramProxy</code> instances being stored in a corresponding object for, keyed by id. Ideally, this would be implemented in a WeakMap.

See also: [http://sourcemaking.com/design_patterns/proxy Proxy Design Pattern].

JavaScript/Notes/PrivateProxy

2014-05-19T20:17:53Z

209.10.200.2: /* Alternatives */

== Proxy ==
A proxy is as an interface to something else.

== Private Proxy ==
A public interface object delegates some of its responsibility to a private instance in the same scope.

'''Structural Pattern:''' The private and public instances are <dfn>tightly coupled</dfn>. They share data with each other only within the scope where they are defined.

'''Usage:''' Details and complexities of the underlying object must be hidden. By exposing a very limited set of methods, the public interface offers little opportunity to modify and break its corresponding private counterpart.

'''Example:''' User wants to be able to interact with "program" objects on a calendar. The <dfn>program</dfn> can be then modified by the user.

The application handles modification of program objects through a <dfn>ProgramProxy</dfn>, by calling <dfn>setPhases</dfn>, <dfn>setCampaigns</dfn>. The client of the API may call <dfn>buildHTML</dfn> to generate new HTML for the program or <dfn>toJSON</dfn> to get a JSON representation of it.

=== Alternatives ===
The popular alternative to this approach is MVC with libraries such as Backbone, YUI app framework, Meteor, or Angular, most of which use Handlebars.

Prefabricated solutions can work, in the general sense. But they often entail creating a much larger codebase with less specificity to the design of the application. These frameworks, while commonly used, add the complexity of adapting your application's logic to their framework (shoehorning). Being so generalized, they generally fail to address specific problem effectively.

Such interdependent, large libraries introduce inevitable bugs and memory leaks that can be extremely difficult to track down, harder yet to patch, and with patches might never get merged into the existing codebase.

=== Object Oriented Design ===
Design patterns are not frameworks. A design pattern is any reusable solution to a type problem in a given context. ''All'' elegant solution therefore depends on the problem at hand (and not the other way around). Although this architectural pattern depicts the architecture, it is not an architecture.

It thus follows that the PrivateProxy presented can be a solution for some sorts of problems, but cannot be the Answer to Solve our Problems, in the general sense.

== Code Example ==
<source lang="javascript">
var Program = function(A) {

"use strict";

var phaseListClassName = "program-phase-list",
phaseClassName = "program-phase";

function Program(id, config) {
var start = config.startDate,
end = config.endDate;
this.id = id;
this.dateRange = new A.DateRange(start, end);
this.phases = config.phases.slice();
}

var programs = {},
programProxies = {};

var phaseListElement = document.createElement("ul"),
phaseElement = document.createElement("li");
phaseListElement.className = phaseListClassName;
phaseElement.className = phaseClassName;

function ProgramProxy(id, config) {
this.id = id;
this.start = config.startDate;
this.displayName = config.name;
this.end = config.endDate;
programs[id] = new Program(id, config);
}

ProgramProxy.prototype = {
setPhases: function(phases) {
if(phases && phases.slice) {
programs[this.id].phases = phases.slice();
}
},

buildHTML: function() {
var program = programs[this.id],
html = "";
html += buildPhaseHTML(program);
html += buildCampaignHTML(program);
return html;
}
};

var div = document.createElement("div");
function buildPhaseHTML(program) {
div.innerHTML = "";
var i, li,
phases = program.phases,
len = phases.length,
phaseRationalValue,
ul = phaseListElement.cloneNode(false);
ul.id = "program-" + program.id;
for(i = 0; i < len; i++) {
li = phaseElement.cloneNode(false);
li.id = "program-"
+ program.id
+ "-phase-"
+ phases[i].name
+ "";
li.style.width =
getPhaseWidth(phases[i], program.dateRange.duration);
ul.appendChild(li);
}
div.appendChild(ul);
return div.innerHTML;
}

function buildCampaignHTML() {
return"";
"<ul>"
+ "<li>fixme:\u00A0buildCampaignHTML"
+ "</ul>";
}

function getPhaseWidth(phase, programDuration) {
var phaseDateRange = new A.DateRange(
phase.startDate, phase.endDate);
var rationalValue = phaseDateRange.duration/programDuration;
return (0|100 * rationalValue) + "%";
}

function getOrCreateProgram(config) {
return programProxies[config.id] ||
(programProxies[config.id] = new ProgramProxy(config.id, config));
}

function removeProgram(id) {
if(!programs[id]) {
throw new ReferenceError("Program: "
+ id
+ " does not exist." );
}
delete programs[id];
delete programProxies[id];
}

return {
getOrCreate: getOrCreateProgram,
remove: removeProgram
};
}({
DateRange: DateRange // defined elsewhere.
});
</source>

<code>Program.getOrCreate</code> returns a <code>ProgramProxy</code>.

<code>ProgramProxy</code> has two methods, both of which delegate to <code>Program</code> instances.

The body of buildHTML:
<source lang="javascript">
setPhases: function(phases) {
if(phases && phases.slice) {
programs[id].phases = phases.slice();
}
}
</source>

Because each <code>ProgramProxy</code> instance has a corresponding <code>Program</code> instance with the same id, any <code>ProgramProxy</code> or can access its <code>Program</code> instance counterpart from within any of its instance methods, and vice versa.

This shared instance access is possible because both <code>Program</code> and <code>ProgramProxy</code> instances being stored in a corresponding object for, keyed by id. Ideally, this would be implemented in a WeakMap.

See also: [http://sourcemaking.com/design_patterns/proxy Proxy Design Pattern].

JavaScript/Notes/PrivateProxy

2014-05-19T20:08:28Z

209.10.200.2: /* Alternatives */

== Proxy ==
A proxy is as an interface to something else.

== Private Proxy ==
A public interface object delegates some of its responsibility to a private instance in the same scope.

'''Structural Pattern:''' The private and public instances are <dfn>tightly coupled</dfn>. They share data with each other only within the scope where they are defined.

'''Usage:''' Details and complexities of the underlying object must be hidden. By exposing a very limited set of methods, the public interface offers little opportunity to modify and break its corresponding private counterpart.

'''Example:''' User wants to be able to interact with "program" objects on a calendar. The <dfn>program</dfn> can be then modified by the user.

The application handles modification of program objects through a <dfn>ProgramProxy</dfn>, by calling <dfn>setPhases</dfn>, <dfn>setCampaigns</dfn>. The client of the API may call <dfn>buildHTML</dfn> to generate new HTML for the program or <dfn>toJSON</dfn> to get a JSON representation of it.

=== Alternatives ===
The popular alternative to this approach is MVC with libraries such as Backbone, YUI app framework, Meteor, or Angular.

Prefabricated solutions can work, in the general sense. But they often entail creating a much larger codebase with less specificity to the design of the application. These frameworks, while commonly used, add the complexity of adapting your application's logic to their framework (shoehorning). Being so generalized, they generally fail to address specific problem effectively.

Such interdependent, large libraries introduce inevitable bugs and memory leaks that can be extremely difficult to track down, harder yet to patch, and with patches might never get merged into the existing codebase.

=== Object Oriented Design ===
Design patterns are not frameworks. A design pattern is any reusable solution to a type problem in a given context. ''All'' elegant solution therefore depends on the problem at hand (and not the other way around). Although this architectural pattern depicts the architecture, it is not an architecture.

It thus follows that the PrivateProxy presented can be a solution for some sorts of problems, but cannot be the Answer to Solve our Problems, in the general sense.

== Code Example ==
<source lang="javascript">
var Program = function(A) {

"use strict";

var phaseListClassName = "program-phase-list",
phaseClassName = "program-phase";

function Program(id, config) {
var start = config.startDate,
end = config.endDate;
this.id = id;
this.dateRange = new A.DateRange(start, end);
this.phases = config.phases.slice();
}

var programs = {},
programProxies = {};

var phaseListElement = document.createElement("ul"),
phaseElement = document.createElement("li");
phaseListElement.className = phaseListClassName;
phaseElement.className = phaseClassName;

function ProgramProxy(id, config) {
this.id = id;
this.start = config.startDate;
this.displayName = config.name;
this.end = config.endDate;
programs[id] = new Program(id, config);
}

ProgramProxy.prototype = {
setPhases: function(phases) {
if(phases && phases.slice) {
programs[this.id].phases = phases.slice();
}
},

buildHTML: function() {
var program = programs[this.id],
html = "";
html += buildPhaseHTML(program);
html += buildCampaignHTML(program);
return html;
}
};

var div = document.createElement("div");
function buildPhaseHTML(program) {
div.innerHTML = "";
var i, li,
phases = program.phases,
len = phases.length,
phaseRationalValue,
ul = phaseListElement.cloneNode(false);
ul.id = "program-" + program.id;
for(i = 0; i < len; i++) {
li = phaseElement.cloneNode(false);
li.id = "program-"
+ program.id
+ "-phase-"
+ phases[i].name
+ "";
li.style.width =
getPhaseWidth(phases[i], program.dateRange.duration);
ul.appendChild(li);
}
div.appendChild(ul);
return div.innerHTML;
}

function buildCampaignHTML() {
return"";
"<ul>"
+ "<li>fixme:\u00A0buildCampaignHTML"
+ "</ul>";
}

function getPhaseWidth(phase, programDuration) {
var phaseDateRange = new A.DateRange(
phase.startDate, phase.endDate);
var rationalValue = phaseDateRange.duration/programDuration;
return (0|100 * rationalValue) + "%";
}

function getOrCreateProgram(config) {
return programProxies[config.id] ||
(programProxies[config.id] = new ProgramProxy(config.id, config));
}

function removeProgram(id) {
if(!programs[id]) {
throw new ReferenceError("Program: "
+ id
+ " does not exist." );
}
delete programs[id];
delete programProxies[id];
}

return {
getOrCreate: getOrCreateProgram,
remove: removeProgram
};
}({
DateRange: DateRange // defined elsewhere.
});
</source>

<code>Program.getOrCreate</code> returns a <code>ProgramProxy</code>.

<code>ProgramProxy</code> has two methods, both of which delegate to <code>Program</code> instances.

The body of buildHTML:
<source lang="javascript">
setPhases: function(phases) {
if(phases && phases.slice) {
programs[id].phases = phases.slice();
}
}
</source>

Because each <code>ProgramProxy</code> instance has a corresponding <code>Program</code> instance with the same id, any <code>ProgramProxy</code> or can access its <code>Program</code> instance counterpart from within any of its instance methods, and vice versa.

This shared instance access is possible because both <code>Program</code> and <code>ProgramProxy</code> instances being stored in a corresponding object for, keyed by id. Ideally, this would be implemented in a WeakMap.

See also: [http://sourcemaking.com/design_patterns/proxy Proxy Design Pattern].

JavaScript/Notes/PrivateProxy

2014-05-16T23:22:27Z

209.10.200.2: /* Private Proxy */

== Proxy ==
A proxy is as an interface to something else.

== Private Proxy ==
The private proxy exposes a public interface object. This public interface object delegates some of its responsibility to a private instance.

'''Structural Pattern:''' The private and public instances are <dfn>tightly coupled</dfn>. They can share data with each other within the function where they are defined, but not outside of there.

'''Usage:''' This pattern is useful when you have details and complexities that can be hidden. By exposing a very limited set of methods, the code allows caller less opportunity to modify and break the objects it produces.

<source lang="javascript">
var Program = function(A) {

"use strict";

var phaseListClassName = "program-phase-list",
phaseClassName = "program-phase";

function Program(id, config) {
var start = config.startDate,
end = config.endDate;
this.id = id;
this.dateRange = new A.DateRange(start, end);
this.phases = config.phases.slice();
}

var programs = {},
programProxies = {};

var phaseListElement = document.createElement("ul"),
phaseElement = document.createElement("li");
phaseListElement.className = phaseListClassName;
phaseElement.className = phaseClassName;

function ProgramProxy(id, config) {
this.id = id;
this.start = config.startDate;
this.displayName = config.name;
this.end = config.endDate;
programs[id] = new Program(id, config);
}

ProgramProxy.prototype = {
setPhases: function(phases) {
if(phases && phases.slice) {
programs[this.id].phases = phases.slice();
}
},

buildHTML: function() {
var program = programs[this.id],
html = "";
html += buildPhaseHTML(program);
html += buildCampaignHTML(program);
return html;
}
};

var div = document.createElement("div");
function buildPhaseHTML(program) {
div.innerHTML = "";
var i, li,
phases = program.phases,
len = phases.length,
phaseRationalValue,
ul = phaseListElement.cloneNode(false);
ul.id = "program-" + program.id;
for(i = 0; i < len; i++) {
li = phaseElement.cloneNode(false);
li.id = "program-"
+ program.id
+ "-phase-"
+ phases[i].name
+ "";
li.style.width =
getPhaseWidth(phases[i], program.dateRange.duration);
ul.appendChild(li);
}
div.appendChild(ul);
return div.innerHTML;
}

function buildCampaignHTML() {
return"";
"<ul>"
+ "<li>fixme:\u00A0buildCampaignHTML"
+ "</ul>";
}

function getPhaseWidth(phase, programDuration) {
var phaseDateRange = new A.DateRange(
phase.startDate, phase.endDate);
var rationalValue = phaseDateRange.duration/programDuration;
return (0|100 * rationalValue) + "%";
}

function getOrCreateProgram(config) {
return programProxies[config.id] ||
(programProxies[config.id] = new ProgramProxy(config.id, config));
}

function removeProgram(id) {
if(!programs[id]) {
throw new ReferenceError("Program: "
+ id
+ " does not exist." );
}
delete programs[id];
delete programProxies[id];
}

return {
getOrCreate: getOrCreateProgram,
remove: removeProgram
};
}({
DateRange: DateRange // defined elsewhere.
});
</source>

`Program.getOrCreate` returns a `ProgramProxy`.

`ProgramProxy` has two methods, both of which delegate to `Program` instances.

The body of buildHTML
<source lang="javascript">
setPhases: function(phases) {
if(phases && phases.slice) {
programs[id].phases = phases.slice();
}
}
</source>

This is possible because `ProgramProxy` and each `Program` have the same id. Each are stored in one of two objects, keyed by their id. See also: [http://sourcemaking.com/design_patterns/proxy Proxy Design Pattern].

JavaScript/Notes/PrivateProxy

2014-05-16T21:00:27Z

209.10.200.2:

<source lang="javascript">
var Program = function() {

"use strict";

var phaseListClassName = "program-phase-list",
phaseClassName = "program-phase";

function Program(id, config) {
var start = config.startDate,
end = config.endDate;
this.id = id;
this.dateRange = new A.AcxDateRange(start, end);
this.phases = config.phases.slice();
}

var programs = {},
programProxies = {};

var phaseListElement = document.createElement("ul"),
phaseElement = document.createElement("li");
phaseListElement.className = phaseListClassName;
phaseElement.className = phaseClassName;

function ProgramProxy(id, config) {
this.id = id;
this.start = config.startDate;
this.displayName = config.name;
this.end = config.endDate;
programs[id] = new Program(id, config);
}

ProgramProxy.prototype = {
setPhases: function(phases) {
if(phases && phases.slice) {
programs[id].phases = phases.slice();
}
},

buildHTML: function() {
var program = programs[this.id],
html = "";
html += buildPhaseHTML(program);
html += buildCampaignHTML(program);
return html;
}
};

var div = document.createElement("div");
function buildPhaseHTML(program) {
div.innerHTML = "";
var i, li,
phases = program.phases,
len = phases.length,
phaseRationalValue,
ul = phaseListElement.cloneNode(false);
ul.id = "program-" + program.id;
for(i = 0; i < len; i++) {
li = phaseElement.cloneNode(false);
li.id = "program-"
+ program.id
+ "-phase-"
+ phases[i].name
+ "";
li.style.width =
getPhaseWidth(phases[i], program.dateRange.duration);
ul.appendChild(li);
}
div.appendChild(ul);
return div.innerHTML;
}

function buildCampaignHTML() {
return"";
"<ul>"
+ "<li>fixme:\u00A0buildCampaignHTML"
+ "</ul>";
}

function getPhaseWidth(phase, programDuration) {
var phaseDateRange = new A.AcxDateRange(
phase.startDate, phase.endDate);
var rationalValue = phaseDateRange.duration/programDuration;
return (0|100 * rationalValue) + "%";
}

function getOrCreateProgram(config) {
return programProxies[config.id] ||
(programProxies[config.id] = new ProgramProxy(config.id, config));
}

function removeProgram(id) {
if(!programs[id]) {
throw new ReferenceError("Program: "
+ id
+ " does not exist." );
}
delete programs[id];
delete programProxies[id];
}

return {
getOrCreate: getOrCreateProgram,
remove: removeProgram
};
}();
</source>

JavaScript/Notes/PrivateProxy

2014-05-16T20:59:13Z

209.10.200.2: