Editing
JavaScript/Notes/Factory
(section)
Jump to navigation
Jump to search
Warning:
You are not logged in. Your IP address will be publicly visible if you make any edits. If you
log in
or
create an account
, your edits will be attributed to your username, along with other benefits.
Anti-spam check. Do
not
fill this in!
== Step 3: The Factory 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"> 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 ==== <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 ==== <source lang="javascript"> ElementWrapper.getById("globalWrapper").title </source> === Source Code === <p> 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] </p>
Summary:
Please note that all contributions to Noisebridge are considered to be released under the Creative Commons Attribution-NonCommercial-ShareAlike (see
Noisebridge:Copyrights
for details). If you do not want your writing to be edited mercilessly and redistributed at will, then do not submit it here.
You are also promising us that you wrote this yourself, or copied it from a public domain or similar free resource.
Do not submit copyrighted work without permission!
To protect the wiki against automated edit spam, we kindly ask you to solve the following CAPTCHA:
Cancel
Editing help
(opens in new window)
Navigation menu
Personal tools
Not logged in
Talk
Contributions
Log in
Request account
Namespaces
Page
Discussion
English
Views
Read
Edit
View history
More
Search
Dig in!
Noisebridge
- Status: MOVED
- Donate
- ABOUT
- Accessibility
- Vision
- Blog
Manual
MANUAL
Visitors
Participation
Community Standards
Channels
Operations
Events
EVENTS
Guilds
GUILDS
- Meta
- Electronics
- Fabrication
- Games
- Music
- Library
- Neuro
- Philosophy
- Funding
- Art
- Crypto
- Documentation/Wiki
Wiki
Recent Changes
Random Page
Help
Categories
(Edit)
Tools
What links here
Related changes
Special pages
Page information