ما الجديد في مسج 3 - أروع الميزات

jQuery 3.0 ، تم إطلاق الإصدار الرئيسي الجديد من jQuery أخيرًا. انتظر مجتمع مطوري الويب هذه الخطوة المهمة منذ أكتوبر 2014 ، عندما بدأ فريق jQuery العمل على الإصدار الرئيسي الجديد حتى الآن ، يونيو 2016 ، عندما الإصدار النهائي خارج.

ملاحظة الإصدار وعود أنحف وأسرع مسج ، مع التوافق الوراء في عين الاعتبار. في هذا المنشور ، نلقي نظرة على بعض الميزات الجديدة لبرنامج jQuery 3.0 لنقدم لك نظرة عامة حول كيفية تغيير منظر جافا سكريبت JavaScript.

من أين أبدا

إذا كنت تريد تنزيل jQuery 3.0 للتجربة بنفسك ، فانتقل مباشرةً إلى صفحة التنزيل. يجدر أيضًا إلقاء نظرة على دليل الترقية أو الكود المصدري.

إذا كنت ترغب في اختبار كيفية عمل مشروعك الحالي مع jQuery 3.0 ، فيمكنك تجربة البرنامج المساعد jQuery Migrate الذي يحدد مشكلات التوافق في التعليمات البرمجية الخاصة بك. يمكنك أيضًا إلقاء نظرة خاطفة على المعالم المستقبلية.

هذا المقال لا يغطي الكل الميزات الجديدة لـ jQuery 3.0 ، فقط الميزات الأكثر إثارة للاهتمام: تحسين جودة الرمز ، تكامل ميزات ECMAScript 6 الجديدة ، واجهة برمجة تطبيقات جديدة للرسوم المتحركة ، طريقة جديدة للهروب من السلاسل ، دعم SVG المحسّن ، تحسين عمليات معاودة الاتصال غير المتزامن ، تحسين التوافق مع المواقع سريعة الاستجابة ، وزيادة الأمن.

1. حصلت على حلول IE القديمة

أحد الأهداف الرئيسية للإصدار الرئيسي الجديد هو تحقيق ذلك أسرع وأكثر أناقة, وبالتالي الخارقة القديمة والحلول المتعلقة IE9- حصلت إزالتها. هذا يعني أنه إذا كنت تريد أو تحتاج إلى دعم IE6-8 ، فسيتعين عليك الاستمرار في استخدام أحدث إصدار 1.12 الافراج ، حتى الإصدار 2.x لا تملك السلسلة الدعم الكامل لمستكشفات الإنترنت الأقدم (IE9-). تحقق من الملاحظات على دعم المتصفح في المستندات.

لاحظ أن هناك أيضا العديد من الميزات المهملة في jQuery 3. أحد أوجه القصور الكبيرة في دليل الترقية هو أن الميزات التي تم إهمالها - اعتبارًا من يونيو 2016 - لا يتم تجميعها ، لذلك إذا كنت مهتمًا بها ، فستحتاج إلى البحث عنها باستخدام أداة البحث في المتصفح ( السيطرة + F).

2. مسج 3.0 يعمل في وضع صارم

نظرًا لأن معظم المتصفحات التي يدعمها jQuery 3 تدعم الوضع الصارم ، فقد تم إنشاء الإصدار الرئيسي الجديد مع وضع هذا التوجيه في الاعتبار.

على الرغم من أن jQuery 3 قد كتب في وضع صارم ، من المهم معرفة ذلك الرمز الخاص بك غير مطلوب لتشغيله في وضع صارم, وانت ايضا لا تحتاج إلى إعادة كتابة رمز jQuery الحالي الخاص بك إذا كنت ترغب في الترحيل إلى jQuery 3. وضع JavaScript صارم وغير صارم يمكن أن يتعايش بسعادة.

هناك استثناء واحد: بعض إصدارات ASP.NET ذلك - بسبب الوضع الصارم - هي غير متوافق مع مسج 3. إذا كنت مشتركًا في ASP.NET ، يمكنك إلقاء نظرة على التفاصيل هنا في المستندات.

3. ل ... من الحلقات هو قدم

jQuery 3 يدعم for ... of statement ، نوع جديد من إلى عن على حلقة ، المقدمة في ECMAScript 6. أنه يعطي طريقة أكثر وضوحا ل حلقة على الأشياء القابلة للتكرار, مثل المصفوفات والخرائط والمجموعات.

في مسج ، ل ... من حلقة يمكن أن تحل محل السابق $ .each (...) بناء الجملة ، ويمكن أن تجعل من السهل حلقة من خلال عناصر مجموعة jQuery.

نلاحظ أن ل ... من حلقة الإرادة عمل فقط إما في بيئة ذلك يدعم ECMAScript 6, او اذا انت استخدام مترجم جافا سكريبت مثل بابل.

4. الرسوم المتحركة حصلت على API جديد

يستخدم jQuery 3 واجهة برمجة تطبيقات requestAnimationFrame () لأداء الرسوم المتحركة وعمل الرسوم المتحركة تشغيل أكثر سلاسة وأسرع. تستخدم واجهة برمجة التطبيقات الجديدة فقط في المتصفحات التي تدعمها ؛ للمتصفحات الأقدم (على سبيل المثال IE9) تستخدم jQuery واجهة برمجة تطبيقاتها السابقة كطريقة احتياطية لعرض الرسوم المتحركة.

RequestAnimationFrame منذ فترة طويلة ، إذا كنت مهتمًا بما يعرفه أو لماذا يجب عليك استخدامه ، فإن CSS Tricks لديه وظيفة جيدة عنه.

5. طريقة جديدة للهروب من السلاسل ذات معنى خاص

الجديد jQuery.escapeSelector () طريقة تسمح لك بالهروب من السلاسل أو الأحرف التي يعني شيئا آخر في CSS من أجل أن تكون قادرة على استخدامه في مسج محدد. دون الهروب من مترجم JavaScript لا يمكن فهمه بشكل صحيح.

تساعدنا المستندات في فهم هذه الطريقة بشكل أفضل من خلال المثال التالي:

“على سبيل المثال ، إذا كان عنصر في الصفحة له معرف “abc.def” لا يمكن تحديده بـ $ ("# abc.def") لأنه تم تحليل المحدد كـ “عنصر مع معرف "اي بي سي" أن لديها أيضا فئة "صفر". ومع ذلك ، يمكن اختيارها مع $ ("#" + $ .escapeSelector ("abc.def")).”

لست متأكدًا من عدد مرات حدوث مثل هذه الحالة ، ولكن إذا واجهت مشكلة من هذا القبيل ، فلديك الآن طريقة سهلة لإصلاحها بسرعة.

6. طرق معالجة الطبقة تدعم SVG

لسوء الحظ ، مسج 3 لا يزال لا يدعم SVG, ولكن أساليب مسج التي تتعامل مع أسماء فئة CSS ، مثل .addClass () و .hasClass (), الآن يمكن استخدامها ل مستندات SVG الهدف كذلك. هذا يعني أنه يمكنك تعديل (إضافة أو إزالة أو تبديل) أو البحث عن فئات باستخدام jQuery في الرسومات المتدرجة للتحجيم, ثم نمط الطبقات مع CSS.

7. الكائنات المؤجلة متوافقة الآن مع وعود JS

وعود جافا سكريبت - الأشياء المستخدمة لحسابات غير متزامنة - تم توحيدها في ECMAScript 6 ؛ تم تحديد سلوكهم وميزاتهم في معايير Promises / A +.

في مسج 3, الأشياء المؤجلة تم جعلها متوافقة مع معايير Promises / A + الجديدة. المؤجلة هي كائنات قابلة للتسلسل التي تجعل من الممكن ل إنشاء قوائم انتظار رد الاتصال.

الميزة الجديدة تتغير كيف يتم تنفيذ وظائف رد الاتصال غير المتزامن. وعود السماح للمطورين بكتابة التعليمات البرمجية غير المتزامنة والتي تكون أقرب من المنطق إلى التعليمات البرمجية المتزامنة.

راجع أمثلة التعليمات البرمجية من دليل الترقية أو ، يمكنك إلقاء نظرة على هذا البرنامج التعليمي الرائع Scotch.io حول أساسيات JavaScript Promises.

8. jQuery.when () يفسر الوسائط المتعددة بشكل مختلف

ال . عندما $ () طريقة توفر وسيلة ل تنفيذ وظائف رد الاتصال. إنها جزء من jQuery منذ الإصدار 1.5. إنها طريقة مرنة ؛ كما أنه يعمل مع وسيطات صفر ، ويمكنه قبول كائن واحد أو أكثر كوسيطات أيضًا.

3 مسج يغير الطريقة التي الحجج . عندما $ () يتم تفسيرها عندما تحتوي على . ثم $ () طريقة التي يمكنك من خلالها تمرير عمليات الاسترجاعات الإضافية كحجج إلى . عندما $ () طريقة.

في jQuery 3 ، إذا قمت بإضافة وسيطة إدخال مع ثم() طريقة ل . عندما $ (), الحجة ستكون يتم تفسيره على أنه "متوافق" مع الوعد.

هذا يعني أن $. عندما طريقة سوف تكون قادرة على قبول مجموعة حدود المدخلات, مثل ES6 Promises و Bluebird Promises ، الذي يجعل من الممكن كتابة عمليات رد اتصال غير متزامنة أكثر تطوراً.

9. عرض جديد / إخفاء المنطق

من أجل زيادة التوافق مع تصميم استجابة, الكود المتعلق بـ إظهار وإخفاء العناصر تم تحديثه في jQuery 3.

من الان فصاعدا .تبين(), .إخفاء(), و .تبديل () سوف طرق التركيز على أنماط مضمنة, بدلا من الأساليب المحسوبة ، وبهذه الطريقة سوف أفضل التغييرات ورقة أنماط الاحترام.

يحترم القانون الجديد عرض قيم أوراق الأنماط كلما كان ذلك ممكنًا ، مما يعني أن قواعد CSS يمكنها ذلك تغيير حيوي عند أحداث مثل إعادة توجيه الجهاز وتغيير حجم النافذة.

تؤكد المستندات أن أهم نتيجة ستكون:

"نتيجة لذلك، العناصر المنفصلة هي لم تعد تعتبر خفية ما لم يكن لديهم مضمنة عرض لا شيء؛, وبالتالي .تبديل () سوف لم تعد تفرق بينهما من العناصر المتصلة اعتبارًا من jQuery 3.0. "

إذا كنت ترغب في فهم أفضل لل نتائج إظهار / إخفاء المنطق الجديد, هنا مناقشة جيثب مثيرة للاهتمام حول هذا الموضوع.

نشر مطورو jQuery أيضًا جدول مستندات Google حول كيفية عمل السلوك الجديد في حالات الاستخدام المختلفة.

10. حماية إضافية ضد هجمات XSS

تمت إضافة jQuery 3 طبقة أمنية إضافية ضد هجمات البرمجة عبر المواقع (XSS) من خلال مطالبة المطورين بتحديدها نوع البيانات: "البرنامج النصي" في خيارات .ajax $ () و ال $. احصل على () أساليب.

بمعنى آخر ، إذا كنت تريد تنفيذ طلبات البرامج النصية عبر المجال ، فأنت بذلك يجب أن يعلن هذا في إعدادات هذه الأساليب.

وفقا لمستندات ، والشرط الجديد مفيد عندما يكون "موقع بعيد يسلم المحتوى غير النصي ولكن في وقت لاحق يقرر تقديم سيناريو له نية خبيثة"التغيير لا يؤثر على $ .getScript () الطريقة ، لأنه يحدد نوع البيانات: "البرنامج النصي" الخيار صراحة.