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：

代码如下:

<!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>

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入门教程系列之完整示例（三）的更多相关文章

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 入门教程 - 样式和动画(三) 用样式可以对内部元素进行批量设置属性. ...

随机推荐

Java_myBatis_XML代理_动态SQL
主要是设计到映射文件的编写: SELECT: <sql id="query_user_where">  ...
JavaSE考试前练习
汽车租赁管理系统(CarRents) 120分钟要求:请使用JavaEE实现一个汽车租赁管理系统,汽车租赁的属性主要包含:车牌(License).公里数(kilo).品牌(brand),租金(mo ...
H5 localStorage sessionStorage
localStorage 用于长久保存整个网站的数据,没有过期时间,除非手动去除. sessionStorage 会话存储,临时存储,当用户关闭浏览器窗口后,数据被删除. 共同方法以 localSt ...
C# http get与post请求方法
public class HttpTools { public static string GetRequest(string url) { HttpWebRequest request = (Htt ...
Nginx URL匹配
Nginx 下 location模块可以实现对网页URL进行分析处理 location ~ .*\.(gif|jpg|jpeg|png|bmg|swf)$ { // 扩展名为gif|jpg|j ...
属性动画QPropertyAnimation
属性动画QPropertyAnimation 改变大小.颜色或位置是动画中的常见操作,而QPropertyAnimation类可以修改控件的属性值大小改变动画: import sys from Py ...
关于JS事件冒泡与JS事件代理（事件委托）
连接:https://blog.csdn.net/supercoooooder/article/details/52190100 核心代码: <ul id="parentUl" ...
手动创建binary log files和手动编辑binary log index file会有什么影响
基本环境:官方社区版MySQL 5.7.19 一.了解Binary Log结构 1.1.High-Level Binary Log Structure and Contents • Binlog包括b ...
【centos】 error: command 'gcc' failed with exit status 1
原文连接http://blog.csdn.net/fenglifeng1987/article/details/38057193 用安装Python模块出现error: command 'gcc' f ...

SeaJS入门教程系列之完整示例（三）

SeaJS入门教程系列之完整示例（三）的更多相关文章

随机推荐

热门专题