Seajs使用实例入门介绍

最新推荐文章于 2021-03-21 17:57:31 发布

angryshan

最新推荐文章于 2021-03-21 17:57:31 发布

阅读量940

点赞数

分类专栏：前端技术文章标签： seajs

本文链接：https://blog.csdn.net/angryshan/article/details/89404720

版权

前端技术专栏收录该内容

7 篇文章 1 订阅

订阅专栏

参考：https://www.jianshu.com/p/ebdf2233e3fe

1. seajs页面引入

index.html

思路：首先引入sea.js文件，然后通过seajs.use加载main.js文件

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>Hello</title>
</head>
<body>
<h1 id="title">seajs demo</h1>
<h1 id="content">I am content</h1>
<script src="https://cdn.bootcss.com/seajs/3.0.3/sea.js"></script>
<script>
    seajs.use('./main.js');//同级目录
// seajs.use('../main.js');//不同级目录
</script>
</body>
</html>

main.js

思路：define()用来定义模块文件。用main.js修改id为title的标签的文本内容

define(function(require,exports,module) {
    var title= document.getElementById('title');
    title.innerHTML = "yes it works"
})

页面输出：yes it works

2.模块文件引入

新建change.js

define(function (require, exports, module) {
    var textContent = 'yes it works';
    exports.text = textContent;
    //or
    //module.exports = {
    //text: textContent
    //}
})

修改main.js

思路：change模块输出一个text变量，在main中引用

define(function (require, exports, module) {
    var change = require('./change.js'); //同级目录，通过require将change模块的输出对象赋值给change变量
    var title = document.getElementById('title');
    title.innerHTML = change.text; //将对象的text属性赋值给节点的文本值
)}

页面输出：yes it works

3.别名设置

修改index.html

思路：引入一个模块要写他的相对路径，可以给它取个别名，在seajs.use()上面加入一段代码，通过config中alias给'./change.js'设置别名change，现在main中引用change模块就可以直接写成这样了var change = require('change')

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>Hello</title>
</head>
<body>
<h1 id="title">seajs demo</h1>
<h1 id="content">I am content</h1>
<script src="https://cdn.bootcss.com/seajs/3.0.3/sea.js"></script>
<script>
    seajs.config({
        alias:{
            'change':'./change.js'//同级目录
        }
    });
    seajs.use('./main.js');//同级目录
    // seajs.use('../main.js');//不同级目录
</script>
</body>
</html>

4.模块调用

修改change.js

思路：模块中定义了一个init方法，随机返回数组中的一条

define(function (require, exports, module) {
    var init= function() {
        var textContent = [
            'yes it works',
            'seajs demo',
            'it is a lucky day',
            'wish this help you',
            'thank you for reading'
        ];
        var index = Math.floor(Math.random()*textContent.length);
        return textContent[index];
    }
    module.exports = {
        init:init
    }
})

修改main.js

思路：因为index.html已经用了别名设置，所以require里直接用别名即可

define(function (require, exports, module) {
    var changeText = require('change');
    var title = document.getElementById('title');
    title.innerHTML = changeText.init();
})

5.第三方文件引用

jQuery.js

思路：下载一个jq源文件，把代码复制到以下源码处，另其模块化，能被外部调用

define(function (require, exports, module) {
    //jquery 源码
})

修改index.html

思路：设置别名，使其他地方可以使用

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>Hello</title>
</head>
<body>
<h1 id="title">seajs demo</h1>
<!--<script src="https://cdn.bootcss.com/seajs/3.0.3/sea.js"></script>-->
<script src="seajs/2.2.0/sea.js"></script>
<script>
    seajs.config({
        alias:{
            'change':'./change.js',
            'jquery':'./jq.js'
        }
    });
    seajs.use('./main.js');//同级目录
    // seajs.use('../main.js');//不同级目录
</script>
</body>
</html>

修改main.js

思路：在main里引入jq代码并且使用

define(function (require, exports, module) {
    var change = require('change');
    // var title = document.getElementById('title');
        // title.innerHTML = change.init();
    var $ = require('jquery');
    $('#title').text(change.init());
})

6.回调函数

修改main.js

思路：另seajs.use([module],callback),加载一个或多个模块，并执行回调函数

define(function (require, exports, module) {
    var change = require('change');
    var $ = require('jquery');
    var showText = function () {
        $('#title').text(change.init());
    };
    exports.showText = showText;
})

修改index.html

思路：增加回调函数。加载两个模块（main、jQuery），把他们的输出对象传给main和$变量，通过点击事件，调用main中的showText方法，showText方法调用change 的init方法

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>Hello</title>
</head>
<body>
<h1 id="title">seajs demo</h1>
<!--<script src="https://cdn.bootcss.com/seajs/3.0.3/sea.js"></script>-->
<script src="seajs/2.2.0/sea.js"></script>
<script>
    seajs.config({
        alias:{
            'change':'./change.js',
            'jquery':'./jq.js'
        }
    });
    // seajs.use('./main.js');//同级目录
    // seajs.use('../main.js');//不同级目录
    seajs.use(['main','jquery'],function(main,$) {
        $('#title').after('<button id="show">showText</button>');
        $('#show').on('click',function() {
            main.showText()
        })
    });
</script>
</body>
</html>

7.路径问题

· ./是表示当前目录；../是上级目录；

· seajs.config 里alias的别名设置只是给路径取个别名，减少书写；

· seajs里主要两个用到路径的地方：一个是seajs.use()；一个是require()。

· base路径是seajs文件所在目录

angryshan

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Seajs使用实例入门介绍

参考：https://www.jianshu.com/p/ebdf2233e3fe1. seajs页面引入index.html思路：首先引入sea.js文件，然后通过seajs.use加载main.js文件<!doctype html><html><head> <meta charset="utf-8"> &lt...
复制链接

扫一扫

专栏目录