美文网首页
模块模式

模块模式

作者: lililifeng | 来源:发表于2017-02-26 12:54 被阅读0次

模块模式是JavaScript一种常用的编码模式。这是一般的理解,但也有一些高级应用没有得到很多关注。

匿名闭包

这是一切成为可能的基础,也是JavaScript最好的特性。我们将简单的创建匿名函数,并立即执行。所有函数内部代码都在闭包(closure)内。它提供了整个应用生命周期的私有和状态。

    (function () {
        // ... all vars and functions are in this scope only
        // still maintains access to all globals
    }());

注意匿名函数周围的()。这是语言的要求。关键字function一般认为是函数声明,包括()就是函数表达式。

引入全局

JavaScript有个特性,称为隐性全局。使用变量名称时,解释器会从作用域向后寻找变量声明。如果没找到,变量会被假定入全局(以后可以全局调用)。如果会被分配使用,在还不存在时全局创建它。这意味着在匿名函数里使用全局变量很简单。不幸的是,这会导致代码难以管理,文件中不容易区分(对人而言)哪个变量是全局的。

(function ($, BAIDU) {
        // 当前域有权限访问全局jQuery($)和BAIDU
}(jQuery, YAHOO));
模块出口

有时你不只想用全局变量,但你需要先声明他们(模块的全局调用)。我们用匿名函数的返回值,很容易输出他们。这样做就完成了基本的模块模式。以下是一个完整例子:

var MODULE = (function () {
        var my = {},
                privateVariable = 1;
        
        function privateMethod() {
                // ...
        }
        
        my.moduleProperty = 1;
        my.moduleMethod = function () {
                // ...
        };
        
        return my;
}());

注意,我们声明了一个全局模块MODULE,有两个公开属性:方法MODULE.moduleMethod和属性MODULE.moduleProperty。而且,匿名函数的闭包还维持了私有内部状态。同时学会之上的内容,我们就很容易引入需要的全局变量,和输出到全局变量。

相关文章

  • 前端设计模式

    模块模式 工厂模式 构造函数模式 混合模式 单例模式 发布订阅模式 模块模式 用于模块封装,用立即执行的函数嵌套一...

  • 《SPA设计与架构》之JavaScript模块化

    原文 博客原文 大纲 1、什么是模块?2、基本的模块模式3、模块模式概念4、模块结构5、揭示模式6、模块编程的意义...

  • 高级任务6-前端设计模式

    写出 构造函数模式、混合模式、模块模式、工厂模式、单例模式、发布订阅模式的范例 构造函数模式 混合模式 模块模式 ...

  • 前端设计模式

    写出 构造函数模式、混合模式、模块模式、工厂模式、单例模式、发布订阅模式的范例。 构造函数模式 混合模式 模块模式...

  • 前端设计模式

    写出 构造函数模式、混合模式、模块模式、工厂模式、单例模式、发布订阅模式的范例。 构造函数模式 混合模式 模块模式...

  • 高级6

    1、写出 构造函数模式、混合模式、模块模式、工厂模式、单例模式、发布订阅模式的范例。 构造函数: 混合模式: 模块...

  • 高级任务6---前端设计模式

    1、写出 构造函数模式、混合模式、模块模式、工厂模式、单例模式、发布订阅模式的范例。 构造函数模式 混合模式 模块...

  • 前端设计模式

    1.写出 构造函数模式、混合模式、模块模式、工厂模式、单例模式、发布订阅模式的范例。 工厂模式 模块模式 构造函数...

  • 前端设计模式

    1. 写出 构造函数模式、混合模式、模块模式、工厂模式、单例模式、发布订阅模式的范例。 模块模式var Perso...

  • 前端设计模式

    1.写出 构造函数模式、混合模式、模块模式、工厂模式、单例模式、发布订阅模式的范例。 构造函数模式混合模式模块模式...

网友评论

      本文标题:模块模式

      本文链接:https://www.haomeiwen.com/subject/zwuowttx.html