JavaScript模块化和闭包

来源：互联网发布：淘宝乐优软件好用吗编辑：程序博客网时间：2024/06/06 20:20

JS模块化和闭包

js最初作为一个在浏览器中运行的脚本语言，设计的目标是用来给html增加交互行为，早期的网站都是在服务器端生成并返回给浏览器，js也只对单独的一个html进行操作，所以模块化并没有在早期的JS中得到很好的考虑，随着浏览器js引擎越发的快速，现在已经有很多前端框架，并不依赖与服务器生成html，而是自己直接通过js来生成，最典型的例子就是我们常听到的webapp。现在所有的js库都包装的非常好了，我们今天看看一些js模块化的基础知识吧。

名称空间namespace

在js中如何实现命名空间，我们来看一个例子。

<!DOCTYPE html>  <html>    <meta http-equiv="content-type" content="text/html;charset=utf-8">    <body>    <button id="mybtn" onclick="display();">点我加载列表</button>    <h1>我想要不死族的英雄</h1>    <ul id="mylist"></ul>       <script type="text/javascript" src="./namespacejs1.js"></script>        <script type="text/javascript" src="./namespacejs2.js"></script>        </body>  </html>

我们先定义一个html文件。点击里面的按钮，显示魔兽争霸的军队。响应按钮的代码分别定义在namespacejs1.js和namespacejs2.js两个文件中。
这是namespacejs1.js

var list = ['死亡骑士','巫妖','恐惧魔王'];function display(){    var mylist = document.getElementById("mylist"),     fragment = document.createDocumentFragment(),     element;     for(var i = 0, x = list.length; i<x; i++){         element = document.createElement("li");         element.appendChild( document.createTextNode( list[i]) );         fragment.appendChild(element);     }    console.log(importGlobalVariable);    mylist.appendChild(fragment);}

这是namespacejs2.js

var list = ['圣骑士','大法师','山丘之王'];

当我们点击按钮的时候，会显示什么东东呢。我们期望显示不死族的英雄（namespacejs1.js中的list），但是这里会显示人类的英雄（namespacejs2.js中的list）。显然，我们想要的数据被覆盖了。怎么样才能解决这个问题呢？我们来加上名称空间吧。看看改进后的namespacejs1.js。

var namespace1 = {    list : ['死亡骑士','巫妖','恐惧魔王'],    display : function display(){        var mylist = document.getElementById("mylist"),         fragment = document.createDocumentFragment(),         element;         for(var i = 0, x = list.length; i<x; i++){             element = document.createElement("li");             element.appendChild( document.createTextNode( this.list[i]) );             fragment.appendChild(element);         }        mylist.appendChild(fragment);    }};

这时候点击按钮会没有用，需要稍微改动一下

<button id="mybtn" onclick="namespace1.display();">点我加载列表</button>

可以看到display在namespace1的名称空间下面了。问题已经圆满解决。但是如果我们想扩展namespace1的功能怎么办呢，难道只能修改namespace1.js的源文件吗，还有list很不安全啊，谁都可以改动它，如何把它变成私有变量呢？

js的封装

在js中并没有私有公有的直接支持，但是不代表js语言不能完成这个。我们看一下如何隐藏list。

var namespace1 = (function(){    var importGlobalVariable = gv;    var list = ['死亡骑士','巫妖','恐惧魔王'];    function display(){        var mylist = document.getElementById("mylist"),         fragment = document.createDocumentFragment(),         element;         for(var i = 0, x = list.length; i<x; i++){             element = document.createElement("li");             element.appendChild( document.createTextNode( list[i]) );             fragment.appendChild(element);         }        mylist.appendChild(fragment);    }    return {        display:display    };})();

这段代码返回了一个对象，在这个对象中我们只能访问display方法,是不是很牛逼呢，这样就解决隐藏问题。

js模块的扩展

我们知道js的继承是用原型链来实现的，但是这里要讨论的是模块的扩展，所以这边不会说道继承的问题。如何扩展namespace1的功能呢。我么看一下下面的代码。

var namespace1 = (function(n1){    var listArmy = ['4个蜘蛛','2个食尸鬼','2个冰龙']    n1.displayArmy = function(){        n1.display();        var mylist = document.getElementById("mylist"),             fragment = document.createDocumentFragment(),             element;         for(var i = 0, x = listArmy.length; i<x; i++){             element = document.createElement("li");             element.appendChild( document.createTextNode( listArmy[i]) );             fragment.appendChild(element);         }        mylist.appendChild(fragment);    }    return n1;})(namespace1);

这段代码我们用来增加一个displayArmy的方法，用来显示不死族军队，也就是listArmy的数据吧。
我们看到上面的代码把namespace1作为参数传入到一个立刻调用函数中，这样在里面给它增加一个函数。有没有感觉js很强大啊。

闭包（Closures）

如果已经习惯了C，C++，C#或者Java，那么上面的实现简直匪夷所思，感觉变量的作用域和生命周期都很奇怪。那么我们说说js中的一个重要概念闭包吧。

定义

Closures are functions that refer to independent (free) variables.
这里就不翻译了，因为翻译过来实在是很奇怪，比如，闭包是那些引用了独立变量的函数。那么按照定义是否可以认为函数就是闭包呢，为了搞清楚闭包的概念，我们需要了解函数对象，变量生命周期，和嵌套的作用域三个概念。

函数对象

什么是函数对象呢，在C语言中和C++语言中，可以想函数那样用()去调用，看起来和函数一样的对象就叫函数对象。比如在C语言中：

typedef void (*func_t)(int); //定义函数指针//定义一个函数void f(int n){    printf("node(?)=%d\n",n);}int main(){    func_t pf = f;    f(1);}

可以看到f很像一个函数吧，但是呢，其实它只是一个函数指针而已。在C++语言中，我们也看一个例子。

class Foreach{private:    struct node * myList;public:    Foreach(){    }    ~Foreach(){}    void operator()(){        //做点有意义的事情吧    }};int main(){    Foreach *foreach = new Foreach();    (*foreach)();}

可以看到foreach对象也很像函数。
我们在看一下js中的函数对象吧。

var f = function(){}；f();

看看，是不是很简单。

嵌套的作用域

我们已经看到js的函数对象的定义已经很方便了，那么还有什么和传统语言不一样的地方呢？
我们看一下这个代码。

var x = 10;function f(){    var y=15;    function g(){        var z=25;        alert(x+y+z);    }    g();}f();//显示50

这段代码在C语言中没法实现，原因是C语言的变量无法访问当前作用域外的变量。也就是说函数g里面访问不了y，函数f也访问不了x。但是js却能做到。我们看一下这样有什么强大的地方。

#include <stdio.h>#include <stdlib.h>struct node{    struct node *next;    int val;};// 函数指针，JS中的函数对象typedef void (*func_t)(int); void foreach(struct node *list, func_t func){    while(list){        func(list->val);        list = list->next;    }}void f(int n){    printf("node(?)=%d\n",n);}int main(){    func_t pf = f;    f(1);    // bool b = false;    // b = true;    // b = "zifuchuan";    struct node * list = 0, *l;    int i;    for(i=0; i<4; i++){        l = malloc(sizeof(struct node));        l->val = i;        l->next = list;        list = l;    }    i=0;l=list;    //这个循环可以打印出index，也就是i，如下是打印结果    //node(0) = 3    //node(1) = 2    //node(2) = 1    //node(3) = 0    while(l){        printf("node(%d) = %d\n", i++, l->val);        l = l->next;    }    //foreach里面再调用函数f，就不能访问i了，如下是打印结果    //node(?)=3    //node(?)=2    //node(?)=1    //node(?)=0    foreach(list,f);}

我们看到C语言的高阶函数（函数调用函数）是没法访问外部变量的。那么js写这段代码怎么弄呢？

function foreach(list, func){    while(list){        func(list.val);        list=list.next;    }}var i = 0;//这里可以使用变量iforeach(list,function(n){    console.log("node("+ i +") = " +n);    i++;});

我们发现js的变量作用域比C语言要牛逼一点吧。

生命周期

下面再看看js闭包的更牛逼的地方吧。

function extent(){    var n=0;    return function (){        n++;        console.log("n="+n);    }}f = extent();f();//=>n=1f();//=>n=2

这里，当extent函数执行完毕后，n变量应该挂了才对，但是，我们通过结果看到，n变量还活的好好的呢。

总结

属于外部作用域的局部变量，被函数对象给“封闭”在里面了。闭包（“closure”）这个词原本就是封闭的意思。被封闭起来的变量的寿命，与封闭它的函数对象的寿命相等。也就是说，当封闭这个变量的函数对象不再被访问，被垃圾回收器回收掉时，这个变量才挂。
现在大家明白闭包的定义了吧。在函数对象中，将局部变量封闭起来的结构被叫做闭包。因此，C语言的函数指针并不是闭包，JavaScript中的函数对象才是闭包。另外C++等传统面向对象语言，也加入了对函数式编程的支持，其中一方面就是Lambda表达式，也有闭包的概念。

全局变量的导入

现在大家理解闭包的概念了，我们看看全局变量导入的问题。因为闭包中内部变量会一直持有外部变量，所以我们最好把外部变量当做参数传递给我们要使用的内部函数，这样会节省内存和查找变量的时间。因为找到一个外部变量，需要从内部往外部一层层的查找，很费时间（对解析器来说）。另外，一起开发代码的人也会很迷惑这个变量到底在那里定义的，容易出错，我们来看一个例子。

var globalVariable = "我是外层变量,从disply函数找到我需要很久很久";var namespace1 = (function(gv){    var importGlobalVariable = gv;    var list = ['死亡骑士','巫妖','恐惧魔王'];    function display(){        var mylist = document.getElementById("mylist"),         fragment = document.createDocumentFragment(),         element;         for(var i = 0, x = list.length; i<x; i++){             element = document.createElement("li");             element.appendChild( document.createTextNode( list[i]) );             fragment.appendChild(element);         }        console.log(importGlobalVariable);        mylist.appendChild(fragment);    }    return {        display:display    };})(globalVariable);

这个例子把globalVariable当成参数传入，这样他就在匿名function函数的作用域里面了。

阅读全文

0 0