JS模块化4 - 05_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~

         

标签：function,exports,05,SeaJS,require,CMD,module3,module2,js
来源： https://www.cnblogs.com/sener/p/16576010.html