seajs模块化加载框架使用

最新推荐文章于 2024-04-26 16:47:03 发布

dengqulun3433

最新推荐文章于 2024-04-26 16:47:03 发布

阅读量174

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/lanyueff/p/6825651.html

版权

seajs是模块化加载框架。seajs.org已经打不开了，seajs的github。seajs速查文档

<!--如果完成下面4步，则seajs掌握了80%
js模块化
1.引入seajs的库 :<script type="text/javascript" src="sea/sea.js"></script>
2.如何变成模块
define：一个文件就是一个模块。如下utils文件

define(function(require, exports) {
  exports.each = function (arr) { // 实现代码 }; exports.log = function (str) { // 实现代码 }; });

3.如何调用模块 exports seajs.use

用来在页面中加载一个或多个模块。seajs.use(id, callback?)
4.如何依赖模块 requie

通过 require('./util.js') 就可以拿到 util.js 中通过 exports 暴露的接口。

require执行完的结果就是exports 。
-->

html文件：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no"/>
    <meta name="format-detection" content="telphone=no, email=no"/>
    <meta name="apple-touch-fullscreen" content="yes"/>
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <meta name="apple-mobile-web-app-status-bar-style" content="black"/>
    <title>image-size</title>
    <style type="text/css">
        *{margin: 0;padding: 0;}
    </style>
    <script type="text/javascript" src="sea/sea.js"></script>
    <script language="javascript">
            //加载入口文件main.js，默认后缀js自动匹配 
            //seajs.use(模块地址，函数)
            // sea的默认根目录：sea.js这个文件所在的文件
            //以当前页面为根目录写法：./目录
        seajs.use('./sea/main',function(main){ 
            console.log(main.say());
        });
    </script>
</head>
<body>

</body>
</html>

View Code

与html并列的sea文件夹里，放有sea.js,main.js,main1.js,main2.js

main.js:

define(function(require,exports,module){ 
    console.log('module of main:');
    var main1 = require('main1');
    main1.say();
    var main2 = require('main2'); //require引用模块
    main2.say();

    return { 
        say: function(){ 
            console.log('main--hello');
        }
    };

});

View Code

main1.js:

define(function(require,exports,module){ 
    console.log('module of main1:');
//exports 对外提供接口的对象
    module.exports = { 
        say: function(){ 
            console.log('main1--hello');
        }
    };
});

main2.js:

define(function(require,exports,module){ 
    console.log('module of main2:');

    return { 
        say: function(){ 
            console.log('main2--hello');
        }
    };
});

输出结果：

module of main:
module of main1:
main1--hello
module of main2:
main2--hello
main--hello
undefined

转载于:https://www.cnblogs.com/lanyueff/p/6825651.html

dengqulun3433

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
seajs模块化加载框架使用

seajs是模块化加载框架。seajs.org已经打不开了，seajs的github。seajs速查文档<!--如果完成下面4步，则seajs掌握了80%js模块化1.引入seajs的库 :<script type="text/javascript" src="sea/sea.js"></script>2.如何变成模块define：一个文件就是一个模块。...
复制链接

扫一扫