05.Logic
- Overview
- Defining a logic class
- Implementation example
- Members and methods of a logic class
- Frequently asked question
- Reference
Overview
In hifive, a "Logic" class is defined to execute:
- complex calculation
- communication with server
- local DB manipulation
which are purely communication/calculation processes. View manipulation is not performed.
Since it focuses only on such processes, readability, maintainability, reusability and test simplicity should be improved.
Besides, by utilizing asynchronous processing (described in next chapter), implementation changes internal to logic
will not affect the controller.
Defining a logic class
Follow these steps to a define logic class:
1. Define a logic class
__name: 'DateLogic',
dateFormat: '{0}/{1}/{2}',
getCurrent: function(time) {
var year = time.getYear();
var month = time.getMonth() + 1;
var date = time.getDate();
return this._format(year, month, date);
},
_format: function(year, month, date) {
return h5.u.str.format(this.dateFormat, year, month, date);
}
};
__name
- Specifies a logic name. Similar to a controller class, this property is mandatory, without this error should appear.
publicMethod
- Public method, starts with any character other than an underscore _.
privateMethod
- Private method, starts with an underscore _.
2. Declare the logic class in the controller class.
__name: 'DateController',
dateLogic: dateLogic,
__ready: function(context) {
var current = this.dateLogic.getCurrent(new Date());
alert(current);
}
};
- The code above declares logic used in this controller. A 'Logic' suffix is required.
- The framework will automatically turn the specified logic into hifive logic object.
Implementation example
1. Write a HTML file.
<html>
<head>
<meta charset="UTF-8">
<script src="jquery.js"></script>
<script src="jquery.blockUI.js"></script>
<script src="ejs-1.0.h5mod.js"></script>
<script src="h5.js"></script>
<!-- Import your js file -->
<script src="step6.js"></script>
<title>hifive Step6</title>
</head>
<body>
<div id="container">
<input type="text" id="left" value="" /> +
<input type="text" id="right" value="" />
<input type="button" id="calc" value="=" />
<span id="result"> </span>
</div>
</body>
</html>
2. Create a step6.js file.
// Define logic
calcLogic = {
__name: 'CalcLogic',
add: function(left, right) {
return left + right;
}
};
// Create object that is source of the controller
var controller = {
// Controller name
__name: 'CalcController',
// Declare logic
calcLogic: calcLogic,
'#calc click': function() {
// Get left side value
var left = this.$find('#left').val();
// Convert from String to Number. Exit if conversion fails
left = parseInt(left);
if (isNaN(left)) {
return;
}
// Get right side value
var right = this.$find('#right').val();
// Convert from String to Number. Exit if conversion fails.
right = parseInt(right);
if (isNaN(right)) {
return;
}
// Convert from String to Number. Exit if conversion fails.
try {
right = parseInt(right);
} catch(e) {
return;
}
// Call add() method of CalcLogic
var ret = this.calcLogic.add(left, right);
// Display result to view.
this.$find('#result').html(ret);
}
};
// Bind controller to id="container" element
h5.core.controller('#container', controller);
});
3. Open HTML file in browser.
4. Enter number value in both left side and right side, then click = button.
Checking operation
Members and methods of a logic class
The following method is added in a logic class.
deferred
deferred()
Returns Deferred object.
Implementation example using Deferred will be described later.
Frequently asked question
Why shouldn't I perform view manipulation using logic?
Apart from communication & calculation processes, if logic is also used to execute view update process,
in case you wish to modify view structure (tags) or changing view style, you have to understand
JavaScript code thoroughly in order to make changes.
On the contrary, if communication/calculation processes are to be modified, since view manipulation is not separately handled, maintainability would be reduced.
Further more, if you define a complex tag structure using, for e.g: jQuery, you will hardly understand
how that may become. As result, this will also reduce maintainability.
Therefore:
- although it may take time when you initially define view, and
- even it is possible to manipulate view using logic as per specifications,
it is highly recommended that you should follow the above suggestion.
Template engine is suggested to make view manipulation easier.
Separating logic and view manipulation will be much helpful for asynchronous processing (e.g, communication).
Refer to next chapter for detailed description about asynchronous processing.
Next Chapter ⇒ 06. Asynchronous processing
Reference
Refer to API document for methods and members of logic.
If a logic definition object contains property that has same name with property that is to be added, it will be overwritten.