[jQuery] JQuery - different approaches for writting plugins
Hi
Im trying to write my first JQuery plugin and I have serious problem
with deciding which approach to choose.
I want to write plugin which enhances tables with keyborad navigation
(changing, adding, deleting row).
I have few approaches of doing this and I dont know which one should I
choose, and which is best supported by JQuery ? The problem is that I
have to add behaviour (changing active row, deleting row etc) and
state (current active row, recently style for active row, etc) and
don't know how to do this best.
Bellow is a list and short description of each of them, please let me
know what do you think about them.
1)Enhance DOM table node with state and functions.
PRONS:
-for me It looks the most OO, I have one JS object which have state
(i.e current selected row) and behaviour operating on that state.
CONS:
-I dont know how to add functions (such as: 'deleteRow',
'activateRow') to objects with JQuery. If i would like to add state to
object - its easy: $('table').attr('currentActiveRow', 0); how to do
the same for functions ?
-If I replace table (ie. after ajax pagination) all enhancement will
be lost
-I dont know if this approch can be classifed as obstructive JS ? (I
dont provide any on.... methods im html but I add new function to
'standard' DOM elements)
-------------------------------------------------------------------------------------------------------------------------------------------------------------
2)Create object containing all new functions (addRow, deleteRow etc),
all new state (currentActiveRow), and reference to DOM table
node(allowing manipulating table node from this object). Table node
will delegate all events to this object.
PRONS:
-'original' DOM table element remains unmodified (except on... methods
which delagate to this object)
-if table node will be replaced (ie Ajax pagination) this new object
will remain and can still operate (on new table node)
CONS:
-less OO, I have two objects which conceptionaly are one - simple
table with keybord navigation.
-its a little bit harder to maintain and synchronize two objects
instead of one. When user changes a row i have to change my object
(change activeRow property) and change table node (change style of
rows)
-------------------------------------------------------------------------------------------------------------------------------------------------------------
3)Dont write any objects at all. Non OO approach - I will store new
state somewhere ($('table').data(...)) and all functions will recive
all needed data as parameters (ie. activateRow(table, row) instead of
table.activateRow(row).
PRONS:
- ?
CONS:
-not OO
-harder to maintain, harder to write
So, witch one to choose ? Maybe you have some other ideas for this ? I
really dont even know if it is JQuery related question (but I would
like to write this as jQuery plugin so I post this question on this
group) or this is JS related questoin. Im not experienced JS
programmer (but spend few years with others OO programming languages)
so forgive me if this is not right group for this mailing list or this
question is too trivial.
In my opinion first approach is best because its the most OO and
elegant, but problem with replacing table node have to be somehow
resolved (ie enhancing table each time it is replaced). And second
problem is with JQuery API: how to add functions to nodes with
JQuery ?
Ufff, thats alll
Im looking for your opinions and ideas.
Best regards
Daniel