首頁 > web前端 > js教程 > 主體

SeaJS入門教學系列之完整範例(三)_Seajs

WBOY
發布: 2016-05-16 16:57:42
原創
889 人瀏覽過

一個完整的例子
上文說了那麼多,知識點比較分散,所以最後我打算用一個完整的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:

複製程式碼 程式碼如下:



   
   



   


   

Blog







javascript:
複製程式碼 程式碼如下:


程式碼如下:



程式碼如下:



程式碼如下:
//init.js
define(function(require, exports, module) {
    var $ = require('./jquery');
    var data = require('./data');
    var data = require('./data') ;
    var css = require('./style.css');

    $('.author').html(data.author);
    $('.blog'). attr('href', data.blog);
});//data.jsdefine({    author: 'ZhangYang',   ://blog.codinglabs.org'});

css:



複製代碼SeaJS入門教學系列之完整範例(三)_Seajs 程式碼如下:.author{color:red;font-size:10pt;}.blog{font-size:10pt;}運作效果如下:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!