SeaJS入門(mén)教程系列之完整示例（三）
更新時(shí)間：2014年03月03日 09:44:48 作者：
這篇文章主要介紹了SeaJS入門(mén)教程系列之完整示例,演示了一個(gè)完整的SeaJS開(kāi)發(fā)例子,需要的朋友可以參考下
一個(gè)完整的例子
上文說(shuō)了那么多，知識(shí)點(diǎn)比較分散，所以最后我打算用一個(gè)完整的SeaJS例子把這些知識(shí)點(diǎn)串起來(lái)，方便朋友們歸納回顧。這個(gè)例子包含如下文件：
1.index.html——主頁(yè)面。
2.sea.js——SeaJS腳本。
3.init.js——init模塊，入口模塊，依賴data、jquery、style三個(gè)模塊。由主頁(yè)面載入。
4.data.js——data模塊，純json數(shù)據(jù)模塊，由init載入。
5.jquery.js——jquery模塊，對(duì) jQuery庫(kù)的模塊化封裝，由init載入。
6.style.css——CSS樣式表，作為style模塊由init載入。
7.sea.js和jquery.js的代碼屬于庫(kù)代碼，就不贅述，這里只給出自己編寫(xiě)的文件的代碼。
html：
復(fù)制代碼 代碼如下:
<!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：
復(fù)制代碼 代碼如下:
//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：
復(fù)制代碼 代碼如下:
.author{color:red;font-size:10pt;}
.blog{font-size:10pt;}
運(yùn)行效果如下：
相關(guān)文章
這篇文章主要介紹了把jQuery的類、插件封裝成seajs的模塊的方法,需要的朋友可以參考下2014-03-03
這篇文章主要介紹了seajs中模塊依賴的加載處理,結(jié)合實(shí)例形式分析了seajs模塊依賴與加載的原理、相關(guān)注意事項(xiàng)與使用方法,需要的朋友可以參考下2017-10-10
這篇文章主要介紹了seajs中最常用的7個(gè)功能、配置,結(jié)合實(shí)例形式簡(jiǎn)單分析了seajs中常用的項(xiàng)目配置、模塊加載、定義、獲取等操作技巧,需要的朋友可以參考下2017-10-10
圖片懶加載是前端開(kāi)發(fā)中一項(xiàng)重要的性能優(yōu)化策略,它能夠明顯縮短頁(yè)面加載時(shí)間,提升用戶的瀏覽體驗(yàn),在本文中,我們將深入探討在Vue開(kāi)發(fā)時(shí)候如何實(shí)現(xiàn)圖片懶加載,同時(shí)探討多種實(shí)現(xiàn)途徑,需要的朋友可以參考下2023-08-08
seajs實(shí)現(xiàn)強(qiáng)制刷新本地緩存的方法分析
這篇文章主要介紹了seajs實(shí)現(xiàn)強(qiáng)制刷新本地緩存的方法,結(jié)合實(shí)例形式簡(jiǎn)單分析了seajs強(qiáng)制刷新本地緩存的原理、實(shí)現(xiàn)方法及相關(guān)注意事項(xiàng),需要的朋友可以參考下2017-10-10
這篇文章主要介紹了SeaJS入門(mén)教程系列之完整示例,演示了一個(gè)完整的SeaJS開(kāi)發(fā)例子,需要的朋友可以參考下2014-03-03
seajs下require書(shū)寫(xiě)約定實(shí)例分析
這篇文章主要介紹了seajs下require書(shū)寫(xiě)約定,結(jié)合實(shí)例形式分析了seajs中require書(shū)寫(xiě)約定遵循的規(guī)則,需要的朋友可以參考下2018-05-05
seajs學(xué)習(xí)之模塊的依賴加載及模塊API的導(dǎo)出
SeaJS是一個(gè)遵循 CommonJS 規(guī)范的模塊加載框架，可用來(lái)輕松愉悅地加載任意JavaScript模塊和css模塊樣式。SeaJS接口和方法也非常少，SeaJS 就兩個(gè)核心：模塊定義和模塊的加載及依賴關(guān)系。本文將詳細(xì)介紹模塊的依賴加載及模塊API的導(dǎo)出，有需要的朋友們可以參考借鑒。2016-10-10
Seajs 簡(jiǎn)易文檔 提供簡(jiǎn)單、極致的模塊化開(kāi)發(fā)體驗(yàn)
這篇文章主要介紹了Seajs 簡(jiǎn)易文檔 提供簡(jiǎn)單、極致的模塊化開(kāi)發(fā)體驗(yàn),非官方文檔，整理來(lái)自己官方文檔的文字與實(shí)例，方便速查。需要的朋友可以參考下2016-04-04
本文是對(duì)Sea.js 提供seajs的模塊化與加載方式的講解，對(duì)學(xué)習(xí)JavaScript編程技術(shù)有所幫助,與大家分享。有需要的小伙伴可以參考下。2015-04-04