Seajs -- 路径

非 Y 不嫁゛ 提交于 2019-12-22 21:13:42

【推荐】2019 Java 开发者跳槽指南.pdf(吐血整理) >>>

关于路径

分为 相对 与 顶级 标识。以...开头,则为相对标识 。以小驼峰字符串开关,则为顶级标识。

// 假设 base 路径是:http://example.com/assets/

// 在模块代码里:
require.resolve('gallery/jquery/1.9.1/jquery');
  // => http://example.com/assets/gallery/jquery/1.9.1/jquery.js

Seajs除了相对与顶级标识之外,还可以使用普通路径来加载模块。

就到当前页面的脚本分析(可以右键查看源码)

//sea.js的路径,即 base 路径,相对于当前页面
<script src="http://yslove.net/actjs/assets/sea-modules/seajs/2.1.1/sj.js"></script>

<script type="text/javascript">
//配置Seajs
seajs.config({
    alias: {
        //顶级标识,基于 base 路径
        'actjs': 'actjs/core/0.0.7/core.js',
            // => http://
        'position': 'actjs/util/0.0.2/position.js'
    }
});

seajs.config({
    alias: {
        //普通路径,相对于当前页面
        'affix': '../../actjs/assets/widget/src/widget-affix.js',

        //相对标识,相对于当前页面
        'init': './src/init.js'
    }
});
</script>

开始的时候会觉得Seajs的路径有点不习惯,由其是Base路径。切记Base路径就是sea.js的那个文件的上级路径,然后所有顶级标识,相对标识都是相对于这个Base来调整。

 

 

任何一个模块的运行都涉及到两个步骤:模块定义 和 模块执行,上面的代码两个步骤都包括在内。而使用了 Sea.js ,我们不希望用户去手动写 script 标签引用模块。希望只需要 seajs.use 模块的文件路径即可(入口唯一):

seajs.use('path/to/module', function(Module) {
    // Module
});

Sea.js 会自动插入 script 标签,完成定义步骤,然后执行模块,拿到模块的输出。所以当一个文件里有多个 define 时,只能用 ID 是否匹配 use 中的路径来判断是否主模块。

当然可以回避掉这个原则,你只需要自己负责模块的定义部分,再自己 seajs.use 之前定义好的模块 ID 就行。

<!-- 各种模块的定义 define define define -->
<script src="http://example.com/modules.js"></script>

<script>
// 这时 use 的第一个参数就可以不必是文件路径了,因为已经有定义好的模块 ID 了
seajs.use('jquery', function($) {
    // $
});
</script>

或者通过 alias 来帮助 ID 匹配上最终的路径,这样就和 RequireJS 的方案基本一致了。

// lib/jquery-1.7.2.js 的内容如下
define('$', funtion(require, exports, module) {
  // jQuery
});

这样就不需要自己去引用上面的文件,可以直接通过 seajs.use 调用。

seajs.config({
  alias: {
    $: 'lib/jquery-1.7.2.js'
  }
});

seajs.use('$', function() {
  // Got $ !
});
标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!