JS模块化4 - CMD-SeaJS

1.下载sea.js, 并引入(快过时了，不知还能不能下载到)

2. 创建项目结构

|-js

    |-libs

      |-sea.js

    |-modules

      |-module1.js

      |-module2.js

      |-module3.js

      |-module4.js

      |-main.js

  |-index.html

 

 

3. 定义sea.js的模块代码

 

module1.js

define(function (require, exports, module) {
    //内部变量数据
    let data = 'module1...'

    //内部函数
    function show() {
        console.log(data)
    }

    //向外暴露
    exports.show = show
})

 

module2.js

define(function (require, exports, module) {
    module.exports = {
        msg: 'module2 ...'
    }
})

 

module3.js

define(function (require, exports, module) {
    let msg = 'module3...'

    function f3() {
        console.log(msg)
    }

    exports.f3 = {f3}
})

 

module4.js

define(function (require, exports, module) {

    let msg = 'module4...'

    //引入依赖模块(同步)
    let module2 = require('./module2')
    console.log(module2.msg)

    //引入依赖模块(异步)
    require.async('./module3', function (module3) {
        console.log(module3.f3.f3())
    })

    function f4() {
        console.log(msg)
    }

    exports.f4 = f4

})

 

main.js

//主(入口)模块
define(function (require) {
    let m1 = require('./module1')
    m1.show()
    let m4 = require('./module4')
    m4.f4()
})

 

4. index.html:

<script type='text/javascript' src='js/libs/sea.js'></script>
<script type='text/javascript'>
    seajs.use('./js/modules/main.js');
</script>

 

 

 

end~