لقد كتبت رمز اختبار واستخدمت متطلبات. يمكن تسجيله بسهولة وتسهيل المراجعة المستقبلية.
عنوان GIT: https://github.com/lily1010/requirespa
لنلقي نظرة على الدليل أدناه
كما يتضح من المشروع أعلاه ، قمت باستخراج CSS بشكل منفصل وتم تنفيذها عند الطلب ، أي Test1.css سيتم تحميلها عند تحميل test1.html ، وسيتم تحميل test2.css عند تحميل test2.html.
دعونا نلقي نظرة على رمز الإدخال index.html أولاً
<! doctype html> <html> <head> <meta charset = "utf-8"/> <title> </title> <meta name = "viewport" content = "width = width device ، scale scale = 1 ، minimt-scale = 1 ، maximum-scale = 1 ، user-scalable = no <script data-main = "js/main" src = "js/require.js"> </script> <viv> </viv> </body> </html>
ما سبق بسيط جدا. أولاً ، حدد البيانات المطلقة للبيانات. بالإضافة إلى ذلك ، من أجل تحميل CSS عند الطلب ، قمت بتعريف فئة CSS-ATTRIBUTE.
2. قم بتكوين المسار وقم بالمعالجة المنطقية في Main.js
require.config ({paths: {"jQuery": "lib/jquery-1.11.0" ، "text": "lib/text" ، "text1": "CSS2": "../ style/test2.css"}}) يتطلب (["jQuery" ، "text! text1 '،' text! text2 '،' text! css1 ، 'text! css2'] $ (". css-attribute"). html (css1) ؛ $ (". صفحة"). html (template2) ؛ما ورد أعلاه هو الأكثر أساسية يتطلب التكوين ، فقط انتبه لاستخدام text.js ، إنه بسيط للغاية
ثلاثة ، دعنا نلقي نظرة على هياكل وأنماط صفحتين
code test1.html رمز كما يلي:
<viv> <butten> انقر لي للقفز إلى الصفحة الثانية من المنتجع الصحي <///div>
② CSS من test1.html ، أي ، Test1.CSS رمز هو كما يلي:
.test1 {الموضع: مطلق ؛ أعلى: 0 ؛ أسفل: 0 ؛ اليسار: 0 ؛ اليمين: 0 ؛ خلفية اللون: أحمر ؛}. تخطي {الموضع: مطلق ؛ أعلى: 50 ٪ ؛ اليسار: 50 ٪ ؛ -webkit-transform: ترجمة (-50 ٪ ،-50 ٪) ؛ التحويل: ترجمة (-50 ٪ ،-50 ٪) ؛}التأثير على النحو التالي:
code test2.html رمز كما يلي:
<viv> <butten> أنا الصفحة الثانية ، انقر فوق لي للعودة إلى الصفحة الأولى </button> </viv>
css cs of test2.html ، أي ، test2.css رمز على النحو التالي:
.test2 {الموضع: مطلق ؛ أعلى: 0 ؛ أسفل: 0 ؛ اليسار: 0 ؛ اليمين: 0 ؛ خلفية اللون: وردي ؛}. أعلى: 50 ٪ ؛ اليسار: 50 ٪ ؛ -webkit-transform: ترجمة (-50 ٪ ،-50 ٪) ؛ التحويل: ترجمة (-50 ٪ ،-50 ٪) ؛}التأثير على النحو التالي:
تتطلب المقالة أعلاه تنفيذًا بسيطًا لتطبيق صفحة واحدة (SPA) هو كل المحتوى الذي شاركته معك. آمل أن تتمكن من إعطائك مرجعًا وآمل أن تتمكن من دعم wulin.com أكثر.