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

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

WBOY

Libérer： 2016-05-16 16:57:42

original

875 Les gens l'ont consulté

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

Apprenez la mise en page d'un site Web en 30 minutes

Tutoriel vidéo Shangguan Oracle débutant à compétent

Votre première ligne de code UNI-APP

Flutter de zéro au lancement de l'application

Brother Lian Nouveau didacticiel vidéo Linux

Tutoriel vidéo AXURE 9 (convient à l'interface utilisateur interactive de conception de produits du chef de produit)

Tutoriel vidéo PS Zero Basic Proficiency

Tutoriel vidéo de 16 jours sur l'interface utilisateur pour vous aider à démarrer

Tutoriel vidéo sur les techniques PS et les techniques de découpage

Tutoriel vidéo sur la construction et le lancement de projets d'Alibaba Cloud Environment

Présentation des réseaux informatiques - Connaissances de base que les programmeurs doivent maîtriser

Tutoriel essentiel pour les programmeurs - Explication du protocole HTTP

Tutoriel vidéo Websocket

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