عندما يكون المعدل الأمامي ، لا يحتاج JS فقط إلى إدارة معيارية ، ولكن HTML يحتاج أحيانًا أيضًا إلى إدارة معيارية. نقدم هنا كيفية تنفيذ التطوير المعياري لرمز HTML من خلال requirejs.
كيفية تحميل HTML باستخدام متطلبات
لدى Reuqirejs مكون إضافي يمكن للقراءة محتوى ملف محدد ، وقراءة المحتوى هي نص.
كيفية تنزيل البرنامج المساعد النص
يمكن تنزيل الطريقة الأولى من خلال NPM:
تثبيت NPM متطلبات/نص
يمكن أيضًا تنزيل الطريقة الثانية مباشرة من github الرسمي.
فقط انسخ المحتوى مباشرة إلى text.js.
كيفية تثبيت البرنامج المساعد النص
يمكنك تكوين تبعية المكون الإضافي للنص في Main.js في requirejs ، وهو ما يشبه jQuery. فقط تأكد من أنه يمكن تحميله من خلال التحميل العادي.
requirejs.config ({baseurl: './'،paths: {' text ': path+'/require/text '، ...} ، shim: {...}}) ؛يمكن أيضًا وضعها مباشرة في baseurl.
كيفية استخدام النص
في الوحدة الهدف ، اتبع بناء الجملة التالي:
define (function (require) {var html = require ("text! html/test.html") ؛ console.log (html) ؛}) ؛أو
define (["text! html/test.html"] ، function (html) {console.log (html) ؛}) ؛كيف تنفذ التطور المعياري لـ HTML؟
بعد قراءة ما ورد أعلاه ، يمكنك بالفعل استخدام النص ، ولكن لا يزال لا تعرف كيفية تنظيم الكود الأمامي.
خذ كستناء:
ستقفز صفحة موقع الويب الخاصة بحديقة المدونة إلى صفحات مختلفة وفقًا للملاحة أعلاه. إذا كان في صفحة واحدة ، فمن السهل التفكير في الطريقة الأصلية ، يتوافق زر التنقل مع DIV مختلف. النقر فوق هذا الزر سيعرض Div المقابل ؛ سيتم إخفاء divs الأخرى.
ثم ، قد يبدو الرمز الأمامي هكذا:
<html> <body> <v> زر التنقل 1 ، زر التنقل 2 ، زر التنقل 3 </nav> <div style = "display: block"> صفحة مقابلة للزر 1 </div> <div style = "display: none"> صفحة مقابلة للزر 2 </div> <div style = "display: none"
سيكون مثل هذا الرمز فوضويًا جدًا ... وستكون HTML الواجهة الأمامية طويلة جدًا ... لا تفضي إلى الصيانة.
ثم مع المكون الإضافي لـ reuqirejs ، يمكنك القيام بذلك:
<html> <body> <v> زر التنقل 1 ، زر التنقل 2 ، زر التنقل 3 </nav> <div id = "target"> </viv> </body> </tml>
ثم في الوحدة المقابلة:
$ ('#target'). html (require ("text! target button يتوافق مع page.html")) ؛هذا سيجعلك أكثر عرضية! يمكن أيضًا إدارة رمز الواجهة الأمامية بفعالية مع الوحدات النمطية!
ومع ذلك ، تجدر الإشارة إلى أن هذه الطريقة ستؤدي إلى أن يكون الحدث غير صالح - لذلك يجب عليك إعادة ربط الحدث بعد طريقة HTML ().
سأقدم لك الكثير حول استخدام requistjs للتطوير المعياري في HTML ، وآمل أن يكون مفيدًا لك!