SeaJS入門教程系列之完整示例（三）
更新時間：2014年03月03日 09:44:48 作者：
這篇文章主要介紹了SeaJS入門教程系列之完整示例,演示了一個完整的SeaJS開發(fā)例子,需要的朋友可以參考下
一個完整的例子
上文說了那么多，知識點比較分散，所以最后我打算用一個完整的SeaJS例子把這些知識點串起來，方便朋友們歸納回顧。這個例子包含如下文件：
1.index.html——主頁面。
2.sea.js——SeaJS腳本。
3.init.js——init模塊，入口模塊，依賴data、jquery、style三個模塊。由主頁面載入。
4.data.js——data模塊，純json數(shù)據(jù)模塊，由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>
<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的相關知識和和學習心得,適合剛接觸SeaJS的同學,需要的朋友可以參考下2014-03-03
這篇文章主要介紹了seajs模塊壓縮問題與解決方法,結(jié)合實例形式分析了seajs模塊壓縮過程中出現(xiàn)的問題及相應的解決方法,需要的朋友可以參考下2017-10-10
現(xiàn)在使用sea.js的公司越來越多， 比如阿里巴巴，淘寶網(wǎng)，百姓網(wǎng)，支付寶，有道云筆記等。模塊化的javascript開發(fā)帶來了可維護、可擴展性，尤其在多人協(xié)作開發(fā)的時候不用再擔心文件依賴和函數(shù)命名沖突的問題，本文給大家分享了sea.js常用的api簡易文檔，下面來一起看看吧2016-11-11
這篇文章主要介紹了SeaJS中use函數(shù)用法,結(jié)合實例形式分析了use函數(shù)加載模塊的使用方法與相關操作技巧,需要的朋友可以參考下2017-10-10
Seajs是什么及sea.js 由來，特點以及優(yōu)勢
這篇文章主要介紹了Seajs的相關知識和和學習心得,適合剛接觸SeaJS的同學,需要的朋友可以參考下，有更好的新手教程或文檔，歡迎推薦、分享2016-10-10
這篇文章主要介紹了SeaJS入門教程,講述了SeaJS的由來,JavaScript傳統(tǒng)開發(fā)模式和模塊化開發(fā)的對比,需要的朋友可以參考下2014-03-03
這篇文章主要介紹了LABjs、RequireJS、SeaJS的區(qū)別、JS文件加載器、JS塊加載器等知識,需要的朋友可以參考下2014-03-03
seaJs使用心得之exports與module.exports的區(qū)別實例分析
這篇文章主要介紹了seaJs使用心得之exports與module.exports的區(qū)別,結(jié)合實例形式分析了exports與module.exports具體功能、使用方法及相關操作注意事項,需要的朋友可以參考下2017-10-10
SeaJS是一個遵循 CommonJS 規(guī)范的模塊加載框架，可用來輕松愉悅地加載任意JavaScript模塊和css模塊樣式。SeaJS接口和方法也非常少，SeaJS 就兩個核心：模塊定義和模塊的加載及依賴關系。本文將詳細介紹模塊的依賴加載及模塊API的導出，有需要的朋友們可以參考借鑒。2016-10-10
這篇文章主要介紹了把jQuery的類、插件封裝成seajs的模塊的方法,需要的朋友可以參考下2014-03-03