Полный пример
Я так много сказал выше, и точки знаний относительно разбросаны, поэтому в конце концов я планирую использовать полный пример SeaJS, чтобы объединить эти знания, чтобы ваши друзья могли обобщать и рассмотреть. Этот пример содержит следующие файлы:
1.index.html - главная страница.
2.sea.js-seajs сценарий.
3.Init.js-модуль, модуль входа, полагаясь на данные, jQuery и стиль. Загружен с главной страницы.
4. Data.js-Data Модуль, модуль данных Pure JSON, загруженный init.
5.jquery.js-JQuery Module, Модульная инкапсуляция библиотеки JQUERY, загруженная init.
6.Style.css-CSS-лист стиля, загруженный init как модуль стиля.
7. Коды SEA.JS и jQuery.js принадлежат к коду библиотеки, поэтому я не буду вдаваться в подробности.
HTML:
Скопируйте код следующим образом: <! Doctype html>
<html lang = "zh-cn">
<голова>
<meta charset = "utf-8">
<title> </title>
</head>
<тело>
<div id = "content">
<p> </p>
<p> <a href = "#"> блог </a> </p>
</div>
<script src = "./ sea.js" data-main = "./ init"> </script>
</body>
</html>
JavaScript:
Кода -копия выглядит следующим образом:
//init.js
Определите (функция (требуется, экспорт, модуль) {
var $ = require ('./ jQuery');
var data = require ('./ data');
var css = require ('./ style.css');
$ ('. Автор'). HTML (Data.Author);
$ ('. blog'). attr ('href', data.blog);
});
//data.js
определять({
Автор: «Чжаньян»,
Блог: 'http://blog.codinglabs.org'
});
CSS:
Кода -копия выглядит следующим образом:
.author {color: red; font-size: 10pt;}
.blog {font-size: 10pt;}
Эффект работы заключается в следующем: