Предисловие
SEAJS - это структура загрузки модуля JavaScript, которая следует за спецификацией CommonJS, которая может реализовать механизм модульной разработки и загрузки JavaScript. В отличие от JavaScript Frameworks, таких как jQuery, SeaJS не расширяет функции языка инкапсуляции, а только реализует модуляризацию и нагрузку с помощью модуля. Основная цель SeaJS-сделать модульную и счастливую загрузку JavaScript модульную и счастливую загрузку, свободные фронт-инженеры из обработки File File File JavaScript и объектов, и могут сосредоточиться на логике самого кода. SeaJS может быть идеально интегрирована с такими рамками, как JQuery. Использование SEAJS может улучшить читабельность и ясность кода JavaScript, решить проблемы путаницы зависимости и запутывания кода, которые распространены в программировании JavaScript, и облегчают написание и обслуживание кода.
Автор Seajs-Yu Bo, инженер Taobao Front-End.
Сам Seajs следует за поцелуем (сохраняйте его простую, глупую) для развития. В процессе изучения Seajs вы можете почувствовать суть принципа поцелуя повсюду - делать только одно и делать одно хорошо.
В этой статье сначала используется пример для интуитивного сравнения традиционного программирования JavaScript и модульного программирования JavaScript с использованием SEAJS, а затем подробно обсуждает использование SEAJ и, наконец, дает некоторую информацию, связанную с SEAJ.
Традиционный режим против модульности Seajs
Предположим, что теперь мы разрабатываем веб -приложение TinyApp, и мы решили использовать Framework JQuery в TinyApp. Домашняя страница TinyApp будет использовать module1.js, которая зависит от модуля2.js и module3.js и module3.js.
Традиционное развитие
Используя традиционные методы разработки, код каждого файла JS выглядит следующим образом:
Скопируйте код следующим образом: //module1.js
var module1 = {
run: function () {
return $ .merge (['module1'], $ .merge (module2.run (), module3.run ()));
}
}
//module2.js
var module2 = {
run: function () {
return ['module2'];
}
}
//module3.js
var module3 = {
run: function () {
return $ .merge (['module3'], module4.run ());
}
}
//module4.js
var module4 = {
run: function () {
return ['module4'];
}
}
В настоящее время index.html должен ссылаться на Module1.js и все его лежащие в основе зависимости (обратите внимание на заказ):
Скопируйте код следующим образом: <! Doctype html>
<html lang = "zh-cn">
<голова>
<meta charset = "utf-8">
<title> tinyapp </title>
<script src = "./ jQuery-min.js"> </script>
<script src = "./ module4.js"> </script>
<script src = "./ module2.js"> </script>
<script src = "./ module3.js"> </script>
<script src = "./ module1.js"> </script>
</head>
<тело>
<p> </p>
<Скрипт>
$ ('. Content'). html (module1.run ());
</script>
</body>
</html>
По мере развития проекта будет все больше и больше файлов JS, и зависимости станет все более и более сложным, что затрудняет сохранение кода JS и списков сценариев в HTML.
Модульное развитие SEAJS
Давайте посмотрим, как реализовать одну и ту же функциональность с помощью SEAJ.
Сначала index.html:
Скопируйте код следующим образом: <! Doctype html>
<html lang = "zh-cn">
<голова>
<meta charset = "utf-8">
<title> tinyapp </title>
</head>
<тело>
<p> </p>
<script src = "./ sea.js"> </script>
<Скрипт>
seajs.use ('./ init', function (init) {
init.InitPage ();
});
</script>
</body>
</html>
Вы можете видеть, что HTML -страница больше не нужно вводить все файлы JS, но представляет только SEA.JS. При рендеринге страницы также могут быть загружены по мере необходимости (ответ JS загружается только при использовании).
index.html загружает модуль init и использует метод инициализации этого модуля для инициализации данных страницы.
Давайте посмотрим на следующее модульное написание JavaScript:
Скопируйте код следующим образом: //jquery.js
Определите (функция (требуется, экспорт, модуль) = {
// оригинальный код jQuery.js ...
module.exports = $ .noconflict (true);
});
//init.js
Определите (функция (требуется, экспорт, модуль) = {
var $ = require ('jquery');
var m1 = require ('module1');
exports.initpage = function () {
$ ('. Content'). html (m1.run ());
}
});
//module1.js
Определите (функция (требуется, экспорт, модуль) = {
var $ = require ('jquery');
var m2 = require ('module2');
var m3 = require ('module3');
exports.run = function () {
return $ .merge (['module1'], $ .merge (m2.run (), m3.run ()));
}
});
//module2.js
Определите (функция (требуется, экспорт, модуль) = {
exports.run = function () {
return ['module2'];
}
});
//module3.js
Определите (функция (требуется, экспорт, модуль) = {
var $ = require ('jquery');
var m4 = require ('module4');
exports.run = function () {
return $ .merge (['module3'], m4.run ());
}
});
//module4.js
Определите (функция (требуется, экспорт, модуль) = {
exports.run = function () {
return ['module4'];
}
});
На первый взгляд, код кажется более сложным, потому что этот пример слишком прост. Однако из этого мы все еще можем увидеть некоторые особенности Seajs:
Во -первых, HTML -странице не нужно поддерживать длинный список тегов сценариев, просто представьте Sea.js.
Во -вторых, код JS организован как модули.
В этом примере друзья должны иметь интуитивное впечатление о SeaJ.