Αρχική σελίδα » Κωδικοποίηση » Τι νέο υπάρχει στο jQuery 3 - 10 πιο cool χαρακτηριστικά

    Τι νέο υπάρχει στο jQuery 3 - 10 πιο cool χαρακτηριστικά

    jQuery 3.0, η νέα μεγάλη κυκλοφορία του jQuery τελικά κυκλοφόρησε. Η κοινότητα προγραμματιστών ιστού περιμένει αυτό το σημαντικό βήμα από τον Οκτώβριο του 2014, όταν η ομάδα jQuery άρχισε να εργάζεται για τη νέα μεγάλη έκδοση μέχρι τώρα, τον Ιούνιο του 2016, όταν τελική απελευθέρωση είναι έξω.

    Το σημείωμα κυκλοφορίας υπόσχεται α πιο αδύνατη και ταχύτερη jQuery, με συμβατότητα προς τα πίσω στο μυαλό. Σε αυτή την ανάρτηση, έχουμε μια ματιά σε μερικά από τα νέα χαρακτηριστικά του jQuery 3.0 για να σας δώσουμε μια γενική εικόνα για το πώς αλλάζει το τοπίο JavaScript.

    Από πού να αρχίσω

    Εάν θέλετε να κατεβάσετε το jQuery 3.0 για να πειραματιστείτε μόνοι σας, πηγαίνετε δεξιά στη σελίδα λήψης. Αξίζει επίσης να ρίξετε μια ματιά στον Οδηγό αναβάθμισης ή τον πηγαίο κώδικα.

    Αν θέλετε να δοκιμάσετε πώς λειτουργεί το υπάρχον έργο σας με το jQuery 3.0, μπορείτε να δοκιμάσετε την πρόσθετη εφαρμογή Migration jQuery που αναγνωρίζει προβλήματα συμβατότητας στον κώδικα σας. Μπορείτε επίσης να ρίξετε μια ματιά στα μελλοντικά ορόσημα.

    Αυτό το άρθρο δεν καλύπτει όλα τα νέα χαρακτηριστικά του jQuery 3.0, μόνο τα πιο ενδιαφέροντα: καλύτερη ποιότητα κώδικα, ενσωμάτωση νέων χαρακτηριστικών ECMAScript 6, νέο API για κινούμενα σχέδια, νέα μέθοδος διαφυγής των συμβολοσειρών, αυξημένη υποστήριξη SVG, βελτιωμένες ανάκλησεις async, καλύτερη συμβατότητα με ανταποκρινόμενες τοποθεσίες , και αυξημένη ασφάλεια.

    1. Οι παλιές λύσεις IE έχουν καταργηθεί

    Ένας από τους κύριους στόχους της νέας μεγάλης έκδοσης ήταν να το κάνει ταχύτερη και πιο κομψή, ως εκ τούτου τα παλιά hacks και λύσεις που σχετίζονται με IE9- έχει αφαιρεθεί. Αυτό σημαίνει ότι αν θέλετε ή πρέπει να υποστηρίξετε το IE6-8, θα πρέπει να συνεχίσετε να χρησιμοποιείτε τα πιο πρόσφατα 1.12 απελευθέρωση, όπως ακόμα και το 2.x σειρά δεν έχει πλήρη υποστήριξη για τους παλαιότερους εξερευνητές Internet (IE9-). Ελέγξτε τις σημειώσεις σχετικά με την υποστήριξη του προγράμματος περιήγησης στα έγγραφα.

    jQuery Έγγραφα: Υποστήριξη προγράμματος περιήγησης

    Σημειώστε ότι υπάρχουν επίσης πολλά υποτιθέμενα χαρακτηριστικά στο jQuery 3. Ένα μεγάλο μειονέκτημα του Οδηγού αναβάθμισης είναι ότι οι καθυστερημένες λειτουργίες - από τον Ιούνιο του 2016 - δεν ομαδοποιούνται, οπότε αν τους ενδιαφέρει, θα πρέπει να τις αναζητήσετε με το εργαλείο αναζήτησης του προγράμματος περιήγησης ( Ctrl + F).

    Οδηγός αναβάθμισης του jQuery

    2. Το jQuery 3.0 εκτελείται σε αυστηρή λειτουργία

    Δεδομένου ότι τα περισσότερα προγράμματα περιήγησης που υποστηρίζονται από το jQuery 3 υποστηρίζουν την αυστηρή λειτουργία, η νέα μεγάλη έκδοση έχει κατασκευαστεί με βάση αυτή την οδηγία.

    Αν και το jQuery 3 έχει γραφτεί σε αυστηρή λειτουργία, είναι σημαντικό να το ξέρετε αυτό ο κωδικός σας δεν απαιτείται να εκτελείται σε αυστηρή λειτουργία, Άρα εσύ δεν χρειάζεται να ξαναγράψετε τον υπάρχοντα κωδικό jQuery, εάν θέλετε να μεταφέρετε το jQuery 3. Strict & non-strict mode JavaScript μπορούν ευτυχώς να συνυπάρξουν.

    Υπάρχει μία εξαίρεση: ορισμένες εκδόσεις του ASP.NET ότι - λόγω της αυστηρής λειτουργίας - είναι δεν είναι συμβατό με το jQuery 3. Εάν συμμετέχετε με το ASP.NET, μπορείτε να ρίξετε μια ματιά στις λεπτομέρειες εδώ στα έγγραφα.

    3. Για ... του Loops Εισάγεται

    Το jQuery 3 υποστηρίζει την ... δήλωση, ένα νέο είδος Για loop, που εισάγεται στο ECMAScript 6. Δίνει έναν πιο απλό τρόπο loop πάνω από επαναληπτικά αντικείμενα, όπως οι πίνακες, οι χάρτες και τα σύνολα.

    Στο jQuery, το για ... ο βρόχος μπορεί να αντικαταστήσει το πρώτο $ .όσο (...) σύνταξη και μπορεί να διευκολύνει το βρόχο μέσα από τα στοιχεία μιας συλλογής jQuery.

    Παράδειγμα κώδικα από τον Οδηγό αναβάθμισης

    Σημειώστε ότι το για ... βρόχος θα μόνο εργασία είτε σε ένα περιβάλλον που υποστηρίζει το ECMAScript 6, ή αν εσείς χρησιμοποιήστε έναν μεταγλωττιστή JavaScript όπως η Babel.

    4. Οι κινούμενες εικόνες έχουν ένα νέο API

    Το jQuery 3 χρησιμοποιεί το API requestAnimationFrame () για την εκτέλεση κινουμένων σχεδίων, δημιουργώντας κινούμενες εικόνες τρέχει ομαλότερη και γρηγορότερη. Το νέο API χρησιμοποιείται μόνο σε προγράμματα περιήγησης που το υποστηρίζουν. για τα παλαιότερα προγράμματα περιήγησης (δηλ. IE9) το jQuery χρησιμοποιεί το προηγούμενο API του ως εναλλακτική μέθοδο για την εμφάνιση κινούμενων εικόνων.

    RequestAnimationFrame έχει βγει για λίγο, αν σας ενδιαφέρει αυτό που ξέρει ή γιατί πρέπει να το χρησιμοποιήσετε, το CSS Tricks έχει μια καλή θέση γι 'αυτό.

    www.caniuse.com

    5. Νέα μέθοδος εξαφάνισης χορδών με ιδιαίτερη σημασία

    Το νέο jQuery.escapeSelector () η μέθοδος σας επιτρέπει να ξεφύγετε από χορδές ή χαρακτήρες που σημαίνει κάτι άλλο στο CSS για να είναι σε θέση να χρησιμοποιήστε το σε jQuery-επιλογέα. χωρίς να διαφεύγει ο διερμηνέας JavaScript δεν μπορεί να το καταλάβει σωστά.

    Τα έγγραφα μας βοηθούν να κατανοήσουμε καλύτερα αυτή τη μέθοδο με το ακόλουθο παράδειγμα:

    Για παράδειγμα, αν ένα στοιχείο στη σελίδα έχει αναγνωριστικό “abc.def” δεν μπορεί να επιλεγεί με $ ("# abc.def") επειδή ο επιλογέας αναλύεται ως “ένα στοιχείο με id 'αλφάβητο' που έχει επίσης μια τάξη 'def'. Ωστόσο, μπορεί να επιλεγεί με $ ("#" + $ .escapeSelector ("abc.def")).”

    Δεν είμαι σίγουρος πόσο συχνά συμβαίνει μια τέτοια περίπτωση, αλλά αν χτυπήσετε σε ένα τέτοιο πρόβλημα, τώρα έχετε έναν εύκολο τρόπο να το διορθώσετε γρήγορα.

    6. Μέθοδοι χειρισμού τάξης Υποστήριξη SVG

    Δυστυχώς, το jQuery 3 εξακολουθεί να είναι δεν υποστηρίζει πλήρως το SVG, αλλά οι μέθοδοι jQuery που χειρίζονται ονόματα κλάσεων CSS, όπως .addClass () και .hasClass (), τώρα μπορεί να χρησιμοποιηθεί για να στοχεύσετε έγγραφα SVG επισης. Αυτό σημαίνει ότι μπορείτε να τροποποιήσετε (προσθήκη, κατάργηση, εναλλαγή) ή να βρείτε κλάσεις με το jQuery σε κλιμακωτά γραφικά διανυσμάτων, τότε στυλ των τάξεων με CSS.

    7. Τα αναβαλλόμενα αντικείμενα είναι πλέον συμβατά με υποσχέσεις JS

    Υποσχέσεις JavaScript - αντικείμενα που χρησιμοποιούνται για ασύγχρονους υπολογισμούς - έχουν τυποποιηθεί στο ECMAScript 6. η συμπεριφορά και τα χαρακτηριστικά τους καθορίζονται στα πρότυπα Promises / A +.

    Στο jQuery 3, Αναβαλλόμενα αντικείμενα έχουν γίνει συμβατά με τα νέα πρότυπα Promises / A +. Οι αναβολές είναι αλυσιδωτά αντικείμενα που το καθιστούν εφικτό δημιουργήστε ουρές επανάκλησης.

    Η νέα λειτουργία αλλάζει πώς εκτελούνται λειτουργίες ασύγχρονης επανάκλησης. Υποσχέσεις επιτρέψτε στους προγραμματιστές να γράψουν ασύγχρονο κώδικα που είναι πιο κοντά στη λογική στον σύγχρονο κώδικα.

    Δείτε παραδείγματα κώδικα από τον Οδηγό αναβάθμισης ή, ρίξτε μια ματιά σε αυτό το σπουδαίο εκπαιδευτικό πρόγραμμα Scotch.io σχετικά με τα βασικά στοιχεία των υποσχέσεων JavaScript.

    8. jQuery.when () ερμηνεύει διαφορετικά τα διαφορετικά επιχειρήματα

    ο $ .when () μέθοδος παρέχει έναν τρόπο να εκτέλεση λειτουργιών επανάκλησης. Είναι μέρος του jQuery από την έκδοση 1.5. Είναι μια ευέλικτη μέθοδος. λειτουργεί επίσης με μηδενικά επιχειρήματα και μπορεί να δεχθεί ένα ή περισσότερα αντικείμενα ως επιχειρήματα επίσης.

    Το jQuery 3 αλλάζει τον τρόπο με τον οποίο τα επιχειρήματα του $ .when () ερμηνεύονται όταν περιέχουν το $ .then () μέθοδος με το οποίο μπορείτε να μεταβιβάσετε πρόσθετες επανακλήσεις ως επιχειρήματα στο $ .when () μέθοδος.

    api.jquery.com

    Στο jQuery 3, εάν προσθέσετε ένα όρισμα εισόδου με το έπειτα() Μέθοδος για $ .when (), το επιχείρημα θα είναι που ερμηνεύεται ως συμβατό "υποκείμενο".

    Αυτό σημαίνει ότι το $ .when η μέθοδος θα είναι σε θέση να δέχονται μια σειρά από εισόδους, όπως οι εγγενείς υποσχέσεις ES6 και οι υποσχέσεις Bluebird, που καθιστούν δυνατή την εγγραφή πιο εξελιγμένων ασύγχρονων επανάκλησης.

    9. Νέα εμφάνιση / απόκρυψη λογικής

    Προκειμένου να αυξηθεί συμβατότητα με ανταποκρινόμενο σχεδιασμό, ο κώδικας που σχετίζεται με εμφάνιση και απόκρυψη στοιχείων έχει ενημερωθεί στο jQuery 3.

    Από τώρα και στο εξής, το .προβολή(), .κρύβω(), και .μεταβάλλω() οι μέθοδοι θα επικεντρωθούν inline στυλ, αντί για υπολογισμένα στυλ, έτσι θα το κάνουν καλύτερες αλλαγές στο φύλλο στυλ.

    Ο νέος κώδικας σέβεται το απεικόνιση τιμές των φύλλων στυλ όποτε αυτό είναι δυνατό, πράγμα που σημαίνει ότι οι κανόνες CSS μπορούν δυναμική αλλαγή μετά από συμβάντα όπως αναπροσανατολισμός συσκευής και αλλαγή μεγέθους παραθύρου.

    Τα έγγραφα υποστηρίζουν ότι το πιο σημαντικό αποτέλεσμα θα είναι:

    "Ως αποτέλεσμα, είναι αποσυνδεδεμένα στοιχεία δεν θεωρούνται πλέον κρυμμένα εκτός αν έχουν inline οθόνη: καμία ·, και ως εκ τούτου .μεταβάλλω() θα δεν τους διαφοροποιούν πλέον από τα συνδεδεμένα στοιχεία όπως το jQuery 3.0. "

    Εάν θέλετε να καταλάβετε καλύτερα το αποτελέσματα της νέας λογικής εμφάνισης / απόκρυψης, εδώ είναι μια ενδιαφέρουσα συζήτηση Github για αυτό.

    Οι προγραμματιστές της jQuery δημοσίευσαν επίσης έναν πίνακα Εγγράφων Google σχετικά με τον τρόπο λειτουργίας της νέας συμπεριφοράς σε διαφορετικές περιπτώσεις χρήσης.

    10. Επιπλέον προστασία κατά των επιθέσεων XSS

    Προστέθηκε το jQuery 3 ένα επιπλέον επίπεδο ασφαλείας κατά των επιθέσεων Cross-Site Scripting (XSS), απαιτώντας από τους προγραμματιστές να καθορίσουν dataType: "script" στις επιλογές του $ .ajax () και το $ .get () μεθόδων.

    Με άλλα λόγια, αν θέλετε να εκτελέσετε αιτήσεις δέσμης ενεργειών μεταξύ τομέων, εσείς πρέπει να το δηλώσει στις ρυθμίσεις αυτών των μεθόδων.

    Slideshare από τον Andrew Kerr: Διασύνδεση μεταξύ ιστοτόπων (διαφάνεια 17)

    Σύμφωνα με τα έγγραφα, η νέα απαίτηση είναι χρήσιμη όταν μια "απομακρυσμένη τοποθεσία παρέχει περιεχόμενο χωρίς δέσμες ενεργειών αλλά αργότερα αποφασίζει εξυπηρετήστε ένα σενάριο που έχει κακόβουλη πρόθεσηMsgstr "Η αλλαγή δεν επηρεάζει το $ .getScript () , καθώς ορίζει το dataType: "script" επιλογή.