zoukankan      html  css  js  c++  java
  • 模块化编程之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>

    运行效果如下:

  • 相关阅读:
    关于生产库的表空间是否自己主动扩展的看法?
    Hive创建外部表以及分区
    oninput,onpropertychange,onchange的使用方法和差别
    cacti
    java实现第五届蓝桥杯殖民地
    java实现第五届蓝桥杯殖民地
    java实现第五届蓝桥杯殖民地
    java实现第五届蓝桥杯殖民地
    java实现第五届蓝桥杯殖民地
    java实现第五届蓝桥杯LOG大侠
  • 原文地址:https://www.cnblogs.com/kerry-xu/p/6361160.html
Copyright © 2011-2022 走看看