SeaJS入门教程系列之完整示例（三）

来源：互联网发布：matlab将矩阵变成一列编辑：程序博客网时间：2024/05/16 08:18

转载：原文链接

这篇文章主要介绍了SeaJS入门教程系列之完整示例,演示了一个完整的SeaJS开发例子,需要的朋友可以参考下

一个完整的例子
上文说了那么多，知识点比较分散，所以最后我打算用一个完整的SeaJS例子把这些知识点串起来，方便网友们归纳回顾。这个例子包含如下文件：

index.html—-主页面
sea.js—-SeaJS脚本
init.js—-init模块，入口模块，依赖data，jquery，style三个模块。由主页面载入。
data.js—-data模块，纯JSON数据模块，由init载入。
jquery.js—-jquery模块，对jquery库的模块化封装，由init载入。
style.css—-css样式表，作为style模块由init载入。
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

//init.jsdefine(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

//data.jsdefine({    author: 'ZhangYang',    blog: 'http://blog.codinglabs.org'});

css

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

运行效果如下：

0 0