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

软件发布|下载排行|最新软件

当前位置:首页IT学院IT技术

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

  2020-05-13 我要评论

一个完整的例子
上文说了那么多,知识点比较分散,所以最后我打算用一个完整的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('.https://img.qb5200.com/download-x/data');
    var css = require('./style.css');

    $('.author').html(data.author);
    $('.blog').attr('href', data.blog);
});

/https://img.qb5200.com/download-x/data.js
define({
    author: 'ZhangYang',
    blog: 'http://blog.codinglabs.org'
});

css:
复制代码 代码如下:

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

运行效果如下:

Copyright 2022 版权所有 软件发布 访问手机版

声明:所有软件和文章来自软件开发商或者作者 如有异议 请与本站联系 联系我们