简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Heim > Web-Frontend > js-Tutorial > Hauptteil

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

WBOY
Freigeben： 2016-05-16 16:57:42
Original
875 Leute haben es durchsucht

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

运行效果如下：
SeaJS入门教程系列之完整示例（三）_Seajs
Verwandte Etiketten：
SeaJS SeaJS教程 SeaJS入门教程
Quelle：php.cn
Vorheriger Artikel：javascript对象的使用和属性操作示例详解_基础知识 Nächster Artikel：使用js显示当前时间示例_jquery
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Aktuelle Ausgaben
JS, CSS-Ressourcenlader, wie man es verwaltet Aufgrund historischer Probleme hat das Unternehmen keine Ressourcenlader verwendet. Es geh...
Aus 2017-05-19 10:31:40
0
2
527
javascript - sea.js require.js这种模块化加载框架,如何合理的压缩合并代码 比如现在大多数的模块化加载框架Seajs Require.js 应该都有这个问题,如何合理的合并代码? 我首先想到的有这几种 按网站的模块加载 全部压缩 有没有比较成熟点的方案~
Aus 2017-05-16 13:01:07
0
1
246
node.js - nginx为nodeJS配置静态资源SeaJS-combo 想用nginx做反向代理，代理上游为nodeJS程序，如果想要配置静态资源combo服务应该要怎样 配置如下： 情况一配置： {代码...} 报错502。 情况二配置： {代码.....
Aus 2017-04-17 12:00:45
0
2
521
node.js - 如何优雅的解决后端模板套用中的js顺序？ 例：有模板页layout.hbs。子页home.hbs,about.hbs. 有公共依赖的库，比如jquery。子页有各自特定的库。 一般模板继承时，jquery放在模板页的最前面...
Aus 2017-04-17 11:41:56
0
2
212
javascript - 前端如何实现真正的模块化开发 前端如何实现真正的模块化开发？已经引入了seajs，只是简单的做了JSCSS的模块加载，还有什么方法来实现模块化开发，帮助研发提高效率。
Aus 2017-04-11 13:26:16
0
3
401
verwandte Themen
Mehr>
Beliebte Empfehlungen
Beliebte Tutorials
Mehr>
Verwandte Tutorials
Beliebte Empfehlungen
Aktuelle Kurse
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website：Online-PHP-Schulung für das Gemeinwohl，Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln！