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