全面解析JavaScript Module模式
编程学习 2021-07-04 14:06www.dzhlxh.cn编程入门
这篇文章主要介绍了JavaScript Module模式的相关资料,文中讲解非常细致,代码帮助大家更好的理解和学习,感兴趣的朋友可以了解下
简介
Module模式是JavaScript编程中一个非常通用的模式,一般情况下,大家都知道基本用法,本文尝试着给大家更多该模式的高级使用方式。
首先我们来看看Module模式的基本特征:
- 模块化,可重用
- 封装了变量和function,和全局的namaspace不接触,松耦合
- 只暴露可用public的方法,其它私有方法全部隐藏
关于Module模式,最早是由YUI的成员Eric Miraglia在4年前提出了这个概念,我们将从一个简单的例子来解释一下基本的用法(如果你已经非常熟悉了,请忽略这一节)。
基本用法
先看一下最简单的一个实现,代码如下:
var Calculator = function (eq) { //这里可以声明私有成员 var eqCtl = document.getElementById(eq); return { // 暴露公开的成员 add: function (x, y) { var val = x + y; eqCtl.innerHTML = val; } }; };
我们可以通过如下的方式来调用:
var calculator = new Calculator('eq'); calculator.add(2, 2);
大家可能看到了,每次用的时候都要new一下,也就是说每个实例在内存里都是一份copy,如果你不需要传参数或者没有一些特殊苛刻的要求的话,我们可以在最后一个}后面加上一个括号,来达到自执行的目的,这样该实例在内存中只会存在一份copy,不过在展示他的优点之前,我们还是先来看看这个模式的基本使用方法吧。
匿名闭包
匿名闭包是让一切成为可能的基础,而这也是JavaScript最好的特性,我们来创建一个最简单的闭包函数,函数内部的代码一直存在于闭包内,在整个运行周期内,该闭包都保证了内部的代码处于私有状态。
(function () { // ... 所有的变量和function都在这里声明,并且作用域也只能在这个匿名闭包里 // ...但是这里的代码依然可以访问外部全局的对象 }());
注意,匿名函数后面的括号,这是JavaScript语言所要求的,因为如果你不声明的话,JavaScript解释器默认是声明一个function函数,有括号,就是创建一个函数表达式,也就是自执行,用的时候不用和上面那样在new了,当然你也可以这样来声明:
(function () {/* 内部代码 *