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 相关文章推荐
jQuery中的bind绑定事件与文本框改变事件的临时解决方法
Aug 13 Javascript
JS连接SQL数据库与ACCESS数据库的方法实例
Nov 21 Javascript
javascript中的循环语句for语句深入理解
Apr 04 Javascript
js中将String转换为number以便比较
Jul 08 Javascript
JS实现简单的键盘打字的效果
Apr 24 Javascript
Bootstrap响应式侧边栏改进版
Sep 17 Javascript
jQuery实现贪吃蛇小游戏(附源码下载)
Mar 04 Javascript
JavaScript 值类型和引用类型的初次研究(推荐)
Jul 19 Javascript
JS传播事件、取消事件默认行为、阻止事件传播详解
Aug 14 Javascript
基于webpack.config.js 参数详解
Mar 20 Javascript
Vue filter介绍及详细使用
Apr 04 Javascript
Layui带搜索的下拉框的使用以及动态数据绑定方法
Sep 28 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 Error与Logging函数的深入理解
2013/06/03 PHP
PHP借助phpmailer发送邮件
2015/05/11 PHP
解析WordPress中控制用户登陆和判断用户登陆的PHP函数
2016/03/01 PHP
PHP将英文数字转换为阿拉伯数字实例讲解
2019/01/28 PHP
解决laravel session失效的问题
2019/10/14 PHP
一种JavaScript的设计模式
2006/11/22 Javascript
js 发个判断字符串是否为符合标准的函数
2009/04/27 Javascript
JS重要知识点小结
2011/11/06 Javascript
javascript使用location.search的示例
2013/11/05 Javascript
jquery日历控件实现方法分享
2014/03/07 Javascript
js unicode 编码解析关于数据转换为中文的两种方法
2014/04/21 Javascript
jquery获取tagName再进行判断
2014/05/29 Javascript
JavaScript插件化开发教程 (三)
2015/01/27 Javascript
JS+CSS模拟可以无刷新显示内容的留言板实例
2015/03/03 Javascript
jquery实现仿新浪微博评论滚动效果
2015/08/06 Javascript
JavaScript函数柯里化详解
2016/04/29 Javascript
javascript读取文本节点方法小结
2016/12/15 Javascript
小程序自定义日历效果
2018/12/29 Javascript
解决layui页面按钮点击无反应,也不报错的问题
2019/09/29 Javascript
Vue 技巧之控制父类的 slot
2020/02/24 Javascript
[02:23]2016国际邀请赛中国区预选赛wings晋级之路
2016/06/29 DOTA
Python logging模块学习笔记
2014/05/24 Python
Python ORM框架SQLAlchemy学习笔记之安装和简单查询实例
2014/06/10 Python
python学习笔记:字典的使用示例详解
2014/06/13 Python
Python实现求一个集合所有子集的示例
2018/05/04 Python
浅析python的Lambda表达式
2019/02/27 Python
Python 70行代码实现简单算式计算器解析
2019/08/30 Python
python 计算方位角实例(根据两点的坐标计算)
2020/01/17 Python
浅析Python __name__ 是什么
2020/07/07 Python
酒鬼酒广告词
2014/03/21 职场文书
公司周年庆典策划方案
2014/05/17 职场文书
贷款承诺书范文
2014/05/19 职场文书
介绍信范文
2015/01/31 职场文书
2016预备党员培训心得体会
2016/01/08 职场文书
多台电脑共享文件怎么设置?多台电脑共享文件操作教程
2022/04/08 数码科技
Linux中各个目录的作用与内容
2022/06/28 Servers