一个完整的例子
上文说了那么多，知识点比较分散，所以最后我打算用一个完整的SeaJS例子把这些知识点串起来，方便朋友们归纳回顾。这个例子包含如下文件：
1.index.html——主页面。
2.sea.js——SeaJS脚本。
3.init.js——init模块，入口模块，依赖data、jquery、style三个模块。由主页面载入。
4.data.js——data模块，纯json数据模块，由init载入。
5.jquery.js——jquery模块，对 jQuery库的模块化封装，由init载入。
6.style.css——CSS样式表，作为style模块由init载入。
7.sea.js和jquery.js的代码属于库代码，就不赘述，这里只给出自己编写的文件的代码。
html：
复制代码 代码如下:<!DOCTYPE HTML>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="content">
<p class="author"></p>
<p class="blog"><a href="#">Blog</a></p>
</div>
<script src="./sea.js" data-main="./init"></script>
</body>
</html>
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;}
运行效果如下：
您可能感兴趣的文章:
- SeaJS 与 RequireJS 的差异对比
- LABjs、RequireJS、SeaJS的区别
- SeaJS入门教程系列之使用SeaJS（二）
- SeaJS入门教程系列之SeaJS介绍（一）
- seajs中模块的解析规则详解和模块使用总结
- seaJs的模块定义和模块加载浅析
- Seajs的学习笔记
- seajs1.3.0源码解析之module依赖有序加载
- seajs模块之间依赖的加载以及模块的执行
- seajs下require书写约定实例分析
