SeaJS項目完整實例【轉】

時間 2019-11-13

標籤 seajs 項目完整實例简体版

原文原文鏈接

index.html——主頁面。javascript

sea.js——SeaJS腳本。css

init.js——init模塊，入口模塊，依賴data、jquery、style三個模塊。由主頁面載入。html

data.js——data模塊，純json數據模塊，由init載入。java

jquery.js——jquery模塊，對 jQuery庫的模塊化封裝，由init載入。jquery

style.css——CSS樣式表，做爲style模塊由init載入。git

sea.js和jquery.js的代碼屬於庫代碼，就不贅述，這裏只給出本身編寫的文件的代碼。github

html：web

<!DOCTYPE  HTML>
<htmllang="zh-CN">
<head>
    <metacharset="UTF-8">
    <title></title>
</head>
<body>
<divid="content">
    <pclass="author"></p>
    <pclass="blog"><ahref="#">Blog</a></p>
</div>
<scriptsrc="./sea.js"data-main="./init"></script>
</body>
</html>

javascript：json

//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://leoo2sk.cnblogs.com'
});

css：模塊化

.author{color:red;font-size:10pt;}

.blog{font-size:10pt;}

[1] SeaJS主頁 – http://seajs.com

[2] SeaJS的GitHub庫（可獲取源碼） – https://github.com/seajs/seajs

[3] SeaJS做者玉伯的博客 - http://lifesinger.wordpress.com/

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。