温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

Sea.js 是一个模块加载器

发布时间:2020-10-02 22:18:44 来源:网络 阅读:490 作者:lxg290 栏目:web开发

1 模块定义define

define(function(require,exports,module){

    //require 引入需要的模块如jquery等

    //var $ = require('./jquery');

 

    //exports可以把方法或属性暴露给外部

    exports.name = 'hi';

    exports.hi = function(){

        alert('hello');

    } 

    //module提供了模块信息

});


2 使用定义好的模块seajs.use 

<!doctype html>

<html>

<head>

<title>SeaJs Test</title>

<meta charset="UTF-8">

<script type="text/javascript" src="seajs/sea.js"></script>

</head>

<body>

 

<script type="text/javascript">

    //第一个参数是模块标识,即要使用模块的路径,这里是t1.js

    //第二个参数是一个回调函数

    seajs.use('./js/t1',function(t){

        t.hi();

    });

</script>

</body>

</html>


3 加载依赖项require  

//名称必须是require,可以理解为一个关键词一样,接收一个参数

var $ = require('./jquery');


4 向外部提供接口exports

define(function(require,exports,module){

    //exports可以把方法或属性暴露给外部

    exports.name = 'hi';

    exports.hi = function(){

        alert('hello');

    }

});


5 当前模块信息module

    1) module.id 模块标识

  2)module.uri 根据模块系统的路径解析规则得到的模块绝对路径

  3) module.dependencies 表示当前模块的依赖列表,是一个数组

  4) module.status 当前模块的状态,是一个数值




6    Sea.js 是一个模块加载器,模块加载器需要实现两个基本功能:

      文档: https://github.com/seajs/seajs/issues/260

    1) 模块定义规范的实现

           这就是 define,require,exports,module 的实现

    2)模块系统的启动

            有了 define 等模块定义规范的实现,我们可以开发出很多模块。但光有一堆模块不管用,我们还得让它们能跑起来

            在 Sea.js 里,要启动模块系统很简单

            <script src="path/to/sea.js"></script>

            <script>

                        seajs.use('./main');

             </script>

           seajs.use用来在页面中加载模块。

           // 加载模块 main,并在加载完成时,执行指定回调

                seajs.use('./main', function(main) {

                            main.init();

                 });

           use 方法还可以一次加载多个模块:

                // 并发加载模块 a 和模块 b,并在都加载完成时,执行指定回调

               //callback 参数可选,省略时,表示无需回调。

                  seajs.use(['./a', './b'], function(a, b) {

                              a.init();

                              b.init();

                    });

   3)  与 DOM ready 的关系

           注意:seajs.use 与 DOM ready 事件没有任何关系。如果某些操作要确保在 DOM ready 后执行,需要使用 jquery 等类库来保证,比如:

seajs.use(['jquery', './main'], function($, main) {

  $(document).ready(function() {

    main.init();

  });

             });

   4) sea.js 的引入

              在调用 seajs.use 之前,需要先引入 sea.js 文件,推荐直接使用 script 标签同步引入

              <script src="path/to/sea.js"></script>

7   最佳实践

     1)seajs.use 理论上只用于加载启动,不应该出现在 define 中的模块代码里。在模块代码里需要异步加载其他模块时,推荐使用 require.async 方法。

     2)引入 sea.js 时,可以把 sea.js 与其他文件打包在一起,可提前合并好,或利用 combo 服务动态合并。无论哪一种方式,为了让 sea.js 内部能快速

         获取到自身路径,推荐手动加上 id 属性:

         <script src="path/to/sea.js" id="seajsnode"></script

        加上 seajsnode 值,可以让 sea.js 直接获取到自身路径,而不需要通过其他机制去自动获取。这对性能和稳定性会有一定提升,推荐默认都加上


向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI