时间:2021-05-26
一个完整的例子
上文说了那么多,知识点比较分散,所以最后我打算用一个完整的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;}
运行效果如下:
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
相关阅读:AngularJS入门教程之AngularJS表达式AngularJS入门教程之AngularJS指令在前面表达式和指令的教程中了解到,Angular
本文实例讲述了AngularJS入门教程之Helloworld示例。分享给大家供大家参考,具体如下:什么是AngularJs?angularjs是一个为动态WE
关于LoadRunner基础入门教程的介绍就到这里了,希望对大家有所帮助!想要详细了解LoadRunner基础入门教程,可以继续关注软件问题的最新动态。注意
前言本文属于学习Three.js的入门教程,文中通过示例介绍了helloworld和线的实现,下面话不多说了,来一起看看详细的介绍吧。helloworld首先使
相关阅读:BootStrap入门教程(一)之可视化布局HTML5文档类型(Doctype)Bootstrap使用了一些HTML5元素和CSS属性,所以需要使用H