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


Posted in Javascript onMarch 03, 2014

一个完整的例子
上文说了那么多,知识点比较分散,所以最后我打算用一个完整的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入门教程系列之完整示例(三)
Javascript 相关文章推荐
用javascript实现给出的盒子的序列是否可连为一矩型
Aug 30 Javascript
查询绑定数据岛的表格中的文本并修改显示方式的js代码
Dec 15 Javascript
jQuery 学习第六课 实现一个Ajax的TreeView
May 17 Javascript
调试Javascript代码(浏览器F12及VS中debugger关键字)
Jan 25 Javascript
js局部刷新页面时间具体实现
Jul 04 Javascript
深入理解JavaScript系列(34):设计模式之命令模式详解
Mar 03 Javascript
jQuery制作可自定义大小的拼图游戏
Mar 30 Javascript
jQuery解析Json实例详解
Nov 24 Javascript
JavaScript自定义函数实现查找两个字符串最长公共子串的方法
Nov 24 Javascript
Vue开发之watch监听数组、对象、变量操作分析
Apr 25 Javascript
node.js 如何监视文件变化
Sep 01 Javascript
JavaScript数组类型Array相关的属性与方法详解
Sep 08 Javascript
jquery实现点击弹出层效果的简单实例
Mar 03 #Javascript
jquery实现弹出层完美居中效果
Mar 03 #Javascript
jquery实现弹出层遮罩效果的简单实例
Mar 03 #Javascript
SeaJS入门教程系列之使用SeaJS(二)
Mar 03 #Javascript
Jquery.Form 异步提交表单的简单实例
Mar 03 #Javascript
jquery实现ajax提交form表单的方法总结
Mar 03 #Javascript
SeaJS入门教程系列之SeaJS介绍(一)
Mar 03 #Javascript
You might like
关于PHP堆栈与列队的学习
2013/06/21 PHP
PHP常用操作类之通信数据封装类的实现
2017/07/16 PHP
从ThinkPHP3.2.3过渡到ThinkPHP5.0学习笔记图文详解
2019/04/03 PHP
13 个JavaScript 性能提升技巧分享
2012/07/26 Javascript
JavaScript实现网页图片等比例缩放实现代码及调用方式
2013/02/25 Javascript
深入理解JS中的变量及作用域、undefined与null
2014/03/04 Javascript
jquery设置按钮停顿3秒不可用
2014/03/07 Javascript
对js eval()函数的一些见解
2016/08/15 Javascript
深入理解Javascript中的观察者模式
2017/02/20 Javascript
JavaScript实现修改伪类样式
2017/11/27 Javascript
React 组件渲染和更新的实现代码示例
2019/02/21 Javascript
vue项目首屏打开速度慢的解决方法
2019/03/31 Javascript
详解js创建对象的几种方法及继承
2019/04/12 Javascript
Vue axios获取token临时令牌封装案例
2020/09/11 Javascript
jquery实现简易验证插件封装
2020/09/13 jQuery
Vue项目打包部署到apache服务器的方法步骤
2021/02/01 Vue.js
把项目从Python2.x移植到Python3.x的经验总结
2015/04/20 Python
Python Queue模块详细介绍及实例
2016/12/27 Python
mysql 之通过配置文件链接数据库
2017/08/12 Python
python dataframe常见操作方法:实现取行、列、切片、统计特征值
2018/06/09 Python
python频繁写入文件时提速的方法
2019/06/26 Python
详解python实现交叉验证法与留出法
2019/07/11 Python
python实现简单成绩录入系统
2019/09/19 Python
python实现操作文件(文件夹)
2019/10/31 Python
python 的numpy库中的mean()函数用法介绍
2020/03/03 Python
python开发前景如何
2020/06/11 Python
python元组拆包实现方法
2021/02/28 Python
美国领先的户外服装与装备用品店:Moosejaw
2016/08/25 全球购物
香港百佳网上超级市场:PARKNSHOP.com
2020/06/10 全球购物
夜大自我鉴定
2013/10/31 职场文书
教师自荐信范文
2013/12/09 职场文书
大学生学业生涯规划
2014/01/05 职场文书
医科大学毕业生自荐信
2014/02/03 职场文书
公积金贷款承诺书
2015/04/30 职场文书
导游词之太行山青龙峡
2020/01/14 职场文书
Java实现给Word文件添加文字水印
2022/02/15 Java/Android