JavaScript设计模式--Moudule模块模式

106 阅读2分钟

持续创作,加速成长!这是我参与「掘金日新计划 · 6 月更文挑战」的第30天,点击查看活动详情

模块化

模块化是应用程序架构中不可或缺的一部分,通常我们用来分割系统的和组织项目的单元,在JavaScript中模块实现的方法分为几种

Module ·对象字面量表示法 ·Module模式 ·AMD模式 ·CommonJs模块

Module

Module模式最初被定义为软件工程中提供私有和公有封装的方法,Module通过模拟类的概念,能够使一个单独的对象拥有私有方法和变量,从而降低在全局产生冲突的可能性。Module使用闭包封装混合公有/私有方法和变量,防止泄漏到全局作用域中,只返回一个API,将其他一切维持在闭包中,只暴露出一个接口,返回一个对象或者说是一个立即调用的函数表达式

实例

var test = (function(){
    var counter = 0
    return{
        addCounter:function(){
            return ++counter
        },
        resetCounter:function(){
            counter = 0
        }
    }
})()
console.log(test.addCounter())//1
console.log(test.addCounter())//2
console.log(addCounter()) //not defined
console.log(counter) //not defined

从上面实例可以看出无法直接调用addCounter,也无法访问counter变量,实际上是与全局作用域隔离掉了,表现的像一个私有变量,唯一能访问的只有当前的闭包。因为counter只存在于闭包作用域中,而不是存在于返回的公有对象中。

优点

1.只有模块能享受私有函数的自由,只暴露我们的API,而不会暴露其他部分 2.函数已经声明并且命名,但抛错出现异常的时候查错更加容易

引入混入

模式的变化演示了全局变量传递给模块的匿名函数,比如我们常用的JQ中,是如何引入到我们的模块中进行使用的


//全局
var myModule = (function(JQ){
    function private1(){
        JQ(".container").html("test")
        
    }
    return {
        publicMethod:function(){
            private1()
        }
    }
})(JQ)

在末尾的函数执行时候,我们可以将需要用到的参数进行传入,比如内部需要用到JQ的方法,我们可以将JQ传入到函数里面进行执行

引出方法

//全局
var myModule = (function(){
    var module = {}
    function private1(){
        
    }
   module.a = 'aaa'
   module.aa = function(){
       console.log(222)
   }
   retrun module
})()

引出方法的变化允许声明全局变量,并且可以先声明一个空对象,后面再根据需要按需进行放回,声明之后我们可以往其中添加我们想要加入的变量或者是函数等操作