美文网首页
使用函数和闭包去构建JavaScript模块

使用函数和闭包去构建JavaScript模块

作者: LuckyJing | 来源:发表于2015-09-05 16:42 被阅读39次

引言:全局变量是魔鬼,我们最好不要与它打交道;
使用闭包的好处是让函数自我管理,通过现有函数生成(return)新的更加实用的函数(闭包返回匿名函数)。

现在我们需要写一个函数,它的功能是将字符串中的HTML实体(例如<>)转换为相应的字符,输入是一个字符串,输出是一个新的字符串。我们可以很容易想到,创建一个字符映射表,根据正则表达式依次替换就可以了。思路很简单,我们尝试一下。

方案一

var entity = {
            quot: '"',
            lt:'<',
            gt:'>'
        };
var deentityify = function(str){
            return str.replace(/&([^&;]+);/g,function(a,b){
            var r = entity[b];
            return typeof r ==='string' ? r : a;
        });
};
deentityify('>');//output  >

在全局作用域内生成了一个映射表entity,再在全局作用域内声明了函数实体,最后调用它,虽然能达到目的,但是的确不是好的结构风格,毕竟放那么多变量在全局作用域内,到最后是非常难以维护的。

方案二

var deentityify1 = function(str){
 //在函数内部声明了entity映射表,确保外界无法访问,避免污染
        var entity = {
            quot: '"',
            lt:'<',
            gt:'>'
        };
        return str.replace(/&([^&;]+);/g,function(a,b){
            var r = entity[b];
            return typeof r ==='string' ? r : a;
        });
    };

方案二将entity移动到了函数体内部,这样做可以避免一部分污染,可是我们仔细想一想,在这个函数调用结束之后,entity没有被任何变量所引用,所以它将会被回收,问题来了,在我大量调用这个函数时,将会伴随着entity的多次创建和回收。

方案三-使用闭包

var deentityify2 = function(){
        var entity = {
            quot: '"',
            lt:'<',
            gt:'>'
        };
        return function(str){
            if(str !== undefined){
                return str.replace(/&([^&;]+);/g,function(a,b){
                        var r = entity[b];
                        return typeof r ==='string' ? r : a;
                        }); 
            }else{
                return '请输入参数';
            }
        };
    }();//deentityify2函数实际上得到的是这个匿名函数的返回值

在创建这个函数时,加上()调用操作符来立即调用,本来entity应该在这个函数结束后被回收的,因为闭包的产生,使一个全局函数deentityify2通过引用一个匿名函数从而引用了entity,导致它并不会被回收,entity作为私有变量,只能通过特权函数deentityify2去访问,实现了信息隐藏。

相关文章

  • 使用函数和闭包去构建JavaScript模块

    引言:全局变量是魔鬼,我们最好不要与它打交道;使用闭包的好处是让函数自我管理,通过现有函数生成(return)新的...

  • Python : 闭包Closures

    闭包 Closures 是由另外一个函数返回的函数.使用闭包去除重复代码.

  • js 代码模块化

    JavaScript代码模块化 隐藏模块内部实现 定义模块接口 解决依赖关系 利用对象、闭包和立即执行函数实现模块...

  • JavaScript - 使用options objects构建

    JavaScript - 使用options objects构建函数 在JavaScript语言中,options...

  • Javascript技术栈梳理

    javascript语言: 基础知识 对象 原型, 原型链继承 闭包, 作用域 数组 函数 类和模块 正则表达式 ...

  • JS-Object-创建对象实例

    1、使用构建函数 这个构建函数是 JavaScript 版本的类。您会发现,它只定义了对象的属性和方法,除了没有明...

  • 模块

    记录下 commonjs模块和es6模块的使用方法 commonjs模块 Node内部提供一个Module构建函数...

  • 前端笔试题(工程进阶)

    1.什么是闭包, 如何使用它, 为何要使用它? 闭包就是能够读取其他函数内部变量的函数。由于在Javascript...

  • JavaScript模块化-require.js,r.js和打包

    在JavaScript模块化和闭包和JavaScript-Module-Pattern-In-Depth这两篇文章...

  • 前端工程的问题

    在JavaScript模块化和闭包和JavaScript-Module-Pattern-In-Depth这两篇文章...

网友评论

      本文标题:使用函数和闭包去构建JavaScript模块

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