资讯

精准传达 • 有效沟通

从品牌网站建设到网络营销策划,从策略到执行的一站式服务

Sea.js是一个模块加载器

1 模块定义define

10年积累的成都网站建设、做网站经验,可以快速应对客户对网站的新想法和需求。提供各种问题对应的解决方案。让选择我们的客户得到更好、更有力的网络服务。我虽然不认识你,你也不认识我。但先网站设计后付款的网站建设流程,更有曲周免费网站建设让你可以放心的选择与我们合作。

define(function(require,exports,module){

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

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

 

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

    exports.name = 'hi';

    exports.hi = function(){

        alert('hello');

    } 

    //module提供了模块信息

});

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

SeaJs Test

 

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 里,要启动模块系统很简单

           

           

           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 标签同步引入

             

7   最佳实践

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

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

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