关于闭包

当函数执行完毕时，管理内存的本地方法会将函数中所有创建了的东西从内存中移除。因为函数已经执行完毕，所以我们似乎不再需要访问该执行内存中的任何东西了。

1
2
3
(function(){
    var prisoner = 'Jsoh';
    })();

一旦函数执行完成，prisoner变量就不再需要保存在内存中了。

1
2
3
4
5
6
7
8
var prison = (function(){
    var prisoner = 'Jsoh';

    return{prisoner:prisoner};
    })();

//"Jsoh"
console.log(prison.prisoner);

我们仍然不需要在匿名函数执行后访问prisoner变量。因为字符串Jsoh已经保存在prison.prisoner中，没有理由再在模块所在的内存中保存prisoner变量，因为它不用再被访问。prison.prisoner的值是字符串Jsoh，但是它不再指向prisoner变量。

1
2
3
4
5
6
7
8
9
10
11
12
var prison = (function(){
    var prisoner = 'Jsoh';

    return{
        prisoner:function(){
            return prisoner;
        }
    }
    })();

//"Jsoh"
console.log(prison.prisoner());

现在，每次执行prison.prisoner时都会访问prisoner变量。prison.prisoner()返回prisoner变量的当前值。如果垃圾回收器来把它从内存中移除了，调用prison.prisoner会返回undefined，而不是Jsoh。

所以什么是闭包？闭包是阻止垃圾回收器将变量从内存中移除的方法，使得在创建变量的执行环境的外面能够访问到该变量。当prisoner函数被保存到prison对象上时，一个闭包就创建了。闭包因保存函数而被创建，在执行函数的外面，可以动态访问prisoner的值，这就阻止了垃圾回收器将prisoner变量从内存中移除。

博客

阅读全文 >>

MVC设计模式

MVC：M(Model)–处理数据和业务逻辑 (例:Servlet)
V(View)–通过布局向用户展示数据 (例:JSP)
C(Controller)–接收用户请求并调用相应的模型处理 (例:JavaBean)

1
2
3
4
5
6
7
8
9
10
11
         HTTP请求                      请求参数选取合适的模型
      /------------------->\        /-------------------------->\
浏览器                     控制器 C                             模型 M
      \<-------------------/ <    | \<--------------------------/
                             \    |  原始数据(按控制器指令选取的)        
                             |    |
            返回处理后的数据  |    |  选取相应视图
                             |    |
                             |    /
                             |   <
                           视图 V
博客

JS变量提升

在JavaScript中，当变量被声明时，声明会被提升到它所在函数的顶部，并被赋予undefined值。这就使得在函数的任意位置声明的变量存在于整个函数中，尽管在赋值之前，它的值一直为undefined。
像这样：

1
2
3
4
5
function(){                             function(){
        console.log(v);           ------------> var v;
        var v = 1; ______________/              console.log(v);
                                 \------------> v = 1;
    }                                   }

左边和右边的函数是等价的。JavaScript的变量声明会被提升到它们所在函数的顶部，而初始化仍旧在原来的地方。

JavaScript引擎并没有重写代码：每次调用函数时，声明都会重新提升。

1
2
3
4
5
6
7
8
function prison(){
    //logs 'undefined'
    console.log(prisoner);
    var prisoner = 'Now I am defined';

    //logs 'Now I am define'
    console.log(prisoner);
}

博客

阅读全文 >>

双飞翼布局

双飞翼布局key:float和margin-left:-100%。实现效果：两边固定宽度的侧栏悬浮在两侧

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css" media="screen">
        *{
            margin: 0;
            padding: 0;
            font-family: "微软雅黑";
        }
        #main{
            background: blue;
            width: 100%;
            height: 500px;
            float: left;
        }
        aside{
            background: green;
        }
        #aside_left{
            width: 200px;
            height: 500px;
            float: left;
            margin-left: -100%;
        }
        #aside_right{
            width: 200px;
            height: 500px;
            float: left;
            margin-left: -200px;
        }
    </style>
</head>
<body>
    <main id="main">#main</main>
    <aside id="aside_left">#aside_left</aside>
    <aside id="aside_right">#aside_right</aside>
</body>
</html>

博客

两列布局

两列布局key:float和margin。实现效果：左栏固定宽度右栏自适应宽度

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css" media="screen">
        *{
            margin:0;
            padding:0;
            font-family:"微软雅黑";
        }
        #aside{
            width:200px;
            height:500px;
            background:green;
            float:left;
        }
        #main{
            height:500px;
            margin-left:203px;
            background:blue;
        }
    </style>
</head>
<body>
    <aside id="aside">#aside</aside>
    <main id="main">#main</main>
</body>
</html>

博客