模块化编程之CommonJS和AMD风格
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了模块化编程之CommonJS和AMD风格相关的知识，希望对你有一定的参考价值。
平时工作中使用模块化编程也有一段时间了，主要用到AMD和CommonJs两种风格的模块化编程。模块化编程相对于传统的js编程风格来说，传统的js默认是没有类似于java里的class,package概念，引用多个JS容易造成污染全局变量、成员覆盖及依赖混乱问题，为了避免此类问题，才衍生出模块化编程。
webpack、nodeJS支持CommonJs风格，CommonJs加载模块是同步的，每个JS文件都是一个模块，都有自己的作用域。JS文件里定义的变量、函数、类，都是私有的，对其它文件不可见。
//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‘)
运行效果如下：
CommonJS规范规定，每个模块内部，module变量代表当前模块。这个变量是一个对象，它的exports属性（即module.exports）是对外的接口。加载某个模块，其实是加载该模块的module.exports属性。
AMD规范是非同步加载模块，允许指定回调函数，AMD规范使用define方法定义模块，浏览器端一般采用AMD规范，跟requier.js配合使用。
//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>
运行效果如下：
以上是关于模块化编程之CommonJS和AMD风格的主要内容，如果未能解决你的问题，请参考以下文章