模块化开发之seajs

最新推荐文章于 2019-07-12 11:12:39 发布

原创最新推荐文章于 2019-07-12 11:12:39 发布 · 599 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#seajs #模块化

1、seajs的下载及配置

下载：由于seajs官网打不开，可百度搜索seajs下载，进行下载

配置：将下载后的sea.js文件添加到自己的网站目录下，如图：

2、seajs的引入

seajs的引入方式跟其他js文件的引入方式一样，通过<script>标签的src引入，如下图：

3、seajs的使用

（1）定义模块

seaJs 模块与模块之间可以存在依赖关系。

模块的编写方式如下：

module1.js文件

define(function( require, exports, module ){
    function show(){
        alert('module1-show');
    }
    //通过exports把show方法 提供给外部使用
    exports.show = show;
});

模块中引入模块，从下面的代码可以看出， module2的代码依赖module1.js中的代码

module2.js文件

define(function( require, exports, module ){
    //require("./module1.js")：引入第一个模块 相当于exports
    var show2 = require("./module1.js").show; //引入需要的模块（即相应js文件）
    show2();//调用
    
    //下面是module2.js自己的代码 与调用module1无关。
    function show(){
        alert('module2-show');
    }
    //通过exports把show方法 提供给外部使用
    exports.show = show;
});

（2）引用模块

编写方式：seajs.use('模块的路径', function(ex){});

例如，在index.html里引用

index.html文件