ربما واجه العديد من الأشخاص مشكلة تحميل ملفات JS الأخرى في JavaScript ، ولكن قد لا يعرف العديد من الأصدقاء كيفية الحكم على ما إذا كان ملف JS الذي نريد تحميله قد تم تحميله. إذا لم نكمل الحمل ، فلن ننجح. تشرح هذه المقالة كيفية تحميل ملفات JS الأخرى في JS وتنفيذ وظائف رد الاتصال بعد التحميل.
يمكننا إنشاء عنصر <script> بشكل ديناميكي ثم تحميل البرنامج النصي عن طريق تغيير سمة SRC الخاصة به ، ولكن كيف نعرف أنه تم تحميل ملف البرنامج النصي؟ نظرًا لأن بعض وظائفنا تحتاج إلى تنفيذها بعد تحميل البرنامج النصي وتنفيذها.
بعد البحث عن موارد على الشبكة ، وجدت أنه في متصفح IE ، يمكنك استخدام onReadyStateChange لعنصر <script> لمراقبة التغيير في حالة التحميل ، وتحديد ما إذا كان يتم تحميل البرنامج النصي أو إكماله عن طريق الحكم على ما إذا كان يتم تحميل readystate أو إكماله. بدلاً من متصفحات IE ، يمكنك استخدام OnLoad لتحديد ما إذا كان يتم تحميل البرنامج النصي مباشرة.
تبدو عملية التنفيذ البسيطة هكذا:
// ie under: var script = document.createElement ("script") ؛ script.setAttribute ("type" ، "text/javaScript") ؛ script.OnReadyStateChange = function () {if (this.readyState == "loaded" || this. readystate == "complete") }} script.setattribute ("src" ، البرامج النصية [i]) ؛ // opera ، ff ، etc. بنجاح! ") ؛} script.setAttribute (" src "، البرامج النصية [i]) ؛المبدأ بسيط للغاية. استنادًا إلى هذين المبدأين البسيطين ، قمنا ببعض التعديلات ، وقمنا بتغييرها إلى وظيفتين ، وهما التحميل التسلسلي والبرامج النصية للتحميل المتوازي.
عند تمرير صفيف يحتوي على مسارات ملف JS متعددة ، تبدأ وظيفة التحميل التسلسلي من تحميل ملف البرنامج النصي الأول. في كل مرة يتم تحميل واحد بنجاح ، سيتم تحميل ملف البرنامج النصي التالي. بعد اكتمال كل التحميل ، سيتم تنفيذ وظيفة رد الاتصال. التحميل الموازي هو تحميل جميع ملفات البرنامج النصي من البداية ، أي أنها تبدأ من نفس النقطة ، وعند اكتمال كل التحميل ، يتم تنفيذ وظيفة رد الاتصال.
بعد الاختبار ، تتوافق هاتان وظيفتان مع جميع المتصفحات الرئيسية الحالية.
/**** concatenate تحميل للنص النصي المحدد* التحميل المسلس [غير متزامن] تحميل واحد تلو الآخر ، يتم الانتهاء من تحميل ، وتوصيل التالي* بعد الانتهاء من التحميل ، يتم تنفيذ رد الاتصال* @parram argrats arcipts arcipts) {if (typeof (scripts)! = "Object") var scripts = [scripts] ؛ var head = document.getElementsByTagName ("head"). البند (0) || document.documentElement ؛ var s = new array () ، last = scripts.length - 1 ، recursiveload = function (i) {// recursives s [i] = document.createElement ("script") ؛ s [i] .SetAttribute ("type" ، "text/javaScript") ؛ s [i] .onload = s [i] .OnReadyStateChange = function () {// إرفاق معالجات لجميع المتصفحات إذا (!/*@cc_on!@*/0 || this.readyState == "loaded" || this.readyState == "complete") this.parentnode.removechild (هذا) ؛ إذا (i! = last) recursiveload (i + 1) ؛ آخر إذا (typeof (رد الاتصال) == "وظيفة") رد الاتصال () ؛ }} s [i] .setattribute ("src" ، scripts [i]) ؛ head.appendchild (s [i]) ؛ } ؛ recursiveload (0) ؛} /*** قم بتحميل البرنامج النصي المحدد بالتوازي* التحميل بالتوازي [متزامن] في نفس الوقت ، بغض النظر عما إذا كان التحميل السابق قد اكتمل أم لا ، قم بتحميل جميعها مباشرة* قم بتنفيذ رد الاتصال بعد الانتهاء من جميع التحميل* param array | سلسلة البرامج النصية المحددة* param وظيفة الاتصال بعد النجاح paralleloadscripts (البرامج النصية ، رد الاتصال) {if (typeof (scripts)! = "Object") var scripts = [scripts] ؛ var head = document.getElementsByTagName ("head"). البند (0) || document.documentElement ، s = new array () ، loaded = 0 ؛ لـ (var i = 0 ؛ i <scripts.length ؛ i ++) {s [i] = document.createElement ("script") ؛ s [i] .SetAttribute ("type" ، "text/javaScript") ؛ s [i] .Onload = s [i] .OnReadyStateChange = function () {// إرفاق معالجات لجميع المتصفحات إذا (!/*@cc_on!@*/0 || this.readyState == "loaded" || this.readyState == "complete") {loaded ++ ؛ this.OnReadyStateChange = null ؛ this.parentnode.removechild (هذا) ؛ if (loaded == scripts.length && typeof (callback) == "function") callback () ؛ }} ؛ s [i] .SetAttribute ("src" ، البرامج النصية [i]) ؛ head.appendchild (s [i]) ؛ }}هنا ، يتم إدخال علامة <script> ديناميكيًا في علامة <Head> في الصفحة ، وسيتم إزالة عنصر العلامة تلقائيًا بعد التحميل.
إذا كنت حريصًا ، فستجد أيضًا أن هناك طريقة تسمى التجميع الشرطي هنا كتعبير (!/*@cc_on!@*/0) لتحديد ما إذا كان ليس متصفح IE. التجميع الشرطي ليس محور هذه المقالة. إذا كنت مهتمًا ، يمكنك البحث عن المواد ذات الصلة للتعلم.
كيفية استخدام هاتين وظيفتين: هنا نعلن أن متغير صفيف يحتوي على عناوين ملف JS عن بعد (بالطبع ، يدعم البرنامج النصي للمكالمة <script> المجال المتقاطع):
var scripts = ["http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" ، "http://wellstyled.com/files/jquery.debug/jquery.debug.js rid ؛ و jQuery Debug Plugin // ثم يمكنك استخدام الطريقة التالية للاتصال وتنفيذ رد الاتصال بعد النجاح. seriesloadscripts (البرامج النصية ، الدالة () { / * debug = new $ .debug ({posto: {x: 'right' ، y: 'bottom'} ، width: '480px' ، height: '50 ٪ '، itemDivider:' <hr> '، listdom:' all '}) ؛يتم استخدام الوظيفة المحملة في السلسلة هنا. بالطبع ، يمكنك أيضًا استخدام وظائف التحميل المتوازية. يمكن استخدام هذا وفقًا للوضع. من المستحسن أن يكون لكل برنامج نصي التالي الاعتماد على البرنامج النصي السابق لاستخدام التحميل التسلسلي ، وإلا استخدم اتصال متوازي ، لأن الاتصال المتوازي أسرع من الاتصال التسلسلي.
ما سبق هو كل محتوى هذه المقالة. آمل أن يكون ذلك مفيدًا لتعلم الجميع وآمل أن يدعم الجميع wulin.com أكثر.