一个完整的例子
上文说了那么多，知识点比较分散，所以最后我打算用一个完整的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入门教程系列之完整示例（三）的更多相关文章

  1. SeaJS入门教程系列之使用SeaJS（二）

    SeaJS入门教程系列之使用SeaJS(二) 作者: 字体:[增加 减小] 类型:转载 时间:2014-03-03我要评论 这篇文章主要介绍了SeaJS入门教程系列之使用SeaJS,着重介绍了SeaJ ...

  2. SeaJS入门教程系列之SeaJS介绍（一）

    前言SeaJS是一个遵循CommonJS规范的JavaScript模块加载框架,可以实现JavaScript的模块化开发及加载机制.与jQuery等JavaScript框架不同,SeaJS不会扩展封装 ...

  3. WPF入门教程系列二十三——DataGrid示例(三)

    DataGrid的选择模式 默认情况下,DataGrid 的选择模式为“全行选择”,并且可以同时选择多行(如下图所示),我们可以通过SelectionMode 和SelectionUnit 属性来修改 ...

  4. WPF入门教程系列三——Application介绍(续)

    接上文WPF入门教程系列二——Application介绍,我们继续来学习Application 三.WPF应用程序的关闭 WPF应用程序的关闭只有在应用程序的 Shutdown 方法被调用时,应用程序 ...

  5. ActiveMQ详细入门教程系列（一）

    一.什么是消息中间件 两个系统或两个客户端之间进行消息传送,利用高效可靠的消息传递机制进行平台无关的数据交流,并基于数据通信来进行分布式系统的集成.通过提供消息传递和消息排队模型,它可以在分布式环境下 ...

  6. WPF入门教程系列二——Application介绍

    一.Application介绍 WPF和WinForm 很相似, WPF与WinForm一样有一个 Application对象来进行一些全局的行为和操作,并且每个 Domain (应用程序域)中仅且只 ...

  7. WPF入门教程系列(二) 深入剖析WPF Binding的使用方法

    WPF入门教程系列(二) 深入剖析WPF Binding的使用方法 同一个对象(特指System.Windows.DependencyObject的子类)的同一种属性(特指DependencyProp ...

  8. WPF入门教程系列(一) 创建你的第一个WPF项目

    WPF入门教程系列(一) 创建你的第一个WPF项目 WPF基础知识 快速学习绝不是从零学起的,良好的基础是快速入手的关键,下面先为大家摞列以下自己总结的学习WPF的几点基础知识: 1) C#基础语法知 ...

  9. CPF 入门教程 - 样式和动画（三）

    CPF NetCore跨平台UI框架 系列教程 CPF 入门教程(一) CPF 入门教程 - 数据绑定和命令绑定(二) CPF 入门教程 - 样式和动画(三) 用样式可以对内部元素进行批量设置属性. ...

随机推荐

  1. 线程的同步（协调）synchronized

    [格式] 同步代码块:synchronized(Object){...} 关键字在代码块前,每次只允许一个线程调用此代码块. Object为任何对象(一般用this),每个对象都有一个标志位(0锁住状 ...

  2. STM8S ------ VCAP download

    There is a specific pin called vcap in stm8s mcu. I recommend this pin connects to a 1uF capacitor w ...

  3. GBDT

    一.决策树分类 决策树分为两大类,分类树和回归树 分类树用于分类标签值,如晴天/阴天/雾/雨.用户性别.网页是否是垃圾页面 回归树用于预测实数值,如明天的温度.用户的年龄 两者的区别: 分类树的结果不 ...

  4. MySQL中的编码问题

    1.查看MySQL数据库的默认编码 (1).使用status命令 mysql> status -------------- mysql Ver 14.14 Distrib 5.5.28, for ...

  5. OS + CentOS 7 / centos 7 / config / configuration / rescue / rc.local / yum

    s centos7开启网卡功能 https://blog.csdn.net/nkd50000/article/details/78903479 网卡默认是关闭的,未分配ip地址,解决办法: 1.修改文 ...

  6. 面向对象【day07】：面向对象引子（一）

    本节内容 概述 面向对象引子 面向过程介绍 一.概述 很对人都不理解编程中的面向对象的概念,那我们先来说说面向对象的引子,由这个引子带领我们更好的理解面向对象的概念. 二.面向对象引子 你现在是一家游 ...

  7. 8、JPA-映射-双向一对一

    一个管理对应一个部门,一个部门对应一个管理,例中由部门维护关联关系 实体类 Department package com.jpa.yingshe; import javax.persistence.* ...

  8. springboot websocket 一篇足够了

    什么是WebSocket WebSocket是一种在单个TCP连接上进行全双工通信的协议 … 为什么要实现握手监控管理 如果说,连接随意创建,不管的话,会存在错误,broken pipe 表面看单纯报 ...

  9. Java编程思想 学习笔记8

    八.多态  在面向对象的程序设计语言中,多态是继数据抽象和继承之后的第三种基本特征. 多态通过分离做什么和怎么做,从另一角度将接口和实现分离开来. “封装”通过合并特征和行为来创建新的数据类型.“实现 ...

  10. Web版微信协议分析—版本2

    微信web协议分析(微信网页版 wx2.qq.com) 1.打开首页,分配一个随机uuid,2.根据该uuid获取二维码图片.3.微信客户端扫描该图片,在客户端确认登录.4.浏览器不停的调用一个接口, ...