Скачать и установить
Чтобы использовать Seajs в вашем проекте, все, что вам нужно сделать, это загрузить SEA.JS и поместить его где -нибудь в свой проект.
Проект SeaJS в настоящее время размещен на GitHub, а на главной странице по адресу https://github.com/seajs/seajs/. Вы можете скачать SEA.JS (сжатый) или SEA-DEBUG.JS (несжатый) в каталоге сборки библиотеки GIT.
После того, как загрузка будет завершена, поместите его в соответствующую позицию проекта, а затем представьте его через тег <croppl> на странице, и вы можете использовать Seajs.
Основные принципы развития SEAJS
Прежде чем обсудить конкретное использование SEAJS, давайте сначала представим модульную концепцию и принципы развития SEAJS.
Основной принцип использования SEAJS для разработки JavaScript: все является модулем. После того, как SEAJS был введен, написание кода JavaScript стала писать один модуль за другим. Общественные данные и методы могут быть вызваны другими модулями.
Кроме того, каждый модуль должен быть определен в отдельном файле JS, то есть один, соответствующий одному модулю.
Следующее описывает написание и призыв модулей.
Определение и написание модулей
Функция определения модуля определяет
В Seajs используйте функцию «определить» для определения модуля. Поскольку документация SEAJS не имеет полной ссылки для определения, я прочитал исходный код SeaJS и обнаружил, что определение может получить три параметра:
Скопируйте код следующим образом:/**
* Определяет модуль.
* @param {string =} id идентификатор модуля.
* @param {array. | string =} deps зависимости модуля.
* @param {function () | Object} Фабрика заводской функции модуля.
*/
fn.define = function (id, deps, factory) {
// код функции…
}
Выше приведено из исходного кода SEAJS. После прочтения исходного кода я обнаружил, что правила анализа по количеству различных параметров определения следующие:
Если есть только один параметр, затем назначьте значение фабрике.
Если есть два параметра, второй назначен на завод;
Если есть три параметра, они присваиваются ID, DEPS и Factory соответственно.
Тем не менее, почти все места, где определяются, в том числе официальный пример Seajs, пропускается только одна фабричная функция, аналогично следующему коду:
Кода -копия выглядит следующим образом:
Определите (функция (требуется, экспорт, модуль) {
// код модуля ...
});
Я лично рекомендую вам следовать стандартам официальных примеров Seajs и определить модуль с определением параметров. Так что же будет сделано с ID и DEPS?
Идентификатор - это идентификационная строка модуля. Если вы используете определение для определения модуля в файле A.JS под примером. идентификатор DEPS, как правило, не нужно передавать, и необходимые модули могут быть загружены с требованиями.
Фабрика фабрика фабрика
Заводские функции являются основным корпусом и фокусом модуля. Когда только один параметр передается (рекомендуется написание), этот параметр является заводской функцией.
1. Функция загрузки модуля-модуля, используемая для записи зависимых модулей.
2. Точка Exports-Interface, при определении данных или методе, предоставляет их внешним вызовам.
3. Модуль-метаданные модуля.
Эти три параметра могут быть выбраны по мере необходимости для отображения спецификации.
Давайте поговорим о модуле ниже. Модуль - это объект, который хранит мета -информацию модуля следующим образом:
1.module.id - идентификатор модуля.
2.module.Pevendenties - массив, который хранит список идентификации всех модулей, от которых зависит этот модуль.
3.module.exports-Покачивает на тот же объект, что и экспорт.
Три режима для написания модулей
Первым режимом для определения модулей является режим на основе экспорта:
Кода -копия выглядит следующим образом:
Определите (функция (требуется, экспорт, модуль) {
var a = require ('a');
var b = require ('b');
VAR DATA1 = 1; // частные данные
var func1 = function () {// частный метод
вернуть a.run (data1);
}
Exports.data2 = 2; // Общественные данные
exports.func2 = function () {// public Method
вернуть 'Привет';
}
});
Выше приведено относительно «подлинная» модель модуля. В дополнение к добавлению публичных данных и методов экспорта, вы также можете напрямую вернуть объект для представления модуля, например, следующая кода, имеет такую же функцию, что и вышеуказанный код:
Скопируйте код следующим образом: define (function (require) {
var a = require ('a');
var b = require ('b');
VAR DATA1 = 1; // частные данные
var func1 = function () {// частный метод
вернуть a.run (data1);
}
возвращаться {
Data2: 2,
func2: function () {
вернуть 'Привет';
}
};
});
Если определение модуля не имеет другого кода и возвращает только один объект, можно найти следующий упрощенный метод написания:
Скопируйте код следующим образом: определить ({
Данные: 1,
func: function () {
вернуть 'Привет';
}
});
Третий метод очень подходит для модулей, которые определяют чистые данные JSON.
Загрузка и ссылка на модули
Алгоритм обращения к модулю
Как упоминалось выше, модуль соответствует файлу JS. где находится фактический модуль. Seajs поддерживает следующие идентификаторы:
Абсолютный адрес - дает абсолютный путь к файлу JS.
нравиться:
Кода кода следующая: require ("http: // Пример/js/a");
Это означает загрузку http: //example/js/a.js.
Относительный адрес - используйте относительные вызовы, чтобы найти модуль, чтобы найти относительный адрес файла JS, где находится функция загрузки.
Например, загрузите его в http: //example/js/b.js
Кода -код выглядит следующим образом: require ("./ c");
Затем загрузите http: //example/js/c.js.
Базовый адрес - Если идентификатор загрузки строки не является ни абсолютным путем, ни начинается с «./», он рассматривается по сравнению с «базой» в глобальной конфигурации SEAJ.
Обратите внимание, что при загрузке модулей выше вам не нужно передавать название суффикса ".js", а Seajs автоматически добавляет ".js". Но следующие три случая не будут добавлены:
При загрузке CSS, например:
Кода кода выглядит следующим образом: require ("./ module1-tyle.css");
Когда путь содержит "?", Например:
Кода кода выглядит следующим образом: require (<a href = "http: //example/js/a.json? Cb = func"> http: //example/js/a.json? Cb = func </a> );
Когда путь заканчивается "#", например:
Кода кода выглядит следующим образом: require ("http: //example/js/a.json#");
Согласно различным сценариям применения, SeaJS предоставляет три API для погрузочных модулей, а именно Seajs.use, Tress and Tear.Async, которые представлены ниже.
Seajs.use
Seajs.use в основном используется для загрузки модуля входа. Модуль входа эквивалентен основной функции программы C, а также является корнем всего дерева зависимостей модуля. В примере TinyApp выше, init является модулем входа. Использование Seajs.use выглядит следующим образом:
Кода -копия выглядит следующим образом:
// Одиночный режим
seajs.use ('./ a');
// режим обратного вызова
seajs.use ('./ a', function (a) {
a.run ();
});
// Многомодульный режим
seajs.use (['./ a', './b'], function (a, b) {
a.run ();
b.run ();
});
Как правило, Seajs.use используется только для загрузки модуля входа на странице. Если есть только один модуль входа, вы также можете опустить Seajs.us Следующий метод написания:
Кода -копия выглядит следующим образом:
<! Doctype html>
<html lang = "zh-cn">
<голова>
<meta charset = "utf-8">
<title> tinyapp </title>
</head>
<тело>
<p> </p>
<script src = "./ sea.js" data-main = "./ init"> </script>
</body>
</html>
Этот способ написания сделает HTML более кратким.
требовать
Требование является основным методом загрузки SEAJ.
Кода кода следующим образом: var m = require ('/path/to/module/file');
Вот краткое введение в механизм автоматического нагрузки SeaJ. Как упомянуто выше, после использования SeaJS просто включите Sea.js. Так как же загружаются другие файлы JS? SeaJS сначала загрузит модуль входа, затем использует регулярные выражения, чтобы соответствовать всем требованиям в коде вдоль модуля входа, а затем загрузите соответствующий файл JS в соответствии с идентификацией пути файла в требованиях, а затем итерация загруженного файла JS. Весь процесс аналогичен операции траверса графика (поскольку может быть поперечная зависимость, вся структура данных зависимости-это график, а не дерево).
Как только вы поймете приведенный выше момент, следующие правила будут легко понять:
Идентификатор пути, пройденное требованием, должен быть буквальным, а не выражением.
Кода кода следующая: require ('module' + '1');
require ('module'.tolowercase ());
Это заставит Seajs не выполнить правильные обычные совпадения, чтобы загрузить соответствующий файл JS.
require.async
Как упомянуто выше, SeaJS будет записывать все необходимые файлы JS сразу через статический анализ, когда открыта HTML -страница.
Скопировать код следующим образом: require.async ('/path/to/module/file', function (m) {
// код обратного вызова ...
});
Таким образом, только при использовании этого модуля будет загружен соответствующий файл JS, который осознает загрузку кода JavaScript.
Глобальная конфигурация SEAJS
Seajs предоставляет метод Seajs.config, который может настроить глобальную конфигурацию и получить объект конфигурации, представляющий глобальную конфигурацию. Конкретный метод использования следующим образом:
Скопируйте код следующим образом: seajs.config ({
База: 'PATH/TO/JSLIB/',
псевдоним: {
'App': 'path/to/app/'
},
Charset: 'UTF-8',
Тайм -аут: 20000,
отладка: ложь
});
Где база представляет базовый путь адреса во время адресации базового. Например, база установлен на http://example.com/js/3-party/, затем:
Кода кода выглядит следующим образом: var $ = require ('jQuery');
http://example.com/js/3-party/jquery.js будет загружен.
Псевдоним может установить аббревиатуру для более длительных общих путей.
Charset представляет атрибут Charset тега скрипта при загрузке JS.
Тайм -аут указывает на максимальное время для загрузки файла в миллисекундах.
Отладка указывает, работает ли он в режиме отладки.
Как работает Seajs с существующими библиотеками JS
Чтобы использовать существующую библиотеку JS, такую как jQuery, с Seajs, просто инкапсулирует существующую библиотеку в соответствии с правилами определения модуля Seajs. Например, ниже приведен метод инкапсуляции для jQuery:
Скопируйте код следующим образом: define (function () {
// {{{{jQuery оригинальный код запускается
/**
* jQuery JavaScript Library v1.6.1
* http://jquery.com/
*
* Copyright 2011, Джон Ресиг
* Двойная лицензия по лицензиям MIT или GPL версии 2.
* http://jquery.org/license
*
* Включает Sizzle.js
* http://sizzlejs.com/
* Copyright 2011, Dojo Foundation
* Выпущено под лицензией MIT, BSD и GPL.
*
* Дата: Чт 12 мая 15:04:36 2011 -0400
*/
// ...
//}}} jQuery Оригинальный код заканчивается
return $ .noconflict ();
});
Упаковка и развертывание проекта SEAJS
Seajs первоначально интегрировал упакованный инструмент развертывания SM. Основная идея SPM состоит в том, чтобы объединить и сжать код всех модулей, а затем объединить его в модуль входа. Полем Однако, поскольку SPM не была выпущена для официальной версии, эта статья не намеревается представить ее подробно.
Фактически, поскольку инструменты слияния и сжатия JS, используемые для каждого проекта, различны, SPM может быть не полностью подходит для каждого проекта. После понимания принципов SeaJS вы можете написать сценарий слияния и упаковки, который соответствует характеристикам вашего проекта.