SeaJS入门教程第三篇：完整示例详解

SeaJS 模块化开发：一个完整的实战例子

前面我们探讨了 SeaJS 模块化开发的多个要点，内容较为分散。为了帮助大家系统回顾，下面通过一个完整的 SeaJS 实战案例，将核心知识点串联起来。本案例包含以下文件：

1. index.html——主页面，负责页面结构与 SeaJS 的引用。
2. sea.js——SeaJS 核心库文件。
3. init.js——入口模块，依赖 data、jquery、style 三个模块，由主页面加载。
4. data.js——数据模块，提供纯 JSON 格式的数据，由 init 加载。
5. jquery.js——jQuery 库的模块化封装，由 init 加载。
6. style.css——CSS 样式表，作为 style 模块由 init 加载。
7. sea.js 和 jquery.js 属于库代码，此处不再赘述，仅展示自定义编写的文件代码。

HTML 代码：

复制代码 代码如下:

Blog

JavaScript 代码：

复制代码 代码如下:

//init.js
define(function(require, exports, module) {
var $ = require('./jquery');
var data = require('./data');
var css = require('./style.css');

$('.author').html(data.author);
$('.blog').attr('href', data.blog);
});

//data.js
define({
author: 'ZhangYang',
blog: 'http://blog.codinglabs.org'
});

CSS 样式代码：

复制代码 代码如下:

.author{color:red;font-size:10pt;}
.blog{font-size:10pt;}

实际运行效果如下图所示：