javascript ερώτηση

drumforhim · 4 Οκτωβρίου 2012

Έχω τον παρακάτω κώδικα html

>
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
 <div id='mainContainer'></div>
</body>
</html>

και τον παρακάτω javascript κώδικα

>
if(typeof ak == 'undefined') {
 ak = {};
}
ak.grid = function(options) {
 this.goto = function() {
   var atag = $("<a href='#' id='gtf'>Go to form</a>");
   var h3 = $("<h3>This is my grid</h3>");
   $("#mainContainer").html(h3).append(atag);
   $("a#gtf").live("click",function(){
  /* εδώ */myForm.runForm();
   });
 };
 this.runGrid = function() {
   this.goto();
 };
};

ak.form = function (options) {
 this.goto = function() {
   var atag = $("<a href='#' id='gtg'>Go to grid</a>");
   var h3 = $("<h3>This is my form</h3>");
   $("#mainContainer").html(h3).append(atag);
   $("a#gtg").live("click",function(){
 /*εδώ*/ myGrid.runGrid();
   });
 };
 this.runForm = function() {
   this.goto();
 };
};
  
  
var myGrid = new ak.grid({
 title : "Andreas's grid"
});
var myForm = new ak.form({
 title : "Andrea's form"
});

$(function(){
  myGrid.runGrid();
});

Κάνω χρήση της jquery και η ερώτησή μου είναι η εξής. Πως μπορώ χωρίς να χρησιμοποιήσω τις μεταβλητές myGrid & myForm στα σημεία που έχω τα /*εδώ*/ να μπορέσω να φορτώσω στον div#mainContainer πότε το ak.grid και πότε το ak.form.

Ευχαριστώ

drumforhim · 4 Οκτωβρίου 2012

μάλλον δεν κατάλαβε κανείς τι εννοώ επειδή κι εγώ που ξαναδιάβασα το post δεν κατάλαβα τι εννούσα. οπότε μάλλον κι εσείς δεν θα καταλάβατε!

η ερώτηση μου είναι η εξής

εάν στα σημεία που έχω τα comments /*εδώ*/ βάλω άλλη μεταβλητή από το myGrid ή myForm δεν θα μπορέσω να εμφανίσω το form ή το grid αντίστοιχα. Από την άλλη όμως δεν θέλω να χρησιμοποιήσω αυτές τις μεταβλητές επειδή το ak.grid μπορεί να θέλω να το ξαναχρησιμοποιήσω στην εφαρμογή μου αναθέτοντας άλλο instance σε αυτή τη function. Υπάρχει κάποιος τρόπος να καλώ την runGrid ή την runForm μέσα από τις ίδιες χωρίς να χρησιμοποιώ τις μεταβλητές που δημιοργούν το instance?Ελπίζω να έγινα πιο κατατοπιστικός.

defacer · 4 Οκτωβρίου 2012

Θα πρέπει να περνάς κάτι κατάλληλο (π.χ. ένα callback) σαν παράμετρο μέσα από τα options. Δεν έχει νόημα να κάνεις hardcode τέτοια πράγματα.

Υπάρχουν κάποια θεματάκια ακόμα με τον κώδικα, το μεγαλύτερο είναι πως χρησιμοποιείς την live() η οποία κάνει delegated binding (αυτό θέλεις?) και η οποία είναι "η χειρότερη" (χρησιμοποίησε αντί γι' αυτήν την delegate() ή ακόμα καλύτερα την on(), υπάρχει σε jQuery από 1.7 και πάνω, ή απλά την click() αν δεν θέλεις delegation).

Οπότε θα μπορούσες να το γράψεις ως:

>
ak.form = function (options) {
this.goto = function() {
 var atag = $("<a href='#' id='gtg'>Go to grid</a>");
 var h3 = $("<h3>This is my form</h3>");
 $("#mainContainer").html(h3).append(atag);
 if ($.isFunction(options.click)) {
	 $("a#gtg").click(options.click);
 }
};
this.runForm = function() {	
 this.goto();
};
};
var myForm = new ak.form({
title: "Andrea's form",
click: function() { myGrid.runForm(); }
});

Αντερώτηση:

Θα μπορούσα, και εκ πρώτης όψεως φαίνεται καλύτερο, να είχα γράψει

>
var myForm = new ak.form({
title: "Andrea's form",
click: myGrid.runForm // πιο απλά!
});

Τι πρόβλημα θα υπήρχε αν το έκανα;

drumforhim · 4 Οκτωβρίου 2012

Κατ'αρχάς ευχαριστώ για την απάντηση σου. Είσαι πάντα κατατοπιστικός. Χρησιμοποιώ την live καθαρά από συνήθεια επειδή έιχα διαβάσει κάπου ότι είναι ποιο καλή στα δυναμικά παραγόμενα elements. Έτσι μου έμεινε από εκείνη τη φορά. Θα δοκιμάσω όμως και αυτές που λες.

Τώρα σχετικά με την ερώτησή σου το πρώτο που μου έρχεται στο μυαλό είναι ότι δεν θα δούλευε η isFunction οπότε δεν θα έτρεχε καν.

Τι εννοείς δεν έχει νόημα να κάνω hardcode τέτοια πράγματα?

ευχαριστώ

defacer · 4 Οκτωβρίου 2012

Για το hardcode εννοώ ότι από τη στιγμή που στοχεύεις να έχεις επαναχρησιμοποιήσιμες συναρτήσεις, θα πρέπει να μειώσεις τα hardcoded "συγκεκριμένα" πράγματα στο μηδέν -- για παράδειγμα, όλα τα ονόματα εξωτερικών μεταβλητών, τα id των στοιχείων που χρησιμοποιείς σε όλους τους selectors κλπ, αλλιώς δεν είναι πραγματικά επαναχρησιμοποιήσιμες. Αυτό δε σημαίνει ότι πρέπει το κάθε ένα να το κάνεις ένα ξεχωριστό option, μπορεί η πιο "εύχρηστη" μορφή τους να μην είναι αυτή. Αλλά πάντως σε κάποια μορφή θα πρέπει να μεταφερθούν στα options.

Σχετικά με τις live() κλπ διάβασε αυτό. Μην τρομάξεις πολύ με το "η bind είναι costly" -- δεν έχει νόημα όταν μιλάμε για 5-10 elements. Απλά μη πας και κάνεις bind() σε εκατοντάδες elements.

Το πρόβλημα/αίνιγμα δεν είναι αυτό που λες, αλλά πρώτα μια παρένθεση. Σε τι browser κάνεις development? Προσωπικά μετά τον Chrome το χάος, αλλά αντικειμενικά και ο FF είναι ικανότατη επιλογή αν έχεις βέβαια Firebug εγκατεστημένο (στον Chrome μου αρέσουν περισσότερο τα developer tools και είναι και μανίσια). Οπότε, έστω ότι έχεις τη σελίδα σου με την HTML που δίνεις φορτωμένη σε Chrome.

Shift + Ctrl + I => ανοίγουν τα developer tools

Esc => ανοίγει η console καί είσαι έτοιμος να γράψεις

>$.isFunction(function() { })

Αποτέλεσμα: true, άρα δεν είναι αυτό. Το πρόβλημα έχει να κάνει με το ότι θέλεις να δώσεις σαν option για τo myForm κάτι από το myGrid και αντίστροφα.

Σύνδεση

javascript ερώτηση

Προτεινόμενες αναρτήσεις

drumforhim

drumforhim

defacer

drumforhim

defacer

Δημιουργήστε ένα λογαριασμό ή συνδεθείτε για να σχολιάσετε

Δημιουργία λογαριασμού

Σύνδεση

Σύνδεση