码迷,mamicode.com
首页 > Web开发 > 详细

模块化编程之CommonJS和AMD风格

时间:2017-02-02 14:44:43      阅读:283      评论:0      收藏:0      [点我收藏+]

标签:时间   rip   mon   common   相对   接口   javascrip   amd   class   

平时工作中使用模块化编程也有一段时间了,主要用到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风格

标签:时间   rip   mon   common   相对   接口   javascrip   amd   class   

原文地址:http://www.cnblogs.com/kerry-xu/p/6361160.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!