首頁 > 開發者 > JavaScript
一個完整的例子
上文說了那麼多，知識點比較分散，所以最後我打算用一個完整的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;}
運行效果如下：
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
