Complete examples of the SeaJS tutorial series (3)

2020-03-30 02:10:47
OfStack

A complete example
The above mentioned so many, the knowledge points are relatively scattered, so I finally plan to use a complete SeaJS example to link up these knowledge points, convenient for friends to summarize and review. This example contains the following files:

1. Index.html -- main page.
2. Sea. Js - SeaJS script.
3. Init. Js -- init module, entry module, dependent on data, jquery, style three modules. Loaded by the main page.
4. Data.js -- data module, pure json data module, loaded by init.
5. Jquery. Js -- jquery module, the modular encapsulation of jquery library, is loaded by init.
6. Style.css -- CSS style sheets, loaded as style modules by init.
7. Sea. Js and jquery. Js code belongs to the library code, do not repeat, here only give their own written file code.
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;}

The operation effect is as follows:

< img border = 0 id = theimg onclick = window. The open this. (SRC) SRC = "/ / files.jb51.net/file_images/article/201403/20140303094055.jpg? 20142394159 ">