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

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

WBOY

Lepaskan： 2016-05-16 16:57:42

asal

889 orang telah melayarinya

一个完整的例子
上文说了那么多，知识点比较分散，所以最后我打算用一个完整的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：

复制代码代码如下:

Blog

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

运行效果如下：

Php8, saya datang juga

Ketahui reka letak tapak web dalam masa 30 minit

Tutorial Video Permulaan Shangguan Oracle kepada Mahir

Baris pertama kod UNI-APP anda

Berkibar dari awal ke pelancaran apl

Tutorial Video Linux Baharu Brother Lian

Tutorial Video AXURE 9 (Sesuai untuk UI Reka Bentuk Produk Interaktif Pengurus Produk)

Tutorial Video PS Kemahiran Asas Sifar

Tutorial video UI 16 hari untuk anda bermula

Tutorial Video Teknik PS dan Teknik Menghiris

Tutorial Video Pembinaan Persekitaran Awan Alibaba dan Pelancaran Projek

Gambaran Keseluruhan Rangkaian Komputer - Pengetahuan Asas yang Perlu Dikuasai Pengaturcara

Tutorial Penting untuk Pengaturcara - Penjelasan Protokol HTTP

Tutorial Video Websocket

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