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;}
运行效果如下:
相关推荐
binglingnew 2020-02-09
人生百态 2020-02-02
binglingnew 2012-10-03
yo跟着新宇走 2020-01-03
binglingnew 2019-12-03
Gary的影响力 2014-01-23
GhostStories 2019-10-28
weimasoft 2014-06-30
wuzlun 2016-11-27
人生百态 2017-09-26
binglingnew 2019-06-06
sean0 2019-04-02
yuanyuangugu 2019-07-01
earthhour 2019-06-30
binglingnew 2016-02-16
人生百态 2019-06-28
NSStringlin 2017-09-26