تحميل وظائف JS ديناميكي
بشكل عام ، عندما نحتاج إلى تحميل ملف JS ، سنستخدم علامات البرنامج النصي لتنفيذها ، على غرار الكود التالي:
نسخة الكود كما يلي:
<script type = "text/javaScript" src = "example.js"> </script>
ومع ذلك ، فإن استخدام علامات البرنامج النصي لتحميل ملفات JS مباشرة له العيوب التالية:
1. أمر القراءة الصارم. نظرًا لأن المتصفح يقرأ ملفات JavaScript بالترتيب الذي يظهر فيه <script> في صفحة الويب ثم يقوم بتشغيلها على الفور ، عندما تعتمد ملفات متعددة على بعضها البعض ، يجب وضع الملف الذي يحمل أقل اعتماد في المقدمة ، ويجب وضع الملف الذي يحتوي على معظم التبعية في النهاية ، وإلا فإن الكود سيبلغ عن خطأ.
2. قضايا الأداء. يستخدم المتصفح "الوضع المتزامن" لتحميل علامة <script> ، أي أن الصفحة ستكون "حظر" ، في انتظار تحميل ملف JavaScript ، ثم تشغيل رمز HTML اللاحق. عند وجود علامات متعددة <script> ، لا يمكن للمتصفح قراءة في نفس الوقت. يجب قراءة المرء قبل قراءة الآخر ، مما يؤدي إلى امتداد كبير لوقت القراءة واستجابة الصفحة بطيئة.
في هذا الوقت ، سوف نفكر في تحميل JS بشكل ديناميكي. تشبه طريقة تنفيذ تحميل JS ديناميكيًا الرمز التالي
نسخة الكود كما يلي:
/*
*@DESC: إضافة نصي ديناميكيًا
*@param src: عنوان ملف JS المحمّل
*@Param Callback: وظيفة رد الاتصال التي يجب استدعاؤها بعد تحميل ملف JS
*@Demo:
adddynamicstyle ('http://webresource.c-ctrip.com/code/cquery/labjs/lab.js' ، function () {
تنبيه ('lab.js على تحميل خادم CTRIP اكتمل ")
}) ؛
*/
وظيفة adddynamicjs (SRC ، رد الاتصال) {
var script = document.createElement ("script") ؛
script.setattribute ("type" ، "text/javaScript") ؛
script.src = src [i] ؛
script.charset = 'gb2312' ؛
document.body.appendchild (script) ؛
إذا (رد الاتصال! = غير محدد) {
script.onload = function () {
أتصل مرة أخرى()؛
}
}
}
لن يتسبب هذا في انسداد الصفحة ، ولكنه سيؤدي إلى مشكلة أخرى: ملف JavaScript الذي تم تحميله بهذه الطريقة ليس في بنية DOM الأصلية ، وبالتالي فإن وظيفة رد الاتصال المحددة في حدث DOMCONTENTED) وحدث Window.onload غير صالح له.
في هذا الوقت ، سوف نفكر في استخدام بعض مكتبات الوظائف الخارجية لإدارة مشاكل تحميل JS بشكل فعال.
دعنا نذهب إلى الموضوع الرئيسي ونتحدث عن lab.js
LAB.JS
إذا استخدمنا الطرق التقليدية لتحميل JS ، فسيكون الرمز الذي نكتبه بشكل عام هو النمط الموضح في الكود التالي.
نسخة الكود كما يلي:
<script src = "aaa.js"> </script>
<script src = "bbb-a.js"> </script>
<script src = "bbb-b.js"> </script>
<script type = "text/javaScript">
initaaa () ؛
initBBB () ؛
</script>
<script src = "ccc.js"> </script>
<script type = "text/javaScript">
initCCC () ؛
</script>
إذا استخدمنا lab.js ، لتنفيذ وظيفة الكود أعلاه ، فإننا نستخدم الطريقة التالية
نسخة الكود كما يلي:
<!-تحميل مكتبة LAB.JS أولاً->
<script src = "http://webresource.c-ctrip.com/code/cquery/labjs/lab.js"> </script>
<script type = "text/javaScript">
$ lab
.script ("aaa.js"). انتظر () // طريقة .wait () بدون معلمات تعني تشغيل ملف javaScript تم تحميله على الفور للتو
.script ("BBB-A.JS")
.script ("BBB-B.JS") // تحميل AAA.JS BBB-A.JS
.Wait (function () {// طريقة .wait () مع المعلمات أيضًا تعمل على الفور على تشغيل ملف JavaScript الذي تم تحميله الآن ، ولكنه يعمل أيضًا على تشغيل الوظيفة المحددة في المعلمات.
initaaa () ؛
initBBB () ؛
})
.script ("CCC.JS") // تحميل CCC.JS وتنفيذ طريقة initCCC بعد تحميل CCC.JS
.wait (function () {
initCCC () ؛
}) ؛
</script>
يمكن تشغيل سلاسل مختبر متعددة $ في نفس الوقت ، لكنها مستقلة تمامًا ولا توجد علاقة ترتيب. إذا كنت ترغب في التأكد من تشغيل ملف JavaScript بعد ملف آخر ، فيمكنك كتابتها فقط في نفس عملية السلسلة. فقط عندما تكون بعض البرامج النصية غير ذات صلة تمامًا ، يجب أن تفكر في تقسيمها إلى سلاسل مختبر مختلفة ، مما يشير إلى عدم وجود علاقة بينهما.
أمثلة الاستخدام العام
نسخة الكود كما يلي:
$ lab
.script ("script1.js") // script1 و script2 و script3 لا يعتمدون على بعضها البعض ويمكن تنفيذها بأي ترتيب
.script ("script2.js")
.script ("script3.js")
.wait (function () {
تنبيه ("يتم تحميل البرامج النصية 1-3!") ؛
})
.script ("script4.js") // يجب أن تنتظر script1.js ، script2.js ، script3.js ليتم تنفيذها قبل التنفيذ
.wait (function () {script4func () ؛}) ؛
نسخة الكود كما يلي:
$ lab
.script ("script.js")
.script ({src: "script1.js" ، النوع: "Text/JavaScript"})
.script (["script1.js" ، "script2.js" ، "script3.js"])
.script (function () {
// على افتراض "_is_ie` تعريف بواسطة صفحة المضيف كما هو صحيح في IE و false في متصفحات أخرى
if (_is_ie) {
إرجاع "ie.js" ؛ // فقط إذا في IE ، سيتم تحميل هذا البرنامج النصي
}
آخر {
العودة لاغية. // إذا لم يكن في IE ، سيتم تجاهل مكالمة البرنامج النصي هذه بفعالية
}
})
عرض معلومات تحميل LAB.JS في وحدة التحكم
إذا كنت ترغب في تصحيح أو عرض كل معلومات تحميل JS على وحدة التحكم ، فيمكنك استخدام طريقة $ lab.setglobaldefaults. للحصول على التفاصيل ، يرجى الاطلاع على مثال الرمز.
نسخة الكود كما يلي:
<!-تحميل مكتبة مختبر CTRIP LAB.JS أولاً وقم بتنزيله عبر الإنترنت->
<script type = "text/javaScript" src = "http://webresource.c-ctrip.com/code/cquery/labjs/lab.js" charset = "gb2312"> </script>
<script type = "text/javaScript">
$ lab.setglobaldefaults ({debug: true}) // Open Debugging
$ lab
// سلسلة التنفيذ الأولى
.
.script ('http://cdnjs.cloudflare.com/ajax/libs/lodash.js
// سلسلة التنفيذ الثانية
.wait (function () {
//console.log(window.$)
//console.log(Window._)
})
// سلسلة التنفيذ الثالثة
.
.
// سلسلة التنفيذ الرابعة
.wait (function () {
// console.log (Plugin1Function)
// console.log (Plugin2Function)
})
// سلسلة التنفيذ الخامسة
.script ('JS/AAA.JS')
.script ('JS/BBB.JS')
// سلسلة التنفيذ السادسة
.wait (function () {
// console.log (module1function)
// console.log (module2Function)
})
</script>
في هذا الوقت ، افتح وحدة التحكم وانظر إلى المعلومات ، كما هو موضح في الشكل التالي:
أعتقد أنك ستندهش من وظيفة تصحيح الأخطاء في Lab.js عندما ترى هذا. في الواقع ، LAB.JS قوية جدًا بالفعل ، وأنا أفهم فقط بعض ميزاتها البسيطة. اكتبه أولاً وشاركه معه. إنه أيضًا لراحة نفسك في المستقبل.