javascript如何实现模块编程简单介绍

当前的网页已经越来越像应用程序，功能越来越复杂，需要引入的javascript代码也越来越多。

所以面对如此庞大javascript代码的使用，javascript模块化编程势在必行，最为理想的情形就是开发者实现核心的业务逻辑，引入其他开发者已经完成的程序模块即可。

基本概述:

当前流行的javascript版并不支持模块化编程，因为javascript并不支持类和模块，但是可以通过我们自己的努力来实现相同的效果。

特别说明:ES6已经新增类（class）和模块（module）。

下面就循序渐进，简单介绍一下如何实现javascript模块编程。

一.最为原生态写法:

模块就是能够实现指定功能的一个或者一组方法。

最为原始的一个模块就是将几个方法以及一些具有记录状态功能的变量放在一起。

代码实例如下:

function func1() {
  //code
}
function func2() {
  //code
}

但是上面代码的缺陷是明显的，因为在全局作用域下，那么非常容易发生名称冲突。

二.对象方式:

var module = new Object({
  _num : 0,
  func1 : function (){
　  //code
  },
  func2 : function (){
    //code
  }
});

上面的代码将方法作为对象的属性，降低了产生污染的可能性。

使用方式如下:

module.func1()

但是上面的方式缺陷还是非常明显的，内部的成员容易暴露，并且轻易可以被轻易重写。

代码如下:

module._num=8

三.匿名立即执行函数方式:

使用立即执行匿名函数可以避免上面的问题，代码如下:

var module = (function () {
  var _num = 0;
  var func1 = function () {
    //code
  };
  var func2 = function () {
    //code
  };
  return {
    func1: func1,
    func2: func2
  };
})();

将变量生命在匿名函数中，如果再使用module._num获取变量值，那就会报错了。

四.放大模式:

模块可以进行扩展，这就是所谓的放大模式，代码如下:

var module = (function (mod){
  mod.func = function () {
    //code
　};
  return mod;
})(module);

上面的代码为模块module添加了一个新的方法，然后返回新的模块。

在实际应用中，由于某些原因，可能造成无法传递预期的mod，那么我们可以设置一个默认值:

var module = (function (mod){
  mod.func = function () {
    //code
　};
  return mod;
})(module || {});

让空对象作为一个默认值。

五.输入全局变量:

独立性是模块的重要特点，模块内部最好不与程序的其他部分直接交互。

为了在模块内部调用全局变量，必须显式地将其他变量输入模块。

var module = (function ($, YAHOO) {
  //code
})(jQuery, YAHOO);

上面的module模块需要使用jQuery库和YUI库，就把这两个库（其实是两个模块）当作参数输入module。

javascript如何实现模块编程简单介绍，这样的场景在实际项目中还是用的比较多的，关于javascript如何实现模块编程简单介绍就介绍到这了。

javascript如何实现模块编程简单介绍属于前端实例代码，有关更多实例代码大家可以查看。

本文地址： http://www.zzsi.net/code/web/98716.html

本站部分资源来源与网络，仅供学习参考使用，请勿商用，如侵犯了您的权益，请联系我们删除。