jQuery Objects

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.

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.

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

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

jQuery DAP Objects

DapTable

Auto-sort
Auto-filter

Auto-styled

CSV/TSV downloadable

jQuery DAP Objects

DapTable: Features
• All styling defined 1. All done client side
2. Respects sorting and filter
• striped
• collapsable Currently:
• By file size (KB,
• tsv_downloadable, csv_downloadable MB, etc.)
• By node (webd2.dd.com < webd12.db.com
• tsv_downloadable_custom, csv_downloadable_custom
• url_downloadable
• Sorting, and custom sorting
• Keys
• Auto-highlighting of rows on rollover
• Fix width

jQuery DAP Objects

Popup

Suggestions

Expander

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

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()

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

...
}
}

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() })

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’>
…

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')
…
}
}

jQuery DAP Objects

TableKey

In Javascript

self.key = new TableKey('#toggle_key', 65, 17)

jQuery DAP Objects

Generic jQuery Objects: Thickbox

Just add a class
‘thickbox’ to a <a> tag

jQuery DAP Objects

More Generic Objects:
• Cookie
• Format
• Input
• StringFuns
• Url

Future Suggestions:
• Client-side Validation
• Generic ‘COMET’

jQuery DAP Objects

Client-side Validation

function validate() {
valid = 1
<div>
$(‘.mandatory’).each(
function() {id="rtsub" type="text" class="mandatory“ name="rtsub" value=“" />
<input
if ($(this).val() == ‘’)) {
</div>
$(this).addClass(‘invalid’)
<div>
<input=id="rtenv" type="text“ name="rtenv" value=“" />
valid 0
</div> Note: Don’t do this! Do (e.g.):
})
if (! valid) { $(‘#element .mandatory’)
...
alert(‘Please complete all mandatory fields’)
return 0
}
return 1
}

jQuery DAP Objects

“Rich front-end functionality to improve user experience”

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/

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

jQuery Objects

Recommended

More Related Content

What's hot (17)

Viewers also liked (7)

Similar to jQuery Objects (20)

Recently uploaded (20)

jQuery Objects