نطاق الاستخدام:
لمشاريع إدارة المعلومات مثل OA و MIS و ERP ، وما إلى ذلك ، لا يتم النظر في الموقع في الوقت الحالي.
واجهت المشاكل:
لإكمال المشروع ، غالبًا ما تحتاج إلى الرجوع إلى العديد من ملفات JS ، مثل jQuery.js ، easyui ، وما إلى ذلك. هناك أيضًا بعض أعمدة ملفات JS التي كتبتها بنفسي ، فكيف يمكن تحميل هذه الملفات بشكل مناسب؟ إذا تغير الملف ، فكيف يمكن للعميل تحديث ذاكرة التخزين المؤقت في الوقت المناسب؟ سيكون من الأفضل أن يتم تحسين كفاءة تشغيل النقطة.
هدف:
1. يمكن بسهولة الرجوع إلى ملفات JS.
2. حاول استخدام ذاكرة التخزين المؤقت المختلفة لتجنب القراءة المتكررة للملفات من الخادم.
3. إذا تم تحديث ملف JS أو إضافته أو تقليله ، فيجب أن يكون العميل قادرًا على التحديث تلقائيًا وعلى الفور.
4. إعادة استخدام ملفات JS.
بنية الصفحة:
بشكل عام ، يتم تنفيذ مشاريع مثل OA و MIS في الغالب باستخدام FrameSet أو Iframe ، مما يجلب مفاهيم صفحة الوالدين والطفل. يمكننا استخدام هذا لإثبات ضجة.
يمكن تقسيم صفحات الويب إلى ثلاثة أجزاء: Shell ، الصفحة الرئيسية ، التسمية ، قائمة البيانات ، النموذج (إضافة ، تعديل). نظرًا لأن طريقة تحميل JS هنا تحتاج إلى استخدام بنية الصفحة هذه ، وهو بالضبط لهذا السبب لا يتم دعم موقع الويب في الوقت الحالي.
يبدو مألوفًا لرؤية هذه الصورة. نعم ، هذا هو الهيكل.
نص
في الوقت الحاضر ، عندما يتعلق الأمر بتطبيقات إصدار الويب ، فإنها تعتمد بشكل متزايد على مختلف JS ، مثل JQuery التابع لجهة خارجية ، Easyui ، My97 ، وما إلى ذلك ، بالإضافة إلى العديد من JS كتبت بنفسي. المزيد والمزيد من الوظائف التي يجب تنفيذها ، يجب استخدام المزيد والمزيد من JS ، ويتم تعديل المزيد من ملفات JS بشكل متكرر. تنشأ الكثير من المشكلات ، مثل كتابة الكثير من <script src = ""> لكل صفحة. هذا مزعج للغاية. كم عدد الصفحات التي تحتاج إلى تغييرها لإضافة ملف JS جديد؟ كيفية تحديث ملف JS على الفور؟ كيفية جعل العميل تحميل JS أسرع. بعض ملفات JS لديها أيضا تبعيات. كيفية ضمان ترتيب التحميل؟ هذا المقال يدور حول مشاركة الحل.
التحميل الديناميكي
من الواضح أنه من المزعج استخدام <script> لتحميل JS على الصفحة ، فماذا أفعل؟ بعد التفكير في الأمر ، ما زلت أستخدم التحميل الديناميكي لحله. لقد بحثت أيضًا عبر الإنترنت ووجدت أن هناك العديد من الأساليب ، بما في ذلك تلك التي كتبها أنفسهم وتلك التي تم تنظيمها في الأطر (مثل SEEJS). في بعض الأحيان ما زلت أشعر أنني أكثر مهارة في صنع واحدة ، لذلك أخطط لكتابة واحدة بنفسي.
كيف يتم تحميلها ديناميكيا؟ باستخدام الطريقة التي توفرها jQuery؟ هذا جيد ، ولكن يجب أن تشير الصفحة إلى jQuery و JS التي كتبتها لتحميل ملف JS. بمعنى آخر ، إذا كان عليك كتابة اثنين من <script> على صفحة ، فسيكون ذلك مزعجًا. إذا كنت تستطيع كتابة واحدة ، يجب ألا تكتب اثنين. على الرغم من أنها مجرد واحدة أخرى ، إلا أنها مزعجة حقًا أن يكون لديك واحدة أخرى. لذلك قررت كتابة طريقة صغيرة للتحميل الديناميكي بنفسي.
ماذا علي أن أفعل إذا لم أتمكن من الكتابة؟ العمة بايدو تأتي وتساعد. بعد البحث في جميع أنواع الأشياء ، وجدت أخيرًا طريقة مثالية نسبيًا ، لذلك سأستخدم هذا.
نسخة الكود كما يلي:
/* الوظائف التي تنفذ التحميل الديناميكي لـ JS تأتي من الإنترنت. بعد القليل من التعديل ، يمكن أن يكون متوافقًا مع IE10 */
var loadscript =
{
$$: function (id) {return document.getElementById (id) ؛ } ،
العلامة: function (element) {return document.getElementSbyTagName (element) ؛ } ،
CE: Function (element) {return document.createElement (element) ؛ } ،
JS: وظيفة (URL ، رد الاتصال) {
var s = loadscript.ce ('script') ؛
S.Type = "Text/JavaScript" ؛
S.Src = url ؛
if (document.documentMode == 10 || document.documentMode == 9) {
S.Onerror = s.onload = loaded ؛
} آخر {
S.OnReadyStateChange = جاهز ؛
S.Onerror = s.onload = loaded ؛
}
loadscript.tag ('head') [0] .AppendChild (s) ؛
وظيفة جاهزة () {/*iE7.0/ie10.0**/
if (s.readyState == 'Loaded' || s.readyState == 'Complete') {
أتصل مرة أخرى()؛
}
}
وظيفة تحميل () {/*Chrome/IE10.0*//
أتصل مرة أخرى()؛
}
}
} ؛
ترتيب التحميل
تم الانتهاء من الرمز الجديد. فيما يلي كيفية تحميل ملفات JS الأخرى. نظرًا لوجود العديد من الملفات ، وهناك بعض التبعيات ، سأفكر في الأمر وأقوم بعمل قاموس لملفات JS ، ثم قم بإنشاء ترتيب تحميل وتحميله بهذا الترتيب.
لكي أكون أكثر استقرارًا ، قررت استخدام طريقة تحميل واحدة تلو الأخرى ، أي تحميل JS ثم تحميل JS آخر. هذا يضمن التبعيات. بالطبع العيب هو أن سرعة التحميل ستكون أبطأ. بشكل عام ، يمكن تحميل صفحات الويب بملفات JS متعددة ، والتي ستكون أسرع.
استخدم ذاكرة التخزين المؤقت
بشكل عام ، سيكون للمتصفحات ذاكرة التخزين المؤقت لمختلف الموارد (مثل صفحات الويب والصور و JS و CSS وما إلى ذلك) ، ولن تنزيلها بعد الآن إذا كان لديهم بالفعل. يبدو جيدًا ، ولكن هناك مشكلتان:
أ. كيف يحدد المتصفح ما إذا كان ملف JS المخزنة مؤقتًا هو الأحدث؟
تم تحديث ملف JS. كيف تجبر المتصفح على التحديث؟
كيف يحكم المتصفح؟ لا أعرف الكثير عن الخطوات المحددة ، لكنني أعلم أن هناك خطوة للذهاب إلى الخادم لسؤال ما إذا كان ملف JS I I Cache هو الأحدث ، وبعد ذلك يمكنني تحديد ما إذا كانت ذاكرة التخزين المؤقت المحلية هي الأحدث. إذا كان هذا هو الأحدث ، فلن أزعجني. إذا لم يكن الأمر كذلك ، فسوف أقوم بتنزيل أحدث واحدة. وهذا يعني ، حتى لو كان لدى العميل بالفعل ذاكرة التخزين المؤقت لملفات JS ، فإن المتصفح يحتاج إلى تأكيد ما إذا كان الأحدث وسيظل يذهب إلى الخادم لطلب. هذا صراع. بالطبع ، بشكل عام ، ستكون هذه العملية سريعة للغاية ، ولكن في بعض الأحيان ستكون هذه العملية بطيئة للغاية.
لذلك ، من الأفضل محاولة تجنب تحميل JS. لذلك يتم تقديم "إعادة استخدام ملفات JS".
تحديث ملف JS
تم تحديث ملف JS ، لكن المتصفح لا يزال يستخدم ملف JS السابق لأنه تم تخزينه مؤقتًا ، وهو عنيد أن ملف JS المخزونات هو الأحدث. ماذا علي أن أفعل؟
أسهل طريقة هي تحميل JS برقم إصدار متبوعًا به. إذا كان هناك تحديث ، فسيكون رقم الإصدار +1. على سبيل المثال ، xxx.js؟ v = 1. بعد تحديث ملف JS ، هو xxx.js؟ v = 2. وبهذه الطريقة ، سيتم تحديث JS بالتأكيد.
يبدو الأمر بسيطًا ، ولكن كيفية إضافة رقم الإصدار هذا؟ كيفية تحديث رقم الإصدار نفسه؟
إعادة الاستخدام
نحتاج إلى إلقاء نظرة على الصورة أعلاه أولاً ، وهي بنية الصفحة ، مع صفحة shell (أو الصفحة الرئيسية) ، والتي نسميها الصفحة الأصل. هناك العديد من الصفحات التي تم تحميلها بواسطة Iframes ، ونضيفها إلى صفحات فرعية.
النهج العام هو تحميل jQuery.js على الصفحة الأصل ، ثم jQuery.js على صفحة الطفل. بالطبع ، عندما يتم تحميل الصفحة الفرعية jquery.js ، يتم استخلاصه مباشرة من ذاكرة التخزين المؤقت ، ولم يعد عمومًا يزعج الخادم.
ومع ذلك ، منذ أن تم تحميل الصفحة الأصل ، لماذا يجب تحميل صفحة الطفل مرة أخرى؟ هل من المقبول تحميله مباشرة في الصفحة الأصل؟ لقد بحثت على الإنترنت ولا يبدو أن أحد يفعل ذلك. ربما أنا بديل للغاية ، أريد فقط تنفيذ هذه الطريقة. الميزة هي أنه يتم تحميل جميع ملفات JS في الصفحة الأصل ، وتستخدم صفحة الطفل مباشرةً JS المحملة في الصفحة الأصل ، بحيث لا تحتاج صفحة الطفل إلى العبث بملفات JS. هذا يمكن أن يكون أيضا أكثر كفاءة. بعد كل شيء ، حتى لو كنت تستخدم ذاكرة التخزين المؤقت للتحميل ، فأنت بحاجة إلى إصدار حكم. ثم ، عند القيام بعمل تحميل ، ستظل هناك خسارة صغيرة. كلما زاد عدد ملفات JS ، زادت وضوحًا.
لذا ، فإن كيفية تنفيذ الأمر يبدو بسيطًا للتفكير في الأمر.
استخدم jQuery في صفحة الأصل
var aa = $ ('div') ؛ // ابحث عن كل divs في الصفحة الأصل
هل هذا ممكن في الصفحة الفرعية؟
var bb = top. $ ('div') ؛ // يمكن العثور على DIV ، ولكن ليس Div لصفحة الطفل ولكن div في الصفحة الأصل.
ماذا يحدث هنا؟ السبب هو نطاق البحث. JQuery لديه ثلاثة معلمات. عادة ما نستخدم فقط الأول ، ويتم تجاهل هذا الأخير. إذن ما هي المعلمة الثانية؟ هذا هو نطاق البحث. أين سوف يبحث jQuery عندما لا يكون هناك محدد؟ ابحث في الصفحة التي تقوم بتحميل jQuery ، بدلاً من البحث في الصفحة التي تستدعي $.
الحل بسيط للغاية أيضًا ، فقط أضف معلمة
var bb = top. $ ('div' ، document) ؛ // حدد نطاق البحث: مستند الصفحة الفرعية
انتظر ، هذا يبدو مزعج جدا. عند كتابة البرنامج النصي ، يجب علينا أيضًا التفكير فيما إذا كان يتم تنفيذ هذا البرنامج النصي على الصفحة الأصل أو على صفحة الطفل؟
حسنًا ، قم بعمل حزمة بسيطة لتجنب هذه المشكلة. اكتب وظيفة في الصفحة الفرعية
نسخة الكود كما يلي:
وظيفة $ (p1) {
إرجاع أعلى. $ (p1 ، وثيقة) ؛
}
حسنًا ، هل تم إنجاز المهمة؟ بالطبع لا! للتنبؤ بما يحدث بعد ذلك ، يرجى الاستماع إلى الانهيار التالي.
ملاحظة: معاينة الحلقة التالية. إنه رمز التنفيذ المحدد ، وهناك بعض الأفكار والأفكار. لا أعرف ما إذا كان لديك أي شيء آخر تعرفه. إذا كان الأمر كذلك ، الرجاء الرد أدناه. شكرا لك أولا.