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;}

  运行效果如下:

SeaJS入门教程系列之完整示例(三)