模塊化編程之CommonJS和AMD風格

時間 2019-11-11

標籤模塊化編程 commonjs amd 風格简体版

原文原文鏈接

平時工做中使用模塊化編程也有一段時間了，主要用到AMD和CommonJs兩種風格的模塊化編程。模塊化編程相對於傳統的js編程風格來講，傳統的js默認是沒有相似於java裏的class,package概念，引用多個JS容易形成污染全局變量、成員覆蓋及依賴混亂問題，爲了不此類問題，才衍生出模塊化編程。javascript

webpack、nodeJS支持CommonJs風格，CommonJs加載模塊是同步的，每一個JS文件都是一個模塊，都有本身的做用域。JS文件裏定義的變量、函數、類，都是私有的，對其它文件不可見。java

//hello.js

module.exports.hello=function() {
  console.log('Hello World!')
}
module.exports.sayHello=function(name){
    console.log('Hello' + name)
}

//main.js
var obj = require('./hello');
obj.hello()
obj.sayHello('kerry')

運行效果以下：node

CommonJS規範規定，每一個模塊內部，module變量表明當前模塊。這個變量是一個對象，它的exports屬性（即module.exports）是對外的接口。加載某個模塊，實際上是加載該模塊的module.exports屬性。webpack

AMD規範是非同步加載模塊，容許指定回調函數，AMD規範使用define方法定義模塊，瀏覽器端通常採用AMD規範，跟requier.js配合使用。 web

//hello.js
define([],function(){
    var obj = {};
    obj.hello = function(){
        console.log('Hello World!')
    }
    obj.sayHello = function(name){
        console.log('hello' + name)
    }
    return obj;
})

<body>
<script type="text/javascript" src="require.js"></script>
<script type="text/javascript">
    require(['hello.js'],function(obj){
        obj.hello();
        obj.sayHello('kerry')
    })
</script>
</body>