SeaJS - это структура загрузки модуля, разработанная Yubo, которая следует за спецификацией CommonJS, которая может использоваться для легкости и счастливой загрузки любого модуля JavaScript и стилей модулей CSS. Seajs очень мал, потому что объем после сжатия и Gzip составляет всего 4K, а интерфейсы и методы также очень малы. Seajs имеет два ядра: определение модуля и загрузка модулей и зависимости. Seajs очень мощный. SEAJS может загрузить любой модуль JavaScript и стиль CSS -модуля. Seajs гарантирует, что при использовании модуля вы загружаете другие модули, от которых вы зависят, в среду под управлением сценария. Yu Bo сказал, что Seajs может позволить вам наслаждаться удовольствием написания кода, не беспокоясь о проблемах загрузки. Вы устали от многих ссылок JS и CSS? Я посчитал 39 ссылок на CSS и JS на домашней странице веб -сайта нашей компании. Влияние, которое он имеет, можно представить:
1. не способствует обслуживанию, передний и задней части.
2. Есть слишком много HTTP -запросов. Конечно, это может быть решено с помощью слияния, но если не существует непосредственного слияния, стоимость рабочей силы очень высока. Даже если бэкэнд объединяется и поддерживает его, такая длинная строка определенно посмотрет на нее.
Использование SeaJs может очень хорошо решить эти проблемы.
Определение модуля
Определение модуля проще. Например, определение модуля Sayhello и создание документа Sayhello.js:
Кода -копия выглядит следующим образом:
Определите (функция (требуется, экспорт, модуль) {
exports.sayhello = function (eleid, text) {
document.getElementById (eleid) .innerhtml = text;
};
});
Давайте сначала посмотрим на параметр экспорта. Параметр экспорта используется для обеспечения API модуля. То есть другие модули этого экспорта могут получить доступ к методу Sayhello.
Модуль загрузка использования
Например, на нашей странице есть элемент с идентификатором «Out», и мы хотим вывести «Hello Seajs!»,
Тогда мы можем сначала представить SEA.JS
Затем используйте модуль Sayhello:
Кода -копия выглядит следующим образом:
seajs.use ("sayhello/sayhello", function (say) {
say.sayhello ("out", "hello seajs!");
});
Здесь используется метод использования модулей:
Первым параметром является представление модуля, которое представлено относительным путем относительно SEA.js. Суффикс ".js" после Sayshello.js может быть опущен. Конечно, есть много методов для выявления этого модуля. Для получения подробной информации, пожалуйста, проверьте официальное описание: http://seajs.com/docs/zh-cn/module-idedifier.html
Первый параметр - функция обратного вызова. say.sayhello () вызывает метод экспорта. Конечно, в этой функции обратного вызовов есть параметр.
Зависимости модуля
Зависимости модуля должны существовать, когда модули определены. Например, переписывайте модуль Sayhello выше. Предположим, что у нас уже есть общий модуль DOM, такой как некоторые методы, такие как получение элементов, стилей настройки и т. Д., Такой модуль DOM, напишите Dom.js следующим образом
Кода -копия выглядит следующим образом:
Определите (функция (требуется, экспорт, модуль) {
var dom = {
/**
* Получить объект DOM через атрибут ID элемента, параметры - это строки или несколько строк
* @ID GetbyId
* @method getbyid
* @param {string} id атрибут идентификатора
* @return {htmlelement | Объект} HTMlelement с идентификатором или NULL, если его нет.
*/
GetByid: function () {
var els = [];
for (var i = 0; i <arguments.length; i ++) {
var el = аргументы [i];
if (typeof el == "string") {
el = document.getElementById (EL);
}
if (arguments.length == 1) {
вернуть Эль;
}
els.push (el);
}
вернуть Эльс;
},
/**
* Получить объект, вы можете пройти в объект или строку. Если строка передается, объект получается в форме Document.getElementById ()
* @ID получить
* @param {string} el html элемент
* @return {Object} htmLelement объект.
*/
get: function (el) {
if (el & amp; amp; & amp; amp; (el.tagname || el.item)) {
вернуть Эль;
}
вернуть это.getbyid (el);
}
};
вернуть dom;
});
Тогда модуль Sayhello может быть написан так. Чтобы не повлиять на исходную демонстрационную страницу, я установил новый модуль Sayhelloa. Мы можем написать sayhelloa.js, как это:
Кода -копия выглядит следующим образом:
Определите (функция (требуется, экспорт, модуль) {
var dom = require ("dom/dom");
требуется ("Sayhelloa/sayhello.css");
exports.sayhello = function (eleid, text) {
Dom.get (eleid) .innerhtml = text;
};
});
Функция потребности используется для установления зависимостей модуля. Например, приведенный выше модуль Sayhelloa зависит от модуля DOM, поскольку используется метод GET модуля DOM.
Обратите внимание, что var dom = require ("dom/dom") Здесь это предложение присваивает применяемый модуль DOM для DOM; Требуется ("sayhelloa/sayhello.css") напрямую применяет модуль или файл sayhello.css css. Это будет относиться к файлу CSS на странице.
В последние дни я сталкивался с Seajs. Чем больше я с этим доставляю проблемы, тем больше мне нравится. Спасибо, Yu Bo! Спасибо Seajs! Конечно, вы можете подумать, что нет необходимости делать это с таким простым примером. Действительно, если небольшие проекты с меньшим количеством файлов JS чувствуют себя хорошо в отношении модульных преимуществ, но более модульные преимущества отражаются в количестве файлов JS или средних или выше проектов.