手机
当前位置:查字典教程网 >编程开发 >Javascript教程 >SeaJS入门教程系列之完整示例(三)
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></p>

<p><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入门教程系列之完整示例(三)】相关文章:

jQuery插件制作之全局函数用法实例

Java新手入门教程:新手必须掌握的30条Java基本概念

浅谈jQuery构造函数分析

使用Node.js处理前端代码文件的编码问题

在b/s开发中经常用到的javaScript技术

JavaScript中getUTCMinutes()方法的使用详解

jQuery+ajax实现无刷新级联菜单示例

JS代码混淆初步

jQuery插件制作之参数用法实例分析

创建你的第一个AngularJS应用的方法

精品推荐
分类导航