JavaScript/Notes/Factory: Difference between revisions
(48 intermediate revisions by 4 users not shown) | |||
Line 6: | Line 6: | ||
=== Prerequisite === | === Prerequisite === | ||
<p> | <p> | ||
You'll need to | You'll need to have a good understanding of [https://noisebridge.net/wiki/JavaScript/Notes/Function Functions and context], and [https://noisebridge.net/wiki/JavaScript/Notes/Scope Scope]. | ||
Suggested review includes [https://noisebridge.net/wiki/JavaScript/Notes/Singleton Singleton] and the event bubbling section of [https://noisebridge.net/wiki/JavaScript/Notes/ClassnameSwap#Lesson:_DOM_Event_Flow ClassName Swap] lesson. | |||
</p> | </p> | ||
Line 29: | Line 27: | ||
Each animation's time duration is passed to it when it is called. The style values are supplied by the caller. | Each animation's time duration is passed to it when it is called. The style values are supplied by the caller. | ||
The | The part that varies is the Style Value Type, and that depends on the Style Property. | ||
[http://garretts.github.io/ape-javascript-library/build/anim/StyleTransition.js StyleTransition.js] | [http://garretts.github.io/ape-javascript-library/build/anim/StyleTransition.js StyleTransition.js] | ||
==== Decorator ==== | |||
<p> | <p> | ||
Factory is useful when you want to create at most one of an object for any | Factory is useful when you want to create at most one of an object for any | ||
associated element, off a bubbled event, using an object pool to "get or create" a wrapper. | associated element, off a bubbled event, using an object pool to "get or create" a wrapper, or <dfn>Decorator</dfn>. | ||
== Step 1: getById == | == Step 1: getById == | ||
Line 43: | Line 42: | ||
this.x = x; | this.x = x; | ||
} | } | ||
ElementWrapper.instances = {}; | |||
ElementWrapper.getById = function(id, x) { | ElementWrapper.getById = function(id, x) { | ||
Line 179: | Line 180: | ||
} | } | ||
</source> | </source> | ||
<h4>Usage</h4> | |||
Early versions of this method appeared in APE JavaScript library, which has been copied. | Early versions of this method appeared in APE JavaScript library, which has been copied. | ||
Line 206: | Line 209: | ||
ElementWrapper.getById("a", 2, 3).y; // 3 | ElementWrapper.getById("a", 2, 3).y; // 3 | ||
</source> | </source> | ||
Example in jsbin: [http://jsbin.com/AgARAXI/1/embed?html,js,output live example]. | |||
==== Using the Generic <code>getById</code> ==== | ==== Using the Generic <code>getById</code> ==== | ||
Line 233: | Line 237: | ||
=== More Examples === | === More Examples === | ||
<p>I have used this approach for many widgets, including | <p>I have used a modified version of this approach for many widgets, including | ||
* [http://garretts.github.io/ape-javascript-library/example/widget/calendar/ Calendar], | * [http://garretts.github.io/ape-javascript-library/example/widget/calendar/ Calendar], | ||
Line 240: | Line 244: | ||
Autocomplete (can't run off Github pages because there is no server side processing). This pattern is useful for building widgets that can be initialized lazily, on a bubbled event.</p> | Autocomplete (can't run off Github pages because there is no server side processing). This pattern is useful for building widgets that can be initialized lazily, on a bubbled event.</p> | ||
(slider uses [https://noisebridge.net/wiki/JavaScript/Notes/Function#Function.prototype.call overflow hidden]). | |||
=== Reusable Concept === | === Reusable Concept === | ||
Line 247: | Line 253: | ||
<p> | <p> | ||
In most patterns, encapsulating the parts that vary entails creating an class. | In most patterns, encapsulating the parts that vary entails creating an class. | ||
However, in JavaScript, this | However, in JavaScript, this Factory pattern was simple to implement by using just | ||
two functions (<code>getById</code>) and leveraging the dynamic nature of | two functions (<code>getById</code>) and leveraging the dynamic nature of | ||
JavaScript. | JavaScript. | ||
Line 261: | Line 267: | ||
</p> | </p> | ||
== Step 2: | == Step 2: Factory == | ||
=== Problem: Publicly Exposed Constructor === | === Problem: Publicly Exposed Constructor === | ||
Hide the constructor in a closure. | === Solution: Hide the constructor in a closure. === | ||
<source lang="javascript"> | <source lang="javascript"> | ||
Line 297: | Line 296: | ||
</source> | </source> | ||
=== | == Step 3: The Factory Factory == | ||
==== The Factory | Hide the constructor on a function and pass it to makeFactory. | ||
=== Solution I: A Decorator Factory Factory That Takes a Constructor === | |||
Decorator Factory Factory takes a constructor that takes an element id as its first argument and any number of extra arguments. | |||
<source lang="javascript"> | |||
// Create a factory. | |||
var ElementWrapperFactory = makeFactory(function() { | |||
// The constructor. | |||
function ElementWrapper (id, x, y) { | |||
this.id = id; | |||
this.x = x; | |||
this.y = y; | |||
this.show = _show; | |||
} | |||
function _show() { | |||
document.getElementById(this.id).style.visibility = "visible"; | |||
} | |||
return ElementWrapper; | |||
}() | |||
); | |||
// The Factory Factory. | |||
function makeFactory(ctor) { | |||
var instances = {}; | |||
return { | |||
getById : function(id) { | |||
return instances[id] || (instances[id] = newApply(ctor, arguments)); | |||
} | |||
}; | |||
} | |||
// Implementation, or usage. | |||
var ew = ElementWrapperFactory.getById("globalWrapper", 1, 2); | |||
alert(ew.x); // 1. | |||
</source> | |||
==== Add newApply to Scope of makeFactory ==== | |||
Function rewriting. | |||
<source lang="javascript"> | |||
function makeFactory(ctor) { | |||
return (makeFactory = function(ctor) { | |||
var instances = {}; | |||
return { | |||
getById : function(id) { | |||
return instances[id] || (instances[id] = newApply(ctor, arguments)); | |||
} | |||
}; | |||
})(ctor); | |||
function F(){}; | |||
function newApply(fun, args) { | |||
var i; | |||
F.prototype = fun.prototype; // Add prototype. | |||
F.prototype.constructor = fun; | |||
i = new F; | |||
fun.apply(i, args); // Apply the original constructor. | |||
return i; | |||
} | |||
} | |||
</source> | |||
=== Introduce Parameter Object === | |||
[[JavaScript/Notes/ParameterObject|Parameter Object]]s are useful replacements for parameter lists, particularly long ones, or sets of parameters that always go together. | |||
In this case, Parameter Objects are useful because they can have any number of properties needed by any constructor. | |||
==== Be Smart, not Clever ==== | |||
By using a <code>config</code> parameter object, we can define a parameter list of two, thereby avoiding the need for the clever <code>newApply</code> trick. | |||
=== Solution II: Replace ArgumentList with Parameter Object === | |||
<source lang="javascript"> | |||
// Create a factory. | |||
var ElementWrapperFactory = makeFactory(function() { | |||
function ElementWrapper (id, config) { | |||
this.id = id; | |||
this.x = config).x; | |||
this.show = _show; | |||
} | |||
function _show() { | |||
document.getElementById(this.id).style.visibility = "visible"; | |||
} | |||
return ElementWrapper; | |||
}() | |||
); | |||
// Config-based Factory Factory. | |||
function makeFactory(ctor) { | |||
var instances = {}; | |||
return { | |||
getById : function(id, config)) { | |||
if(instances.hasOwnProperty(id)) return instances[id]; | |||
return instances[id] = new ctor(id, config)); | |||
} | |||
}; | |||
} | |||
// Implementation, or usage. | |||
var ew = ElementWrapperFactory.getById("globalWrapper", { x : 1 }); | |||
alert(ew.x); // 1. | |||
</source> | |||
=== Solution IIb. === | |||
==== The Factory Constructor ==== | |||
<source lang="javascript"> | <source lang="javascript"> | ||
function Factory(getConstructor){ | function Factory(getConstructor){ | ||
Line 306: | Line 418: | ||
function getById(id, config) { | function getById(id, config) { | ||
var instances = this.instances; | var instances = this.instances; | ||
if(!instances) { // First time. | |||
instances = this.instances = {}; | |||
// Get the constructor. | // Get the constructor. | ||
ctor = getConstructor(this); | |||
} | } | ||
return instances[id] || (instances[id] = new ctor(id, config)); | |||
} | } | ||
} | |||
</source> | </source> | ||
Line 341: | Line 453: | ||
}); | }); | ||
</source> | </source> | ||
Tip: Make a defensive copy of config properties. That way, later changes to the config won't affect your object. | |||
==== Usage ==== | ==== Usage ==== | ||
Line 349: | Line 463: | ||
=== Source Code === | === Source Code === | ||
<p> | <p> | ||
[https://github.com/GarrettS/ape-javascript-library/blob/master/src/APE.js#L130 | Added to APE core, in variation, many years ago, and well-used. There, the instances property is publicly accessible so that a finalizer or "clean up" function can be run, for example, to remove event handlers. | ||
https://github.com/GarrettS/ape-javascript-library/blob/master/src/APE.js#L130] | |||
[https://github.com/GarrettS/ape-javascript-library/blob/master/src/APE.js#L130 https://github.com/GarrettS/ape-javascript-library/blob/master/src/APE.js#L130] | |||
</p> | </p> |
Latest revision as of 22:34, 5 April 2014
Factory Aspect, Added to a Decorator[edit]
This 2-part class will be a soup-to-nuts explanation of widget design, a description the Factory pattern, a recapitulation of Event Bubbling strategy, and generic concepts for creating and mixing design patterns.
Prerequisite[edit]
You'll need to have a good understanding of Functions and context, and Scope. Suggested review includes Singleton and the event bubbling section of ClassName Swap lesson.
Object Oriented Design[edit]
The basic principle for all design patterns is: Encapsulate the parts that vary.
Pseudocode:
color: rgb(12, 44, 89) --> rgb(233, 197, 17); marginLeft: 0 --> -9px; padding: 0 --> 12px; zIndex: 1 --> 100
Each animation's time duration is passed to it when it is called. The style values are supplied by the caller.
The part that varies is the Style Value Type, and that depends on the Style Property.
Decorator[edit]
Factory is useful when you want to create at most one of an object for any associated element, off a bubbled event, using an object pool to "get or create" a wrapper, or Decorator.
Step 1: getById[edit]
<source lang=javascript> function ElementWrapper(id, x) {
this.id = id; this.x = x;
}
ElementWrapper.instances = {};
ElementWrapper.getById = function(id, x) {
if(ElementWrapper.instances.hasOwnProperty(id)) return ElementWrapper.instances[id]; return ElementWrapper.instances[id] = new ElementWrapper(id, x);
}; </source>
Problems[edit]
Problem: Not DRY. Cannot be arbitrarily reused other constructor functions.
Problem: ArgumentList
(§11.2) is set to two.
Problem: Encapsulation. The factory and the constructor are exposed publicly.
Decorator Factory Aspect[edit]
A Decorator Factory Aspect is a Factory method, added as an Aspect to a constructor of a Decorator.
Before we add a Factory to a constructor function for an element decorator, Let's define Decorator (also called a wrapper), Factory and Aspect.
- Decorator Pattern
- Add functionality to an object by wrapping it. (Wikipedia link)
- Factory Pattern
- The Factory pattern is a creational design pattern that encapsulates the processes of creating objects (Wikipedia link). That way, we can create objects lazily and pool them in an object pool.
- Aspect
- introduces separation of concern(s), as modularization of functionality (Wikipedia link)
Decorator Examples[edit]
Decorator is very common in JavaScript. For example: YAHOO.util.Element decorates an element, jQuery decorates a collection of elements.
Factory Example[edit]
The Factory gets or creates a decorated element.
The id
of the wrapper is the same as the id
of the element.
This is the part I want to make reusable:
<source lang="javascript">/**
* @constructor * @param {String} id - the id of the element and widget. */
function ElementWrapper(id, x) {
this.id = id; this.x = x;
}
// Factory. // TODO: How can I make this generic/reusable? ElementWrapper.instances = {}; ElementWrapper.getById = function(id, x) {
if(this.instances.hasOwnProperty(id)) return this.instances[id]; return this.instances[id] = new this(id, x);
};
ElementWrapper.prototype = {
show : function() { document.getElementById(this.id).style.visibility = "visible"; }
}; </source>
Benefits[edit]
Solves the problem of creating only one decorator per element id
.
By calling getElementById
, the decorator can avoid
some of the problems with changing node references with innerHTML
(though state changes
must still be managed manually).
Problem: DRY[edit]
Don't Repeat Yourself
Every piece of knowledge must have a single, unambiguous, authoritative representation within a system.
It is cumbersome and error-prone to write out a Factory each time. Since this is an idiom I use a lot, it makes sense to make it reusable.
I want to have a generic getById
method that can be reused and will return
an instance of the constructor that it is called on. I want to be able to pass
extra arguments to that constructor (varargs).
Problem: Publicly Exposed Constructor[edit]
A factory should not expose the constructor, but should hide it so that the factory method must be used. I will explain the solution to this problem in part II.
Encapsulate the Parts That Vary[edit]
What varies?
The id
parameter variable of getById
does not change; it will
always be present in any generic Factory.
The parts of the Factory that vary are: The additional zero or more arguments (varargs,
this case, x
),
and the context, or thisArg.
Resolving the context arg is easy.
If I can solve passing varargs to a constructor in a generic context, it will be possible to create a generic Factory Aspect.
Function newApply[edit]
A way to call new
with variable arguments would solve this problem.
A new + apply()
would provide the varargs functionality of apply
,
but passed to [[Construct]]
, not [[Call]]
. (see Function.prototype.apply, [[Call]]
).
The source code for newApply
:
<source lang="javascript"> /**
* @param {Function} fun constructor to be invoked. * @param {Array} args arguments to pass to the constructor. * Instantiates a constructor and uses apply(). */
function F(){}; function newApply(fun, args) {
var i; F.prototype = fun.prototype; // Add prototype. F.prototype.constructor = fun;
i = new F; fun.apply(i, args); // Apply the original constructor. return i;
} </source>
Usage
Early versions of this method appeared in APE JavaScript library, which has been copied.
What's newApply Good For?[edit]
Generic getById
function I wanted, to use aspect with any constructor function.
Library Aspect[edit]
<source lang="javascript"> function getById(id) {
if(!this.hasOwnProperty("instances")) this.instances = {}; return this.instances[id] || (this.instances[id] = newApply(this, arguments));
} </source>
Implementation[edit]
<source lang="javascript"> function ElementWrapper(id, x, y) {
this.id = id; this.x = x; this.y = y;
} ElementWrapper.getById = getById; </source>
Usage[edit]
<source lang="javascript"> ElementWrapper.getById("a", 2, 3).y; // 3 </source> Example in jsbin: live example.
Using the Generic getById
[edit]
This getById
method used with ElementWrapper
(above)
or any other constructor that acts as a Decorator to an element and
accepts the element's id
as its first argument. All other arguments will be passed to the constructor using newApply
.
<source lang="javascript">Slider = function(id, dir) { /* ... */ };
// Factory. Slider.getById = getById; </source>
Then I can use:
<source lang="javascript">Slider.getById( "weight", 1 ); </source>
Subsequent calls to:
<source lang="javascript">Slider.getById( "weight" ); </source>
— will return the same Slider
instance.
More Examples[edit]
I have used a modified version of this approach for many widgets, including
Autocomplete (can't run off Github pages because there is no server side processing). This pattern is useful for building widgets that can be initialized lazily, on a bubbled event.
(slider uses overflow hidden).
Reusable Concept[edit]
Another closely related technique is Decorator that accepts an element instead
of an element's id
. This is covered by getByNode
.
In most patterns, encapsulating the parts that vary entails creating an class.
However, in JavaScript, this Factory pattern was simple to implement by using just
two functions (getById
) and leveraging the dynamic nature of
JavaScript.
Links[edit]
Orthogonality and the DRY Principle, A Conversation with Andy Hunt and Dave Thomas, Part II by Bill Venners March 10, 2003
Step 2: Factory[edit]
Problem: Publicly Exposed Constructor[edit]
Solution: Hide the constructor in a closure.[edit]
<source lang="javascript"> var ElementWrapper = (function(){
function ElementWrapper(id, x) { this.id = id; this.x = x; this.show = _show; }
function _show() { document.getElementById(this.id).style.visibility = "visible"; }
var instances = {}; return { getById : function(id, x) { if(instances.hasOwnProperty(id)) return instances[id]; return instances[id] = new ElementWrapper(id, x); } };
})(); </source>
Step 3: The Factory Factory[edit]
Hide the constructor on a function and pass it to makeFactory.
Solution I: A Decorator Factory Factory That Takes a Constructor[edit]
Decorator Factory Factory takes a constructor that takes an element id as its first argument and any number of extra arguments.
<source lang="javascript"> // Create a factory. var ElementWrapperFactory = makeFactory(function() {
// The constructor.
function ElementWrapper (id, x, y) { this.id = id; this.x = x; this.y = y; this.show = _show; } function _show() { document.getElementById(this.id).style.visibility = "visible"; } return ElementWrapper; }()
);
// The Factory Factory.
function makeFactory(ctor) {
var instances = {};
return { getById : function(id) { return instances[id] || (instances[id] = newApply(ctor, arguments)); } };
}
// Implementation, or usage. var ew = ElementWrapperFactory.getById("globalWrapper", 1, 2); alert(ew.x); // 1. </source>
Add newApply to Scope of makeFactory[edit]
Function rewriting.
<source lang="javascript"> function makeFactory(ctor) {
return (makeFactory = function(ctor) { var instances = {}; return { getById : function(id) { return instances[id] || (instances[id] = newApply(ctor, arguments)); } }; })(ctor); function F(){}; function newApply(fun, args) { var i; F.prototype = fun.prototype; // Add prototype. F.prototype.constructor = fun; i = new F; fun.apply(i, args); // Apply the original constructor. return i; }
} </source>
Introduce Parameter Object[edit]
Parameter Objects are useful replacements for parameter lists, particularly long ones, or sets of parameters that always go together.
In this case, Parameter Objects are useful because they can have any number of properties needed by any constructor.
Be Smart, not Clever[edit]
By using a config
parameter object, we can define a parameter list of two, thereby avoiding the need for the clever newApply
trick.
Solution II: Replace ArgumentList with Parameter Object[edit]
<source lang="javascript"> // Create a factory. var ElementWrapperFactory = makeFactory(function() {
function ElementWrapper (id, config) { this.id = id; this.x = config).x; this.show = _show; } function _show() { document.getElementById(this.id).style.visibility = "visible"; } return ElementWrapper; }()
);
// Config-based Factory Factory. function makeFactory(ctor) {
var instances = {}; return { getById : function(id, config)) { if(instances.hasOwnProperty(id)) return instances[id]; return instances[id] = new ctor(id, config)); } };
}
// Implementation, or usage.
var ew = ElementWrapperFactory.getById("globalWrapper", { x : 1 });
alert(ew.x); // 1.
</source>
Solution IIb.[edit]
The Factory Constructor[edit]
<source lang="javascript"> function Factory(getConstructor){
var i = 0, ctor; this.getById = getById;
function getById(id, config) { var instances = this.instances; if(!instances) { // First time. instances = this.instances = {}; // Get the constructor. ctor = getConstructor(this); } return instances[id] || (instances[id] = new ctor(id, config)); }
} </source>
Implementation[edit]
<source lang="javascript"> var ElementWrapper = new Factory(function() {
var defaultConfig = { title : "Hella", };
function ElementWrapperC(id, config) { config = config || defaultConfig; this.id = id; this.title = config.title; initEvents(this); } function initEvents(ew) { document.getElementById(ew.id).onclick = showLog; }
function showLog(ev) { console.log(ev); };
return ElementWrapperC;
}); </source>
Tip: Make a defensive copy of config properties. That way, later changes to the config won't affect your object.
Usage[edit]
<source lang="javascript"> ElementWrapper.getById("globalWrapper").title </source>
Source Code[edit]
Added to APE core, in variation, many years ago, and well-used. There, the instances property is publicly accessible so that a finalizer or "clean up" function can be run, for example, to remove event handlers. https://github.com/GarrettS/ape-javascript-library/blob/master/src/APE.js#L130