Εάν μάθετε κάποιο σημαντικό κομμάτι φιλοσοφίας αρχιτεκτονικής front end από αυτήν τη σειρά, μάθετε αυτό. Απλά αλλάξτε τάξεις. Σε αυτό το screencast αρχίζουμε να κατεβαίνουμε μια μεγάλη τρύπα κουνελιού JavaScript μόνο για να σταματήσουμε, να πιάσουμε τον εαυτό μας και να χρησιμοποιήσουμε το CSS. Όταν αλλάζετε κάτι οπτικά, αυτός είναι ο τομέας του CSS. Όχι μόνο είναι καλό σε αυτό, είναι συνήθως πιο αποδοτική και διατηρεί έναν υγιή «διαχωρισμό των ανησυχιών» που δημιουργεί έναν μακροπρόθεσμο υγιή ιστότοπο.
Αφού φτάσαμε στις αισθήσεις μας, καταλήξαμε απλά να ανταλλάξουμε 1) το κουμπί κουμπιού 2) ένα data-stateχαρακτηριστικό στο κοντέινερ.
$(".bigger").on("click", function() ( var el = $(this); var module = el.parent(); // Swap expanded state module.attr("data-state") == "expanded" ? module.attr("data-state", "") : module.attr("data-state", "expanded"); // Swap button text. el.text() == el.data("text-swap") ? el.text(el.data("text-original")) : el.text(el.data("text-swap")); ));Εδώ καταλήξαμε:
Δείτε το Pen quFCo του Chris Coyier (@chriscoyier) στο CodePen
Ναι, αυτό το βίντεο (και το συναίσθημα) είναι "απλώς αλλάξτε τάξεις!" Και αλλάζουμε χαρακτηριστικά μετάφρασης = "όχι"> δεδομένων- * μόνο επειδή μου αρέσουν. Τα σκέφτομαι σαν τάξεις με όνομα, ή τάξεις με τιμές. Αναμφισβήτητα πιο χρήσιμο στο CSS από τα μαθήματα και έχουν την ίδια ακριβώς τιμή εξειδίκευσης.
Κάνει αυτό ? /: η σύνταξη φαίνεται περίεργη; Εάν ναι, αυτό είναι γνωστό ως τριμερές (ή «υπό όρους») χειριστή.
Η πρώτη γραμμή είναι μια δοκιμή, η επόμενη γραμμή (ή το bit μετά το?) Είναι αυτό που συμβαίνει εάν αυτή η δοκιμή είναι αληθινή, η τελευταία γραμμή (ή το bit μετά το :) είναι αυτό που συμβαίνει εάν αυτή η δοκιμή είναι λανθασμένη. Ίσως αυτό βοηθά:
// The boolean (true/false) test module.attr("data-state") == "expanded" // Do this if the test is true ? module.attr("data-state", "") // Do this is the test if false : module.attr("data-state", "expanded");Μην τα αποφεύγετε μόνο και μόνο επειδή φαίνονται παράξενα, μπορεί να είναι πιο αποτελεσματικά (και τελικά να διαβάσετε εξίσου καλά, αρκεί να μην τρελαίνετε) σαν να / αλλιώς λογική.
Ο Doug Neiner έχει ένα καλό άρθρο σχετικά με την ιδέα «απλά αλλάξτε τάξεις». Τα μαθήματα έχουν τόσο μεγάλη ισχύ στο CSS. Μπορείτε να κρύψετε / δείξετε πράγματα, να μετακινήσετε πράγματα, να αλλάξετε την εμφάνιση των πραγμάτων, να ενεργοποιήσετε κινούμενα σχέδια… ο ουρανός είναι το όριο. Και όσο πιο ψηλά στο "δέντρο" (DOM) εφαρμόζετε το μάθημα, τόσο μεγαλύτερη δύναμη έχεις. Μια αλλαγή τάξης στο σώμα σημαίνει ότι μπορείτε να ελέγχετε οτιδήποτε σε ολόκληρη τη σελίδα με ένα μόνο μάθημα. Και όλα με μια πολύ μικρή ποσότητα JavaScript.
Μόλις το αγοράσετε, θα είστε πιο ευτυχισμένος προγραμματιστής.