Xiao A является фронтальным инженером определенной предпринимательской команды, ответственной за написание проекта JavaScript программ.
Глобальный переменный конфликт
Согласно его собственному опыту, Сяо впервые извлекла некоторые обычно используемые функции, написал их в функции и поместил их в общедоступную базу.
Кода -копия выглядит следующим образом:
var _ = {
$: function (id) {return document.getElementById (id); },
getCookie: function (key) {...},
setCookie: function (key, value) {...}
};
Xiao A помещает эти функции в объект _, чтобы предотвратить возникновение слишком многих глобальных переменных. Он сказал остальной части команды, что если кто -то хочет использовать эти функции, просто представьте Base.js.
Сяо С - коллега Сяо А. Он сказал Xiao A: Его страница представила библиотеку классов под названием Underscore.js, и эта библиотека классов также займет эту глобальную переменную, которая будет противоречить «base.js». Сяо мысль о себе, что подчеркивается. JS является сторонней библиотекой, и, вероятно, ее трудно изменить, но Base.js был распространен на многих страницах, и его невозможно изменить. В конце концов, у Xiao A не было выбора, кроме как изменить глобальную переменную, занятую Underscore.js.
В настоящее время XIAO A обнаружил, что размещение функций в пространство имен может снизить вероятность глобальных конфликтов переменных, но не решает проблему глобальных переменных конфликтов.
полагаться
С разработкой бизнеса, Xiao A написал серию функциональных библиотек и компонентов пользовательского интерфейса, таких как Tabs Component Component Component, которые требуют вызова функций в base.js и util.js.
Однажды новый коллега Сяо Д. и Сяо - это сообщил, что он цитировал вкладки на странице, но функция не была нормальной. Сяо a обнаружил проблему с первого взгляда. Оказалось, что Xiao D не знал, что Tabs.js опирались на base.js и util.js, поэтому он не добавил ссылки на эти два файла. Поэтому он сразу внес изменения:
Кода -копия выглядит следующим образом:
<script src = "tabs.js"> </script>
<script src = "base.js"> </script>
<script src = "util.js"> </script>
Однако функция все еще ненормальна. В настоящее время Сяо преподал Сяо 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 в тестовой команде сказал ему, что некоторые страницы были ненормальными. Когда Сяо А увидел это, он внезапно понял, что другие функции некоторых страниц используют функции в util.js. Он удалил ссылку на этот файл и вызвал ошибку. Чтобы убедиться, что функция была нормальной, он снова восстановил код.
Сяо снова мысль, есть ли способ изменить зависимости без изменения страницы один за другим, и не влияет на другие функции?
Модульный
Когда Сяо А делал покупки в Интернете, он случайно обнаружил новый метод модульного кодирования, который может решить все проблемы, с которыми он сталкивался ранее.
В модульном программировании каждый файл представляет собой модуль. Каждый модуль создается функцией, называемой Define. Например, после преобразования base.js в модуль, код станет таким:
Кода -копия выглядит следующим образом:
Определите (функция (требуется, экспорт, модуль) {
Экспорт. $ = function (id) {return document.getElementById (id); };
exports.getcookie = function (key) {...};
exports.setcookie = function (key, value) {...};
});
Все интерфейсы, предоставленные 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 также имеет свой собственный погрузчик.