無標題文檔

闭包的秘密

Javascript 中的闭包其实很改语言中很难理解的一部分。 感谢 Stuart 提供了那么棒的 PPT ,它深入浅出的解释了 Javascript 的闭包技术。

而我「自作主张」地在这份 PPT 中加入了部分的注释(希望没有影响阅读),主要的内容在这里简要整理下。

闭包的概念

「官方」的解释

「闭包」,是指拥有多个变量和绑定了这些变量的环境的
表达式(通常是一个函数),因而这些变量也是该表达式
的一部分。

但不要咬文嚼字,我们简单的可以理解为

闭包是个函数,而它「记住了周围发生了什么」。表现为由「一个函数」体中定义了「另个函数」
function outer () {
    ...
    function inner () {
        ...
    }
}

闭包的作用

  1. setTimeout/setInterval
  2. 回调函数(callback)
  3. 事件句柄(event handle)

模块化代码

function Container(param) {
    var sercert = 3;
    this.member = param;
    var that    = this; // 注意这行

    function dec() {
        return (sercert > 0) ? --secret : false;
    }

    this.service = function() {
        return (dec()) ? that.member : null;
    }
}

其中 dec 为私有,that 变量引用 Container 同时 service 函数构成了个闭包。

注意 Exploer 下闭包的「特殊情况」

  1. 循环问题
  2. 垃圾回收

最后,PPT 可以 在这里下载 ,同时需要进一步有关闭包的信息,为之漫笔翻译了份很 详实的文档 ,强烈建议看下。

import vs link

对于 CSS 的载入方式,在这里咬文嚼字下。这篇主要探讨 CSS 的两种载入方式:@import 和 link 元素间的差异。

link 是在 (X)HTML 文档中的语义是「 页面资源 」(当然也会包括 CSS),而 @import 只是 CSS2.1 的语句。

使用 @import 可以使各 CSS 文件间相互嵌套。在 Explorer5.x 时代, 同时也是浏览器间判断是否支持 CSS2.1 的一个方法

其实,我们最关注的是 @import 和 link 两种不同的 CSS 载入方式的性能问题。先写了两个简单的脚本,让 CSS 文件延时 5 中载入,可以在各浏览器下看看结果 使用 @import 使用 link

可以看见,Exploer 系列在使用 @import 方式时,会先载入文档,然后再载入样式;而在其他浏览器以及其他情况下,都需要等待样式载入完毕以后统一渲染。

总结下我个人的看法。我个人倾向于使用 link 方式,主要是下面的几个原因

  1. CSS 文件也是页面资源的一部分(更佳的语义)
  2. 没有各浏览器间的载入分歧
  3. 便于 Javascript 操作(link 是 HTML 结构的一部分,而 @import 载入的只能操作 style 节点)

当然,应用 @import 的场合也很多,比如在无法更改页面结构、或者是需要统一的 CSS 入口的情况下等。

参考阅读

我的栅格系统实现

https://friable.rocks/_/2009_11_05/25552637224d.jpg

如果没有了解栅格系统是什么,建议 看完这篇文章 以后再回来。

其实有很种 CSS 写法实现栅格系统,很多 CSS 库也都会提供类似的栅格系统实现(譬如: YUIBluePrint )。

引用 One True Layout 文中所言,良好的布局应该具有的几个特性:

  1. 具有一定的灵活性
  2. 等高
  3. 基于栅格

请允许我「重复造了轮子」,我的栅格系统实现是基于 「伪绝对定位布局」 ,这样可以更好的实现上述所言的几个特征(很难解释,还是直接看 DEMO )。

http://friable.rocks/grids/index.html 定义的 950px 宽度为公式 W )

column-24 start-01

因为是上述「伪绝对定位」的布局,所以相应列之间不会相互影响。而理解上述布局可能需要些时间,同时感谢师兄那么详细的讲解,我相信也会给你带来收获。

另, 感谢 Missx 提供栅格标准

  1. 黄金分割标准:右边的大小一般是左边大小的黄金比例
  2. 平分:在1024的分辨率下,一般采用330左右的分割
  3. 两栏分割:左边660 右边260左右
  4. 三栏分割:左边是200左右 中间400左右 右边300左右
  5. 三栏分割:右边两栏之和是左边的0.618
  6. 三栏分割:中间180 两边分别为380左右

很难具体的解释其中的细节,但是希望有问题的朋友能够留言,我尽量帮你解答。

我的照片

嗨!我叫「明城」,八零后、码农、宁波佬,现居杭州。除了这里,同时也欢迎您关注我的 GitHubTwitterInstagram 等。

这个 Blog 原先的名字叫 Gracecode.com 、现在叫 「無標題文檔」 。 要知道作为码农取名是件很难的事情,所以不想在取名这事情上太费心思。

作为八零后,自认为还仅存点点可能不怎么被理解的幽默感,以及对平淡生活的追求和向往。 为了避免不必要的麻烦,声明本站所输出的内容以及观点仅代表个人,不代表自己所服务公司或组织的任何立场。

如果您想联系我,可以发我邮件 `echo bWluZ2NoZW5nQG91dGxvb2suY29tCg== | base64 -d`

分类

搜索

文章