patternjavascriptMinor
A hotel greeter named Alfred
Viewed 0 times
hotelalfredgreeternamed
Problem
Is there any way of improving this code? (Here's a JSFiddle with an example and comments)
Example: A hotel greeter can greet guests and accepts tips, but it's impossible to see the total of tips a greeter has received.
Goals:
Limitations:
Some specific thoughts:
Example: A hotel greeter can greet guests and accepts tips, but it's impossible to see the total of tips a greeter has received.
[]___
/ /\ O
/____/__\ /|\
|[][]|||| / \
ALFRED
Arrive at Hotel
Tip Alfred $10
var HOTEL, alfred;
HOTEL = {}; // Namespace
(function (HOTEL) {
// Reuseable controller
var controllerPrototype = {
greet: function () {
this.model.view.innerHTML = '"' + this.model.greeting + '"';
},
acceptTip: function (tip) {
this.model.tips += tip;
this.model.view.innerHTML = '"' + this.model.thankyou + '"';
}
};
// Create a new greeter
HOTEL.newGreeter = function (view) {
var controller = Object.create(controllerPrototype);
controller.facet = function () {
var args, method;
method = arguments[0];
args = 2
Goals:
- Keep it DRY
- Keep it MVC
- Make sure anyone with access to a "greeter" can never manipulate the view or model directly.
Limitations:
- To avoid clutter, avoid type checking to avoid simple errors unless it is necessary to guarantee integrity.
Some specific thoughts:
- Is there a better way of passing model and view into the controller?
- Is there a better way of communicating with the controller?
- Is there a good way of making a more general view?
- Any other improvements?
Solution
From the comments, I guess you would like a theoretical review ;)
-
This:
in my mind should be wired by the controller, that is, the linking of UI elements to data and UI changes
-
This:
has your controller access data straight in your view, updating the DOM. This is wrong in my mind. The view should have functions that the controller can call with either the model as a parameter or already passed in advance.
-
-
Not that it truly matters but,
-
All in all, I think this could use some more polishing.
-
This:
Arrive at Hotel
Tip Alfred $10in my mind should be wired by the controller, that is, the linking of UI elements to data and UI changes
-
This:
greet: function () {
this.model.view.innerHTML = '"' + this.model.greeting + '"';
},has your controller access data straight in your view, updating the DOM. This is wrong in my mind. The view should have functions that the controller can call with either the model as a parameter or already passed in advance.
-
Object.create(controllerPrototype); -
Not that it truly matters but,
method === "model" will not catch new String('model')-
args = [].slice.call(arguments, 1); works as well as the ternaryAll in all, I think this could use some more polishing.
Code Snippets
<button onclick="javascript:alfred('greet')">Arrive at Hotel</button>
<button onclick="javascript:alfred('acceptTip', 10)">Tip Alfred $10</button>greet: function () {
this.model.view.innerHTML = '"' + this.model.greeting + '"';
},Context
StackExchange Code Review Q#54515, answer score: 6
Revisions (0)
No revisions yet.