SeaJS入门教程系列之完整示例(三)_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>

<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;}

运行效果如下:

时间: 2024-11-30 19:15:05

SeaJS入门教程系列之完整示例(三)_Seajs的相关文章

SeaJS入门教程系列之完整示例(三)

 这篇文章主要介绍了SeaJS入门教程系列之完整示例,演示了一个完整的SeaJS开发例子,需要的朋友可以参考下 一个完整的例子 上文说了那么多,知识点比较分散,所以最后我打算用一个完整的SeaJS例子把这些知识点串起来,方便朋友们归纳回顾.这个例子包含如下文件:   1.index.html--主页面. 2.sea.js--SeaJS脚本. 3.init.js--init模块,入口模块,依赖data.jquery.style三个模块.由主页面载入. 4.data.js--data模块,纯json

SeaJS入门教程系列之使用SeaJS(二)

 这篇文章主要介绍了SeaJS入门教程系列之使用SeaJS,着重介绍了SeaJS的使用方法.关键方法的使用等,需要的朋友可以参考下 下载及安装   要在项目中使用SeaJS,你所有需要做的准备工作就是下载sea.js然后放到你项目的某个位置. SeaJS项目目前托管在GitHub上,主页为 https://github.com/seajs/seajs/ .可以到其git库的build目录下下载sea.js(已压缩)或sea-debug.js(未压缩). 下载完成后放到项目的相应位置,然后在页面中

SeaJS入门教程系列之SeaJS介绍(一)

 这篇文章主要介绍了SeaJS入门教程,讲述了SeaJS的由来,JavaScript传统开发模式和模块化开发的对比,需要的朋友可以参考下 前言 SeaJS是一个遵循CommonJS规范的JavaScript模块加载框架,可以实现JavaScript的模块化开发及加载机制.与jQuery等JavaScript框架不同,SeaJS不会扩展封装语言特性,而只是实现JavaScript的模块化及按模块加载.SeaJS的主要目的是令JavaScript开发模块化并可以轻松愉悦进行加载,将前端工程师从繁重的

SeaJS入门教程系列之使用SeaJS(二)_Seajs

下载及安装 要在项目中使用SeaJS,你所有需要做的准备工作就是下载sea.js然后放到你项目的某个位置.SeaJS项目目前托管在GitHub上,主页为 https://github.com/seajs/seajs/ .可以到其git库的build目录下下载sea.js(已压缩)或sea-debug.js(未压缩).下载完成后放到项目的相应位置,然后在页面中通过<script>标签引入,你就可以使用SeaJS了. SeaJS基本开发原则 在讨论SeaJS的具体使用前,先介绍一下SeaJS的模块

SeaJS入门教程系列之SeaJS介绍(一)_Seajs

前言SeaJS是一个遵循CommonJS规范的JavaScript模块加载框架,可以实现JavaScript的模块化开发及加载机制.与jQuery等JavaScript框架不同,SeaJS不会扩展封装语言特性,而只是实现JavaScript的模块化及按模块加载.SeaJS的主要目的是令JavaScript开发模块化并可以轻松愉悦进行加载,将前端工程师从繁重的JavaScript文件及对象依赖处理中解放出来,可以专注于代码本身的逻辑.SeaJS可以与jQuery这类框架完美集成.使用SeaJS可以

Java入门教程系列 – 第一个程序 “hello, world”

原文Java入门教程系列 – 第一个程序 "hello, world" Posted on 2012 年 5 月 25 日 by Johnny "Hello, World"程序指的是指在计算机屏幕上输出"Hello, World!"(意为"世界,你好!")这行字符串的计算机程序.一般来说,这是每一种计算机编程语言中最基本.最简单的程序,亦通常是初学者所编写的第 一个程序.它还可以用来确定该语言的编译器.程序开发环境,以及运行环

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

原文:WPF入门教程系列二--Application介绍 一.Application介绍 WPF和WinForm 很相似, WPF与WinForm一样有一个 Application对象来进行一些全局的行为和操作,并且每个 Domain (应用程序域)中仅且只有一个 Application 实例存在.和 WinForm 不同的是WPF Application默认由两部分组成 : App.xaml 和 App.xaml.cs,这有点类似于 Asp.Net WebForm,将定义和行为代码相分离. 微

Java入门教程系列 – 开发环境搭建

原文http://go-learning.com/2012/05/23/java-gettingstart-1/ Java入门教程系列 – 开发环境搭建 Posted on 2012 年 5 月 23 日 by Johnny 在使用任何的计算机语言进行编程之前,你都需要搭建一个开发环境.简单的说,这个过程就是要安装一些开发 用的软件和进行相关的一些配置.每种计算机语言所需要的软件是不一样的,对于Java语言来说,你最少需要安装一个JDK (这是一个专有名称,要死记),JDK的全称叫 – Java

【转】使用UNITY 3D开发IOS游戏入门教程系列(1)

本站文章均为 李华明Himi 原创,转载务必在明显处注明:  转载自[黑米GameDev街区] 原文链接: http://www.himigame.com/unity3d-game/1640.html Himi 发现一个系列的U3D的教程,很不错这里转第一章,其他的请大家自行搜索吧. 原文地址:http://gamerboom.com/archives/68484 正文:   作者:Christine Abernathy Unity是目前最热门的游戏引擎之一,理由很充分--Unity具有强大的视