push state

حالة الدفع العالي

hy-push-state هو مكون ويب يتيح لك تحويل صفحات الويب إلى تطبيقات ويب. يقوم المكون بتحميل محتوى جديد ديناميكيًا (المعروف سابقًا باسم "ajax") وإدراجه في الصفحة الحالية، دون التسبب في وميض باللون الأبيض، أو وميض للمحتوى غير المنسق، وما إلى ذلك.

تحويل مواقع الويب الثابتة إلى تطبيقات ويب ديناميكية. {:.يقود}

تشبه hy-push-state pjax و SmoothState، ولكنها توفر منطق جلب مسبق أكثر تقدمًا وتمنحك المزيد من التحكم في الأجزاء الداخلية لتمكين الرسوم المتحركة المتقدمة لانتقال الصفحة.

يتم استخدام hy-push-state بالفعل بواسطة مئات المواقع كجزء من سمة Hydejack{:.external} Jekyll.

ملاحظة : الإصدار الحالي لا يزال إصدارًا تجريبيًا. ربما تظل واجهة برمجة التطبيقات العامة تتغير بطرق مهمة. {:.رسالة}

أمثلة

عند عرض هذه الصفحة على webcomponents.org، سيتم عرض المثال أدناه كعرض توضيحي تفاعلي. بخلاف ذلك، ابحث عن الأمثلة المستقلة أدناه.

 < hy-push-state initial-href =" https://qwtel.com/hy-push-state/example/simple/ " prefetch >
  < p >
    < a href =" ./1.html " > Page 1 </ a >
    < a href =" ./2.html " > Page 2 </ a >
    < a href =" ./3.html " > Page 3 </ a >
  </ p >
  < p > Super simple example. </ p >
</ hy-push-state >

عند عرض هذا المستند على GitHub، أو npm، أو أي مكان آخر، يمكنك الاطلاع على الأمثلة المستقلة:

• مثال لمكون الويب{:.external}
• مثال مسج {:.external}
• مثال الفانيليا JS {:.external}
• مثال ميكسين {:.external}

رخصة

hy-push-state مفتوح المصدر ولكنه ليس مجانيًا.

يجوز لك استخدام المكون وفقًا لترخيص GPL-3.0، ولكن هذا يعني أنك يجب أن تكون على استعداد لإصدار التعليمات البرمجية الخاصة بك بموجب ترخيص متوافق مع GPLv3 بدوره.

في الحالات التي لا يكون فيها ذلك مقبولاً، تتوفر التراخيص التجارية التالية:

	شخصي	بدء	مَشرُوع
# المطورين	2	15	∞
رخصة	شخصي	بدء	مَشرُوع
سعر	29 دولارًا	249 دولارًا	499 دولارًا
	شراء {:.gumroad-button}	شراء {:.gumroad-button}	شراء {:.gumroad-button}
{:.طاولة التمدد}

الاستخدام

يمكن استخدام حالة hy-push بعدة طرق:

• كمكون ويب، كوحدة ES6 واستيراد HTML
• كمكون إضافي لـ jQuery
• مثل فئة الفانيليا جافا سكريبت
• كجزء من كود الواجهة الأمامية المجمعة.
• (متقدم) ربما كجزء من التسلسل الهرمي للمكونات الخاصة بك مثل ES6 Mixin.

مكون الويب

يعد مكون الويب الطريقة المفضلة لاستخدام hy-push-state ، ولكنه يتطلب دعمًا في المتصفح أو ملف polyfill. هناك طرق متعددة لإدراجها في صفحتك:

وحدة ES6 المجمعة

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

 < script type =" module " href =" https://unpkg.com/hy-push-state/dist/webcomponent/module " > </ script >

< hy-push-state replace-ids =" main,aside " prefetch >
  < main id =" main " > <!-- ... --> </ main >
  < aside id =" aside " > <!-- ... --> </ aside >
</ hy-push-state > 

استيراد HTML

قررت بعض المتصفحات عدم تنفيذ عمليات استيراد HTML، ولكن يمكن تعبئتها بسهولة.

 < link rel =" import " href =" https://unpkg.com/hy-push-state/dist/webcomponent/hy-push-state.html " >

< hy-push-state replace-ids =" main,aside " prefetch >
  < main id =" main " > <!-- ... --> </ main >
  < aside id =" aside " > <!-- ... --> </ aside >
</ hy-push-state > 

وحدة ES6 غير المجمعة (تجريبية)

عند تحميل المكون من unpkg CDN، يمكنك استيراد المصدر مباشرة عن طريق إلحاق معلمة استعلام ?module .

 < script type =" module " src =" https://unpkg.com/hy-push-state/src/webcomponent/module?module " > </ script >

< hy-push-state replace-ids =" main,aside " prefetch >
  < main id =" main " > <!-- ... --> </ main >
  < aside id =" aside " > <!-- ... --> </ aside >
</ hy-push-state >

لاحظ أن هذا الأسلوب سيؤدي إلى مئات طلبات HTTP المنفصلة (واحد لكل وحدة) وهو مخصص للاختبار والنماذج الأولية فقط. يعد استيراد وحدات ES6 غير المجمعة أبطأ بكثير من التوزيعات المجمعة وسيظل كذلك في المستقبل المنظور.

إحدى ميزات هذا الأسلوب هي أن التبعيات المشتركة لن يتم تضمينها مرتين عند استخدام أكثر من مكون واحد من عائلة مكونات Hydejack. ومع ذلك، يعد إعداد حزمة الويب حلاً أفضل في هذه الحالات:

المجمعون

يمكنك استخدام hy-push-state مع أداة تجميع الواجهة الأمامية مثل حزمة الويب أو النسخة المجمعة. ما عليك سوى تثبيت المكون باستخدام npm أو الغزل واستيراد المصدر في التعليمات البرمجية الخاصة بك:

 import 'hy-push-state/src/webcomponent/module' ;

إذا كنت تريد التحكم في وقت define العنصر المخصص d، فيمكنك أيضًا استيراد HTMLElement كما يلي:

 import { HyPushStateElement } from 'hy-push-state/src/webcomponent' ;
// ...
customElements . define ( 'hy-push-state' , HyPushStateElement ) ;

لاحظ أن جميع تبعيات hy-push-state هي وحدات ES6 صالحة، بحيث يمكن تضمينها مع ModuleConcatenationPlugin الخاص بحزمة الويب.

التوثيق

• خيارات
• طُرق
• الأحداث

الجلب المسبق للصفحة

تبدأ hy-push-state طلب HTTP بمجرد أن "يلمح" المستخدم إلى أنه على وشك فتح صفحة جديدة عن طريق تحريك الماوس أو التركيز أو لمس الرابط ( touchstart -ing). إذا كان التخمين صحيحًا، فإن الطلب يكون له بداية مبكرة تبلغ 100 مللي ثانية أو أكثر، مما يزيد من السرعة الملموسة لموقعك بالإضافة إلى الاستبدال السريع للصفحة بنمط تطبيق الويب بالفعل.

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

على سبيل المثال، سيؤدي تمرير الروابط في الشريط الجانبي على موقع qwtel.com إلى إنتاج مخطط زمني مثل الجدول أدناه:

{:.lead} لقطة شاشة لوحدة تحكم مطوري Chrome لطلبات الجلب المسبق. {:.شكل}

الرسوم المتحركة المتقدمة

تسمح hy-push-state بإنشاء رسوم متحركة متقدمة لانتقال الصفحة، مثل تلك المستخدمة في Hydejack وتطبيقات الويب الحديثة. يمكن أن تعتمد هذه على الوعد بدلاً من الاعتماد على الوقت لمراعاة التأخيرات الصغيرة الناتجة عن التعليمات البرمجية الأخرى أو انقطاعات GC أو الأجهزة الأبطأ بشكل عام

قد يبدو رمز الرسوم المتحركة البسيطة المتلاشية باستخدام Web Animations API كما يلي:

 pushStateEl . addEventListener ( 'hy-push-state-start' , ( { detail } ) =>
  detail . transitionUntil ( new Promise ( res =>
    document
      . getElementById ( 'my-content' )
      . animate ( [ { opacity : 1 } , { opacity : 0 } ] , { duration : 250 } )
      . addEventListener ( 'finish' , res )
  ) )
) ;

الرسوم المتحركة المستندة إلى الوقت ممكنة أيضًا ويتم تهيئتها باستخدام خيار duration .

المعيار الذهبي

يتبع هذا المكون المعيار الذهبي لمكونات الويب.

مصدر

الكود المصدري مكتوب بأسلوب برمجة حرفي ، ويجب أن يكون سهل الوصول إليه بشكل معقول. ومع ذلك، هناك حاجة إلى بعض المعرفة بـ RxJS.

يتم تنفيذ الوظيفة الأساسية في mixin / index.js ، والذي يُستخدم لإنشاء إصدارات خاصة بإطار العمل للمكون.

• jquery
  • index.js
• mixin
  • constants.js
  • event-listeners.js
  • events.js
  • fetching.js
  • history.js
  • index.js
  • methods.js
  • operators.js
  • script-hack.js
  • scrolling.js
  • setup.js
  • update.js
• vanilla
  • index.js
• webcomponent
  • html-import.s
  • index.js
  • module.js
• common.js
• index.js
• url.js

مقاس

يبلغ حجم الحزمة المصغرة حوالي 90 كيلو بايت، أو حوالي 20 كيلو بايت مضغوطة. معظمها يأتي من RxJS. عند استخدام RxJS بالفعل في مشروعك، أو استخدام أكثر من مكون واحد من عائلة مكونات Hydejack، فكر في استخدام أداة تجميع الواجهة الأمامية.

مقاس	ملف
84 ك	dist/jquery/index.js
19 ك	dist/jquery/index.js.gz
80 ألف	dist/mixin/index.js
18 ك	dist/mixin/index.js.gz
81 ألف	dist/vanilla/index.js
18 ك	dist/vanilla/index.js.gz
86 ألف	dist/webcomponent/html-import.js
19 ك	dist/webcomponent/html-import.js.gz
86 ألف	dist/webcomponent/index.js
19 ك	dist/webcomponent/index.js.gz
86 ألف	dist/webcomponent/module.js
19 ك	dist/webcomponent/module.js.gz