DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> JavaScript綜合知識 >> SeaJS入門教程系列之完整示例(三)
SeaJS入門教程系列之完整示例(三)
編輯:JavaScript綜合知識     

 這篇文章主要介紹了SeaJS入門教程系列之完整示例,演示了一個完整的SeaJS開發例子,需要的朋友可以參考下

一個完整的例子 上文說了那麼多,知識點比較分散,所以最後我打算用一個完整的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;}    
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved