Xiao A هو مهندس واجهة لفريق ريادة الأعمال ، مسؤول عن كتابة برامج JavaScript Project.
الصراع المتغير العالمي
وفقًا لتجربته الخاصة ، قام Xiao أولاً باستخراج بعض الوظائف الشائعة الاستخدام وكتبها في وظائف ووضعها في قاعدة ملفات عامة.
نسخة الكود كما يلي:
var _ = {
$: function (id) {return document.getElementById (id) ؛ } ،
GetCoookie: Function (Key) {...} ،
setCookie: Function (مفتاح ، قيمة) {...}
} ؛
يضع Xiao A هذه الوظائف في الكائن _ لمنع الكثير من المتغيرات العالمية من التسبب في تعارضات. أخبر بقية الفريق أنه إذا أراد أي شخص استخدام هذه الوظائف ، فما عليك سوى تقديم BASE.JS.
Xiao C هو زميل Xiao A. وقال لـ Xiao A: قدمت صفحته مكتبة الفصل تسمى insroscore.js ، وستشغل هذه المكتبة الفئة هذا المتغير العالمي ، والذي سيتعارض مع "base.js". Xiao فكر لنفسه أن INTERSCORE.JS هي مكتبة طرف ثالث وربما يكون من الصعب تعديلها ، ولكن تم نشر BASE.JS على العديد من الصفحات ومن المستحيل تعديلها. في النهاية ، لم يكن لدى Xiao A خيار سوى تغيير المتغير العالمي الذي تشغله.
في هذا الوقت ، وجد Xiao أن وضع وظائف في مساحة الاسم يمكن أن يقلل من احتمال تعارضات متغير عالمي ، لكنه لا يحل مشكلة النزاعات المتغيرة العالمية.
يعتمد
من خلال تطوير الأعمال ، كتبت Xiao A سلسلة من مكتبات الوظائف ومكونات واجهة المستخدم ، مثل TAB Component Component Tabs.js ، والتي تتطلب وظائف الاتصال في base.js و util.js.
في يوم من الأيام ، ذكر الزميل الجديد Xiao D و Xiao أنه أنه نقل عن Tabs.js على الصفحة ، لكن الوظيفة لم تكن طبيعية. وجد شياو المشكلة في لمحة. اتضح أن Xiao D لم يكن يعلم أن Tabs.js اعتمدت على base.js و util.js ، لذلك لم يضيف إشارات إلى هذين الملفين. لذلك قام على الفور بإجراء تغييرات:
نسخة الكود كما يلي:
<script src = "tabs.js"> </script>
<script src = "base.js"> </script>
<script src = "util.js"> </script>
ومع ذلك ، فإن الوظيفة لا تزال غير طبيعية. في هذا الوقت ، قام Xiao بتدريس Xiao D درسًا: "قال الجميع إنها تبعية ، لذلك يجب وضع الطرف التابع أمام الطرف التابع". اتضح أن Xiao D وضع base.js و util.js بعد tabs.js.
شياو فكر لنفسه أنه المؤلف ويعرف بطبيعة الحال اعتماد المكونات ، لكن من الصعب على الآخرين أن يقولوا ، وخاصة القادمين الجدد.
بعد فترة من الوقت ، Xiao تعمل وظائف إضافية إلى مكون تبديل العلامة. من أجل تنفيذ هذه الوظيفة ، يحتاج Tabs.js أيضًا إلى استدعاء وظائف في UI.JS. في هذا الوقت ، اكتشف شياو مشكلة خطيرة. كان بحاجة إلى إضافة مراجع ui.js إلى جميع الصفحات التي تسمى tabs.js! ! !
بعد فترة من الوقت ، لم يعد Xiao Tabs.js محسّن ، ولم يعد هذا المكون يعتمد على util.js ، لذلك قام بإزالة الإشارات إلى util.js من جميع الصفحات التي تستخدم tabs.js لتحسين الأداء. حدث شيء كبير له عندما قام بالتعديل. أخبره MM في فريق الاختبار أن بعض الصفحات غير طبيعية. عندما رأى Xiao A ، أدرك فجأة أن الوظائف الأخرى لبعض الصفحات تستخدم وظائف في Util.js. أزال الإشارة إلى هذا الملف وتسبب في خطأ. من أجل ضمان أن تكون الوظيفة طبيعية ، قام بترميم الكود مرة أخرى.
شياو فكرة مرة أخرى ، هل هناك طريقة لتعديل التبعيات دون تعديل الصفحة الأولى تلو الأخرى ، ولا تؤثر على الوظائف الأخرى؟
وحدات
عندما كان Xiao A يتسوق في الإنترنت ، اكتشف بطريق الخطأ طريقة ترميز معيارية جديدة يمكنها حل جميع المشكلات التي واجهتها من قبل.
في البرمجة المعيارية ، كل ملف هو وحدة نمطية. يتم إنشاء كل وحدة بواسطة دالة تسمى DEFINE. على سبيل المثال ، بعد تحويل base.js إلى وحدة نمطية ، سيصبح الرمز هكذا:
نسخة الكود كما يلي:
تعريف (الوظيفة (تتطلب ، الصادرات ، الوحدة) {
الصادرات. $ = function (id) {return document.getElementById (id) ؛ } ؛
exports.getCoOkie = function (key) {...} ؛
exports.setCoOkie = function (مفتاح ، قيمة) {...} ؛
}) ؛
تتم إضافة جميع الواجهات التي توفرها base.js إلى كائن الصادرات. الصادرات هو متغير محلي ، ولا يشغل رمز الوحدة بأكمله نصف المتغير العالمي.
فكيف تتصل بالواجهة التي توفرها وحدة معينة؟ خذ tabs.js كمثال ، يعتمد ذلك على base.js و util.js:
نسخة الكود كما يلي:
تعريف (الوظيفة (تتطلب ، الصادرات ، الوحدة) {
var _ = require ('base.js') ، util = require ('util.js') ؛
var div_tabs = _. $ ('tabs') ؛
// .... رموز أخرى
}) ؛
يمكن للوحدة الحصول على واجهات الوحدات الأخرى من خلال الوظيفة المحلية التي تتطلبها. في هذا الوقت ، فإن المتغيرات _ و util هما متغيران محليان ، ويتم التحكم في الاسم المتغير بالكامل بواسطة المطور. إذا كنت لا تحب _ ، يمكنك أيضًا استخدام قاعدة:
نسخة الكود كما يلي:
تعريف (الوظيفة (تتطلب ، الصادرات ، الوحدة) {
var base = require ('base.js') ، util = require ('util.js') ؛
var div_tabs = base. $ ('tabs') ؛
// .... رموز أخرى
}) ؛
بمجرد أن ترغب في إزالة util.js وإضافة ui.js ، ما عليك سوى تعديل tabs.js:
نسخة الكود كما يلي:
تعريف (الوظيفة (تتطلب ، الصادرات ، الوحدة) {
var base = require ('base.js') ، ui = require ('ui.js') ؛
var div_tabs = base. $ ('tabs') ؛
// .... رموز أخرى
}) ؛
اللودر
نظرًا لعدم وجود دعم للمتصفح الأصلي ، إذا أردنا الترميز بطريقة معيارية ، فيجب علينا الاعتماد على شيء يسمى المحمل.
حاليًا ، هناك العديد من تطبيقات اللوادر ، مثل require.js و seajs. مكتبة فئة Jraiser لديها أيضا محملها الخاصة.