2017

August

JavaScript 颇让费解的东西 this 为何出现呢，机制是提供更优雅的方式来隐式地“传递”一个对象引用。对于 this 的很多误解和使用，建议收看 You-Dont-Know-JS。本文主要是在它的基础上整合的内容。

每个函数在被调用时都会自动取得两个特殊的变量: this 和 arguments。需要说明的是，this 不是编写时绑定，而是运行时绑定。它依赖于函数调用的上下文条件。this 绑定与函数声明的位置没有任何关系，而与函数被调用的方式紧密相连。

August 16 , 2017 JavaScript  阅读全文

在《图解 HTTP》书中，我们了解到为什么需要使用到安全的 HTTPS 通信。

  • 通信使用明文会被窃听。所以进行加密处理防止被窃听，通过 SSL(Secure Socket Layer，安全套接层) 或 TLS(Transport Layer Security，安全层传输协议)组合使用，加密 HTTP 通信内容。
  • 通信方的身份可能遭遇伪装，HTTP 协议中的请求和响应不会对通信方进行确认。这个由 SSL 提供的数字证书来解决。
  • 无法确认报文的完整性。

August 16 , 2017 Performance  阅读全文

Web 缓存有很多种，比如数据库缓存、代理服务器缓存、CDN 缓存，以及浏览器缓存。

浏览器缓存指的是将缓存文件保存在客户端，一般是通过 HTTP 进行缓存。

August 15 , 2017 Performance  阅读全文

Web Worker 的引入是因为 JavaScript 的单线程问题，使大计算量的问题会造成页面阻塞。为此，HTML 5 制订了 Web Worker 标准，通过创建工作线程来进行计算。

Web Workers 一般说来分为三类：

  • Dedicated workers: 专用 workers，Dedicated workers 只能被创建它的 JavaScript 所调用。它们是专门为某个特定的页面服务的，不能在页面中共享。
  • Shared workers: 共享 workers，Shared worker 可以多个浏览器上下文中调用，所有这些浏览器上下文必须同源(相同的协议，主机和端口号)。
  • Service workers

August 14 , 2017 DOM  阅读全文

July

    REST is a set of architectural constraints that aid you when developing an API over HTTP. – Nicolas Bevacqua «JavaScript Application Design-A build first approach»

    REST: Resource Representational State Transfer。采用正译，叫资源表征状态转移。挨个理解:

    • Resource : 资源，也就是data(数据)。需要说明的是，资源的表征方式不是一个具体的物理文件，而是特定的格式类型。在HTTP中，由content-type描述。每一份资源都有特定的URL来标识。
    • Representational: 指的就是资源的表征形式。比如，json、xml、jpeg等等
    • State Transfer: 状态转移，即通过HTTP谓词来实现资源的状态变化。参考阮一峰的文章，他说。HTTP是一个无状态协议。这意味着，所有的状态都保存在服务器端。因此，如果客户端想要操作服务器，必须通过某种手段，让服务器端发生”状态转化”。而这种手段，就是HTTP谓词。这种转化是建立在表现层之上的，所以就是”表现层状态转化”。

    有人总结了下面这句话来描述REST：

    URL定位资源，使用HTTP谓词来描述操作。

    July 29 , 2017 Node  阅读全文

    BFC(Block Formatting Context)，中文译成 “块级格式上下文”。标准解释:

    Floats, absolutely positioned elements, block containers (such as inline-blocks, table-cells, and table-captions) that are not block boxes, and block boxes with ‘overflow’ other than ‘visible’ (except when that value has been propagated to the viewport) establish new block formatting contexts for their contents. – w3c

    首先，我们要理解什么是 block boxes(块盒子)。block boxes 和块级元素是不一致的。

    标准中，是这样阐述的。每个 block-level element (块级元素) 产生 block-level box (块级盒)。block-level boxes 是参与到 BFC 的盒子。除了 table boxes，block-level box 也是 block container box (块容器盒)，block container box 要么包含 block-level boxes，要么创建 IFC 从而包含 inline-level box。并非所有的 block container boxes 是 block-level boxes。block-level boxes，同时也是 block containers 的就是 block boxes。好绕！标准就是这么绕人的。

    所以，我们理解: 浮动的、绝对定位的元素和块容器(比如 inline-blocks, table-cells 这些)都不是 block boxes，block boxes 是那些 overflow 不是 visible 的，两者共同为它们的内容创建了一个 BFC。

    Formatting Context 是 W3C CSS2.1 规范中的一个概念它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。最常见的 Formatting context 有 BFC 和 Inline formatting context (简称 IFC)。CSS3 还增加了 GFC 和 FFC。

    July 23 , 2017 CSS  阅读全文

    做好基本总结，对于每一个程序员来讲都是重要的。最近看到一篇文章，文中说。

    前端工程师要忘记前端二字。

    我深为折服，也颇为赞同。程序员所面临的无非是一个个问题，所做的也是解决一个一个难题。所谓语言、框架、工具、策略都是为了解决问题而服务的。很多人觉得JavaScript只能做一些写写脚本这一类前端的事，如果单纯这样去考虑，眼光未免太狭隘了。JavaScript大有所为，只有你想不到的，没有你做不到的，只有开拓语言的新应用范围，才能做到创造力，而不是单纯的紧跟时代所趋或追求于所谓的再创造力。

    周杰伦有一次接受采访，说，我从不关心流行，我创造流行(有待考据)。盲目去追求时代热潮也是不可取的，但这并不意味你要固步自封。良好的知识储备是必要的，是一切发展的基石。所以，不要看我们是前端程序员，算法、数据库、编译原理、操作系统等都应该具备。

    所以，勉励自己。

    July 20 , 2017 Interview  阅读全文

    布局中的两栏和三栏布局还是面试当中常考的一个点。其一是如何有多种方案，其二如果还要考虑优先加载内容区域呢。

    所以，这里总结的是这么四种情况，其中优先加载内容区域也是两栏、三栏布局中的一员。

    July 16 , 2017 CSS  阅读全文