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 播放器 控制
Jan 22 Javascript
jQuery select操作控制方法小结
May 26 Javascript
js showModalDialog参数的使用详解
Jan 07 Javascript
javascript self对象使用详解
Oct 18 Javascript
js模式化窗口问题![window.dialogArguments]
Oct 30 Javascript
js a标签点击事件
Mar 30 Javascript
JS分页的实现(同步与异步)
Sep 16 Javascript
Angular服务Request异步请求的实例讲解
Aug 13 Javascript
微信小程序文字显示换行问题
Jul 28 Javascript
webpack proxy 使用(代理的使用)
Jan 10 Javascript
Vue实现腾讯云点播视频上传功能的实现代码
Aug 17 Javascript
Vue接口封装的完整步骤记录
May 14 Vue.js
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+AJAX聊天程序[聊天室]提供下载
2007/07/21 PHP
php 函数使用方法与函数定义方法
2010/05/09 PHP
PHP curl_setopt()函数实例代码与参数分析
2011/06/02 PHP
php简单计算年龄的方法(周岁与虚岁)
2016/12/06 PHP
jquery uaMatch源代码
2011/02/14 Javascript
地址栏传递中文参数乱码在js里用escape转码
2013/08/28 Javascript
解决js页面滚动效果scrollTop在FireFox与Chrome浏览器间的兼容问题的方法
2015/12/03 Javascript
jQuery绑定事件-多种实现方式总结
2016/05/09 Javascript
Google 地图获取API Key详细教程
2016/08/06 Javascript
使用开源工具制作网页验证码的方法
2016/10/17 Javascript
详解handlebars+require基本使用方法
2016/12/21 Javascript
用vue-cli开发vue时的代理设置方法
2018/09/20 Javascript
Vue使用watch监听一个对象中的属性的实现方法
2019/05/10 Javascript
JavaScript交换变量常用4种方法解析
2020/09/02 Javascript
Python的另外几种语言实现
2015/01/29 Python
全面了解python字符串和字典
2016/07/07 Python
快速实现基于Python的微信聊天机器人示例代码
2017/03/03 Python
Python使用分布式锁的代码演示示例
2018/07/30 Python
Python cv2 图像自适应灰度直方图均衡化处理方法
2018/12/07 Python
Python基础教程之if判断,while循环,循环嵌套
2019/04/25 Python
pandas 空数据处理方法详解
2019/11/02 Python
python类中super() 的使用解析
2019/12/19 Python
Python魔法方法 容器部方法详解
2020/01/02 Python
python神经网络编程实现手写数字识别
2020/05/27 Python
印尼披萨外送专家:Domino’s Pizza印尼
2017/12/28 全球购物
优秀毕业大学生推荐信
2013/11/13 职场文书
西北政法大学自主招生自荐信
2014/01/29 职场文书
电视节目策划方案
2014/05/16 职场文书
小学生五年级大队长竞选发言稿
2014/09/12 职场文书
家庭贫困证明书(3篇)
2014/09/15 职场文书
民事上诉状范文
2015/05/22 职场文书
反腐倡廉学习心得体会范文
2015/08/15 职场文书
2016年植树节红领巾广播稿
2015/12/17 职场文书
干部外出学习心得体会
2016/01/18 职场文书
2019个人工作自我评价范文(3篇)
2019/09/19 职场文书
Python实现视频自动打码的示例代码
2022/04/08 Python