Commit 6565b6c2 authored by Petr Hošek's avatar Petr Hošek

EASY.schedule + EASY.render

parent 948ce78e
......@@ -37,7 +37,7 @@ var $myImage = $("#my_image");
- PREFER use 2 spaces as a 1 indentation step
- PREFER use 4 spaces for continuation of previous line (if it is too long)
# Blocks
## Blocks
To prevent appearance of the pyramid of hell, this rules are given:
- DO use at most 4 level of indentation.
You can use control statements to flatten the structure
......@@ -113,14 +113,48 @@ end
- CONSIDER specifying javascript include tag in `:body_bottom` part of layout
- AVOID calling any functions in .js files, especially `$(document).ready()`.
Exception is closure function `(function(){})();` for separation of local variables from global scope.
- PREFER to call `$(document).ready` or other functions in-lined in HTML
- PREFER to call init functions being in-lined in HTML
Recommended way, how to organize Javascript code is to define functions in .js file as a part of `window.EASY.{name_of_plugin}` namespace
and in HTML include \<script\> tag with `$(document).ready` calling previously defined functions.
and in HTML include \<script\> tag with `EASY.schedule.main` or `EASY.schedule.late` calling previously defined functions.
- CONSIDER registering an init function not to `$(document).ready` but to `EASY.schedule.main` or `EASY.schedule.late`.
Both functions accepts priority as a second parameter.
`EASY.schedule.require` accepts function as a second parameter, which has to be fulfilled before the execution of the init function.
## Code execution
Due to performance optimization, `jQuery` was removed from header and is now loaded as deferred script. So any `jQuery` calls
in inlined \<script\> will fail. Usage of `EASY.schedule` functions is recommended.
- PREFER register an init function to any of `EASY.schedule.main`, `EASY.schedule.late` or `EASY.schedule.require` function.
`EASY.schedule.main` and `EASY.schedule.late` accepts priority as a second parameter. Lower the priority, later will be function executed.
`EASY.schedule.require` accepts function as a second parameter, which has to be fulfilled before the execution of the init function.
```javascript
EASY.schedule.late(function() {
// executed after EASY.sidebar.init();
EASY.sidebar.loadData();
}, -5);
EASY.schedule.main(function() {
EASY.sidebar.init();
});
```
```javascript
/** EASY.schedule.require usage */
EASY.schedule.require(function(sidebar) {
sidebar.init();
},function() {
return window.EASY.sidebar;
});
EASY.schedule.require(function(counter, $) {
$("body").on("click", counter);
}, 'Counter', 'jQuery');
EASY.schedule.define('Counter', function () {
var count = 0;
return function () {
console.log("Count: " + count++);
}
});
```
Also in Ruby:
```ruby
late_javascript_tag("showFlashMessage('error', '#{@error.html_safe}');", priority: 5)
```
## Performance issues
To make the page perform fast, these rules have been set:
......@@ -136,6 +170,31 @@ $(".my-image").height($(".my-image").width());
var $myImage = $(".my-image");
$myImage.height($myImage.width());
```
- AVOID layout thrashing
```javascript
// BAD
$table.find("td.first_column").each(function() {
var $this = $(this);
$this.next().width($this.width());
});
// GOOD
var widths=[];
$table.find("td.first_column")
.each(function() {
widths.push($(this).width());
})
.each(function(index) {
$(this).next().width(widths[index]);
});
// GOOD
$table.find("td.first_column").each(function() {
EasyGem.readAndRender(function() {
return this.width();
}, function(width) {
this.next().width(width);
}, $(this));
});
```
## Architecture
#### Namespacing in easy_extensions
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment