模块化编程之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>

运行效果以下：编程