码迷,mamicode.com
首页 > Web开发 > 详细

模块化开发seaJS

时间:2016-10-01 10:33:14      阅读:215      评论:0      收藏:0      [点我收藏+]

标签:

1, 先下载seaJs, 然后在我们的项目中新建一个文件夹命名sea(名字可以随便取),把下载好的sea.js 文件拷贝到里面,最后在html文档中把用script标签引入即可使用。

技术分享

2, 在模块化中,一个js文件就是一个模块,js文件夹下所有js文件都是模块。当然把普通的js文件转换成模块,要做一下变化。用define()方法, 把js文件定义成模块。define方法接受一个函数作为参数,函数有三个参数,如下。

define(function(require,exports,module){
//    require  引入该模块的依赖;
//    exports  暴露出该模块的方法,对外提供接口;
//    module   指该模块本身;
//    注意,这两个参数名不能更改,且参数顺序也不能变。
    function show(){
        alert(1);
    }
    exports.show = show;
})

3, 如何在我们在html 文档中调用模块,用 seajs.use方法,它接受两个参数,一个是要引入的模块,一个是引入成功的回调函数。回调函数有一个参数,这个参数就指向我们引入的模块中的exports,因此可以用该参数使用模块暴露出来的方法。

<script>
    seajs.use("./js/module1.js", function(ex){
        // 注意文件路径,./ 表示当前html文档所在的文件夹
        ex.show();
        // ex参数指向该模块中的exports
    })
</script>

4,如果一个模块依赖另一个模块,那就要用到require参数,它接受一个参数,引入的模块的路径,返回值也是指向引入模块的exports, 因此可以通过返回值调用引入模块暴露出来的方法。 把上面2的模块更改一下,引入依赖。

define(function(require,exports,module){
//    require  引入该模块的依赖;
//    exports  暴露出该模块的方法,对外提供接口;
//    module   指该模块本身;
//    注意,这两个参数名不能更改,且参数顺序也不能变。

    var external = reqiure("./moudules3.js"); // 注意路径,前面什么都不要有,我当时就是有一个空格,写成了
var external = reqiure(" ./moudules3.js") 查错查了好久。
    function show(){
         alert(external.a);   
   }

   exports.show
= show; })

 

 技术分享

模块化开发seaJS

标签:

原文地址:http://www.cnblogs.com/SamWeb/p/5925435.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!