TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
jQuery Objects
1. jQuery DAP Objects
Why?
• Rich front-end functionality to improve user experience
• Use appropriate languages for appropriate parts of the system
• JavaScript for browser functionality
• CSS for styling
• Perl for server functionality
• Avoid server-side work than can be done (quicker!) on the client
• Avoid re-loading pages ‘in the middle of a task’, e.g.:
• Validating input values
• Changing configurations, values, etc.
• Retrieving ‘choice-making’ information
• Tailing logs, etc.
2. jQuery DAP Objects
Why?
Appropriate in JavaScript Inappropriate in JavaScript
• Rich front-end functionality to
• Check an input field has a value improve user experience
• Rounding corners mathematically
• Add a class to an element • Data storage
• Show or hide elements
• Use appropriate languages for appropriate parts of the system
Inappropriate in Perl
• JavaScript
Appropriate in Perl for browser functionality Sorting a table where the data
•
• CSS to database
• Read/write forastyling hasn't changed
• Perl for
• File handling server functionality • Re-loading a page with an error
• Setting element colours directly
Appropriate in CSS
• Avoid server-side work than can Inappropriate in CSS on the client
• Rounded corners using a background
be done (quicker!)
image • Sizing images
• Avoid re-loading pages ‘in the middle of a task’, e.g.:
• Class –based colours, etc. • Conditional statements
• Validating input values
• Changing configurations, values, etc.
• Retrieving ‘choice-making’ information
• Tailing logs, etc.
3. jQuery DAP Objects
So?...
We are no longer just We need to engineer
adding a bit of
JavaScript to do simple
things via ‘onclick’
=> front-end code the
same as we do back-
end code - OO
functions, etc. JavaScript
4. jQuery DAP Objects
What Benefit?
Almost - No
• Simple and effective code re-use inheritance
• All the benefits of OO-code – encapsulation,
name-spacing, simple interface, etc.
• Remove the pain of writing JavaScript – concentrate
on writing the functionality, not coding up visuals and
behaviour
• Respect styling and design
8. jQuery DAP Objects
Popup: Features
• Works on any element
• Can use AJAX to populate
• Optional offset from element
• Custom close methods
Suggestions: Features
• Can use list on page, or get results by AJAX
Expander: Features
• Works on element
Audit
• Refreshes audit history
9. jQuery DAP Objects
JavaScript Objects
var Object = function() {
this.function = function() {
Looks less like JavaScript
var self = this and more like an object in
C++, Java, Perl?
function code (Maybe…)
}
}
var obj = new Object()
10. jQuery DAP Objects
Generic DAP Objects
var Object = function() {
this.includedObject = new IncludedObject()
this.init = function() {
var self = this
initialisation code
self.includedObject.init() // if necessary
...
}
}
11. jQuery DAP Objects
Example use: Cluster
var Cluster = function() { Object variables
this.dragged = 0 Included objects
this.audit = new Audit()
this.expander = new Expander()
this.input = new Input()
this.suggestions = new Suggestions()
this.popup = new Popup()
this.table = new DapTable()
this.init = function() { Scope self
var self = this
Standard jQuery
self.table.init($('#server_table'))
Call object method
$('#node_div').draggable({ stop: function() { self.dragged = 1 } })
$('#node_div_close').click( function() { self.deselect_node() })
12. jQuery DAP Objects
DapTable: Usage
In Template
<link rel="stylesheet" type="text/css" href="/css/common.css" />
<link rel="stylesheet" type="text/css" href="/css/common/daptable.css" />
<script type="text/javascript" src="/javascript/jquery/jquery.js"></script>
<script type="text/javascript" src="/javascript/table/table.js"></script>
<script type="text/javascript" src="/javascript/common/DapTable.js"></script>
<script type='text/javascript'>
$(document).ready(
function() {
var cluster = new Cluster()
cluster.init()
Will ultimately be:
}
) a) one compressed JS script, and
</script> one compressed CSS file
b) CSS at the top, JavaScript at the
bottom
<table class=‘dap_table table-autosort cvs_downloadable’>
…
13. jQuery DAP Objects
DapTable: Usage
In Javascript
var Cluster = function() {
this.table = new DapTable()
this.init = function() {
var self = this
self.table.init($('#server_table'))
self.table.init('#server_table')
…
}
}
19. jQuery 1.4.2
FYI:
• “Wow, the performance improvements are overwhelming.”
• “1.4.2 is blazing fast http://j.mp/9yUNZ9 ...”
• “There has been a great increase in performance.”
• “Great work, great performance increases.”
http://blog.jquery.com/2010/02/19/jquery-142-released/
20. jQuery 1.4.2
My Own Tests:
• N Elements, all same class
• 3 handlers per element
jQuery Bind Times
250000
for (var i = 0; i < 10000; i++) {
$('body').append("<div class='a_div'></div>")
200000
} 150000
$('.a_div').click( function() { $(this).hide() }) 1.3.2
ms
$('.a_div').mouseover( function() { $(this).hide() })
100000 1.4.2
$('.a_div').mouseout( function() { $(this).hide() })
50000
0
1000 3000 10000 30000
