SeaJS入门教程系列之完整示例(三)
一个完整的例子
上文说了那么多,知识点比较分散,所以最后我打算用一个完整的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:
<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:
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:
.blog{font-size:10pt;}
运行效果如下:

SeaJS入门教程系列之完整示例(三)的更多相关文章
- SeaJS入门教程系列之使用SeaJS(二)
SeaJS入门教程系列之使用SeaJS(二) 作者: 字体:[增加 减小] 类型:转载 时间:2014-03-03我要评论 这篇文章主要介绍了SeaJS入门教程系列之使用SeaJS,着重介绍了SeaJ ...
- SeaJS入门教程系列之SeaJS介绍(一)
前言SeaJS是一个遵循CommonJS规范的JavaScript模块加载框架,可以实现JavaScript的模块化开发及加载机制.与jQuery等JavaScript框架不同,SeaJS不会扩展封装 ...
- WPF入门教程系列二十三——DataGrid示例(三)
DataGrid的选择模式 默认情况下,DataGrid 的选择模式为“全行选择”,并且可以同时选择多行(如下图所示),我们可以通过SelectionMode 和SelectionUnit 属性来修改 ...
- WPF入门教程系列三——Application介绍(续)
接上文WPF入门教程系列二——Application介绍,我们继续来学习Application 三.WPF应用程序的关闭 WPF应用程序的关闭只有在应用程序的 Shutdown 方法被调用时,应用程序 ...
- ActiveMQ详细入门教程系列(一)
一.什么是消息中间件 两个系统或两个客户端之间进行消息传送,利用高效可靠的消息传递机制进行平台无关的数据交流,并基于数据通信来进行分布式系统的集成.通过提供消息传递和消息排队模型,它可以在分布式环境下 ...
- WPF入门教程系列二——Application介绍
一.Application介绍 WPF和WinForm 很相似, WPF与WinForm一样有一个 Application对象来进行一些全局的行为和操作,并且每个 Domain (应用程序域)中仅且只 ...
- WPF入门教程系列(二) 深入剖析WPF Binding的使用方法
WPF入门教程系列(二) 深入剖析WPF Binding的使用方法 同一个对象(特指System.Windows.DependencyObject的子类)的同一种属性(特指DependencyProp ...
- WPF入门教程系列(一) 创建你的第一个WPF项目
WPF入门教程系列(一) 创建你的第一个WPF项目 WPF基础知识 快速学习绝不是从零学起的,良好的基础是快速入手的关键,下面先为大家摞列以下自己总结的学习WPF的几点基础知识: 1) C#基础语法知 ...
- CPF 入门教程 - 样式和动画(三)
CPF NetCore跨平台UI框架 系列教程 CPF 入门教程(一) CPF 入门教程 - 数据绑定和命令绑定(二) CPF 入门教程 - 样式和动画(三) 用样式可以对内部元素进行批量设置属性. ...
随机推荐
- get方式传值中文乱码
问题描述: 本机可以,服务器乱码: 解决方案: 我采用了第三条,改server.xml配置 方法一: get方式提交的参数编码,只支持iso8859-1编码.因此,如果里面有中文.在后台就需要转换编码 ...
- (大数 万进制) N! hdu1042
N! Time Limit: 10000/5000 MS (Java/Others) Memory Limit: 262144/262144 K (Java/Others) Total Subm ...
- Java面向对象----个人参考资料
Java面向对象 :什么是面向对象.类与对象.封装.构造方法.static关键字.继承.抽象类.接口.多态 一.什么是面向对象 1.面向过程思想 面向过程:(PO,Procedure Oriented ...
- MySQL5.5登录密码忘记了,怎嘛办?
1.关闭正在运行的MySQL. 2.打开DOS窗口,转到mysql\bin目录. 3.输入mysqld --skip-grant- tables回车.如果没有出现提示信息,那就对了. 4.再开一 ...
- myeclipse 怎么安装与激活
摘录自:http://blog.csdn.net/u012318074/article/details/71310553 第一步:安装完成后不要运行MyEclipse 第二步:下载对应的破解文件 第三 ...
- __attribute__的一些相关属性
__attribute__((format())) 这个format有3个参数. int my(NSString *str,NSString *str1,NSArray*str2,...) __at ...
- cdqz2017-test10-柚的策略(期望DP & 组合数学)
根据期望的可加性,我们可以算出每一位客人的期望等待时间,将他们累加 即 每一位客人所有可能情况的时间之和 / n! 设S= 每一位客人所有可能情况的时间之和 如果有f(i,p)种方案使客人i是恰好第p ...
- bzoj千题计划298:bzoj3997: [TJOI2015]组合数学
http://www.lydsy.com/JudgeOnline/problem.php?id=3997 最小链覆盖=最长反链长度 所以题目等价于寻找一条从右上角到左下角的最长路 #include&l ...
- fffmgg
翻译: 一.GOALS 你应该学习: 基本概念 安装ffmpeg和工具 编码视频 应用过滤器 分析视频 二.要求 这些幻灯片ffmpeg,ffprobe和ffplay的安装一些示例视频,例如:Big ...
- 使用bootstrap的相关配置
<html> <head> <title>java微辅导</title> <meta charset="UTF-8"/> ...