هناك الكثير من رمز JavaScript في تطبيقات الويب الآن ، ونحن نبحث دائمًا عن حلول مختلفة تجعلها أسرع.
1. نستخدم Proxying الحدث لجعل مراقبة الأحداث أكثر كفاءة.
2. نستخدم تقنية نشر الوظيفة للحد من عدد المرات التي يتم فيها استدعاء طريقة معينة خلال فترة زمنية. يرجى الرجوع إلى: كيفية منع تشغيل وظائف الأحداث عالية التردد (الترجمة الصينية)
3. نستخدم محمل JavaScript لتحميل جزء من الموارد التي نحتاجها حقًا ، إلخ.
هناك طريقة أخرى لجعل صفحتنا أسرع وأكثر كفاءة. وهذا هو إضافة وحذف أنماط معينة في ورقة الأنماط من خلال JS ، بدلاً من الاستعلام باستمرار عن عناصر DOM وتطبيق أنماط مختلفة. هنا كيف يعمل.
الحصول على ورقة الأنماط
يمكنك اختيار أي ورقة أنماط لإضافة قواعد النمط. إذا كان لديك ورقة نمط محددة ، فيمكنك إضافة سمة معرف إلى علامة <Nink> أو <Style> في صفحة HTML ، وبعد ذلك يمكنك الحصول على كائن ورقة CSSSTYLESSH مباشرة من خلال سمة الورقة لعنصر DOM. يمكن أيضًا اجتياز أوراق الأنماط إلى:
نسخة الكود كما يلي:
// إرجاع قائمة StylSheet STYLESHERISH التي تشبه صفيف (تشبه الصفيف)
أوراق var = document.stylesheets ؛
/*
تشبه قيمة الإرجاع ما يلي:
قائمة الأنماط
{
0: ورقة CSSSTSTYLIST
1: ورقة cssstyles
2: ورقة CSSSTSTYLED ،
3: ورقة CSSSTSTYLED ،
4: ورقة CSSSTSTYLIST
الطول: 5 ،
البند: وظيفة
}
*/
// احصل على الورقة الأولى ، وتجاهل سمة الوسائط
ورقة var = document.stylesheets [0] ؛
ما تحتاجه إلى إيلاء اهتمام خاص هو سمة الوسائط لورقة الأنماط - عندما تريد عرضها على الشاشة ، يجب ألا تضيف قواعد CSS إلى ورقة نمط الطباعة. يمكنك إلقاء نظرة فاحصة على معلومات السمة الخاصة بكائن ورقة CSSSTSTYLED:
نسخة الكود كما يلي:
// وحدة التحكم تقوم بإخراج معلومات ورقة النمط الأول
console.log (document.stylesheets [0]) ؛
/*
قيمة الإرجاع:
ورقة CSSSTSTYLISTER
cssrules: cssrolelist [كائن]
معاق: خطأ
HREF: "http://davidwalsh.name/someshet.css"
وسائل الإعلام: Medialist [كائن]
ownernode: رابط [كائن]
Ownerrule: NULL
ParentStylesheet: NULL
القواعد: cssrolelist [كائن]
العنوان: فارغ
النوع: "Text/CSS"
*/
// احصل على نوع الوسائط (نوع الوسائط)
console.log (document.stylesheets [0]. MEDIA.Mediatext)
/*
قد تكون قيمة الإرجاع:
"الكل" أو "طباعة" أو وسائط أخرى تم تطبيقها على ورقة الأنماط هذه
*/
في جميع الحالات ، بالتأكيد لديك طريقة للحصول على ورقة الأنماط لإضافة القواعد.
إنشاء ورقة الأنماط الجديدة
في كثير من الحالات ، قد تكون أفضل طريقة للقيام بذلك هي إنشاء عنصر جديد <Style> لتخزين هذه القواعد الديناميكية. هذا أيضًا بسيط للغاية:
نسخة الكود كما يلي:
ورقة var = (function () {
// إنشاء <style> علامة
var style = document.createElement ("style") ؛
// يمكنك إضافة سمة الوسائط (/الوسائط ، استعلام الوسائط)
// style.setattribute ("Media" ، "Screen")
// style.setattribute ("Media" ، "Screen فقط و (Max-Width: 1024px)")
// لـ WebKit Hack :(
style.appendChild (document.createTextNode ("")) ؛
// إضافة عنصر <style> إلى الصفحة
document.head.appendchild (style) ؛
Return Style.Sheet ؛
}) () ؛
تتمثل المأساة في أن WebKit تحتاج إلى اختراق قليل لإنشاء بشكل صحيح ، لكننا بحاجة فقط إلى الاهتمام بهذه الورقة.
أدخل القاعدة
في الإصدارات السابقة من IE ، لم تكن طريقة إدراج أوراق الأنماط متوفرة ، على الرغم من أنها الآن هي المعيار لحقن القاعدة. تتطلب طريقة insertrule كتابة قاعدة CSS بأكملها ، والتي هي نفسها كما في ورقة الأنماط:
نسخة الكود كما يلي:
sheet.insertrule ("header {float: left ؛ extress: 0.8 ؛}" ، 1) ؛
على الرغم من أن طريقة API JavaScript هذه تبدو ريفية بعض الشيء ، إلا أنها تعمل مثل هذا. يشير فهرس المعلمة الثاني إلى إدراج الموقع (الفهرس) في القاعدة. هذا أيضًا مفيد جدًا بحيث يمكنك إدراج نفس القاعدة/الكود ، مما يسمح بقواعد الظهر أن تدخل مفعولها. الفهرس الافتراضي هو -1 ، والذي يمثل نهاية المجموعة بأكملها. إذا كنت ترغب في الحصول على قواعد تحكم إضافية/كسول ، فيمكنك أيضًا إضافة علامات مهمة إلى قاعدة معينة لتجنب مشكلات الفهرسة.
إضافة قواعد - طريقة addrule غير القياسية
يحتوي كائن ورقة CSSSTSTYLESSHELL على طريقة ADDRULE تتيح لك تسجيل قواعد CSS في ورقة الأنماط. تقبل طريقة AddRule ثلاث معلمات: المعلمة الأولى هي المحدد ، والمعلمة الثانية هي رمز قاعدة CSS ، والثالث هو فهرس عدد صحيح يبدأ من 0 ، مما يشير إلى موضع النمط (في نفس المحدد):
نسخة الكود كما يلي:
sheet.addrule ("#mylist li" ، "float: left ؛ الخلفية: أحمر! مهم ؛" ، 1) ؛
قيمة الإرجاع لطريقة addrule هي دائمًا -1 ، لذلك ليس لها أهمية عملية.
تذكر أن ميزة هذا النهج هي أن العناصر التي تمت إضافتها من الصفحة تلقائيًا قد تم تطبيق الأنماط عليها ، مما يعني أنه لا يتعين عليك إضافتها إلى عناصر محددة ، ولكن بدلاً من ذلك ضخها مباشرة في الصفحة. بالطبع ، أكثر كفاءة!
قواعد تطبيق الأمن
نظرًا لأن جميع المتصفحات لا تدعم طريقة inserTrule ، فمن الأفضل إنشاء وظيفة غلاف للتعامل مع تطبيق القاعدة. هذه طريقة سريعة للقيام بذلك:
نسخة الكود كما يلي:
وظيفة addcssrule (ورقة ، محدد ، القواعد ، الفهرس) {
if ("insertrule" في ورقة) {
seat.inserTrule (Selector + "{" + Rules + "}" ، index) ؛
}
آخر إذا ("addrule" في ورقة) {
sheet.addrule (المحدد ، القواعد ، الفهرس) ؛
}
}
// كيفية الاستخدام
addcssrule (document.stylesheets [0] ، "header" ، "float: left") ؛
يجب أن تغطي طريقة الأداة جميع الحالات التي تتم فيها إضافة قواعد نمط جديدة. إذا كنت قلقًا بشأن الأخطاء في التطبيق الخاص بك ، فيجب عليك لف الكود للطريقة مع مجموعة Try {} catch (e) {}.
أدخل قواعد الاستعلام عن وسائل الإعلام
هناك طريقتان لإضافة قواعد استعلام الوسائط. الأول هو استخدام طريقة insertrule القياسية:
نسخة الكود كما يلي:
sheet.insertrule (
"MEDIA فقط شاشة و (الحد الأقصى Width: 1140px) {header {display: none ؛}}"
) ؛
بالطبع ، نظرًا لأن الإصدار القديم من IE لا يدعم EnserTrule ، فإن هناك طريقة أخرى هي إنشاء عنصر نمط ، وتحديد سمة الوسائط المناسبة ، ثم إضافة النمط إلى ورقة الأنماط الجديدة. قد يتطلب ذلك استخدام عناصر نمط متعددة ، ولكنه سهل أيضًا. قد أقوم بإنشاء كائن ، وتحديد استعلام الوسائط وكذلك الفهرس ، وإنشاء/الحصول عليها من هذا القبيل.
يعد إضافة قواعد إلى أوراق الأنماط ديناميكيًا طريقة فعالة ، وقد تكون أسهل مما تعتقد. تذكر أن هذا الحل قد يلزم استخدامه في تطبيقك الكبير التالي ، لأنه يمكن أن يمنعك من الوقوع في الحفرة في كل من الكود ومعالجة العناصر.