JS August 01, 2018

使用 Intersection Observer 实现图片延迟加载

Words count 3.6k Reading time 3 mins.

延迟加载图片的目的在于,在发出对应的网络请求之前你要一直等到用户滚动页面让图片进入可见区域。如果你的网页包括了多张图片,但你只在每张图片滚动到视区时才加载,你将最终会节省带宽并确保你的网页加载的更快...

Read article

JS August 01, 2018

使用 Intersection Observer 实现图片延迟加载

Words count 3.6k Reading time 3 mins.

延迟加载图片的目的在于,在发出对应的网络请求之前你要一直等到用户滚动页面让图片进入可见区域。如果你的网页包括了多张图片,但你只在每张图片滚动到视区时才加载,你将最终会节省带宽并确保你的网页加载的更快。

为了让你在实际中了解这一点,让我们想象下面这个页面,他有三张图片。

如果用户访问页面时仅看到了第一张图,我们并不想加载网页底部的比萨图片,除非用户向下滚动直到图片真正进入视区。如果我们延迟加载图片,这意味着用户只在他们需要时下载他们需要的东西,这让你的网页更加精简。

对于更有经验的开发者,你也...

Read article

JS July 25, 2018

JavaScript模块化 --- Commonjs、AMD、CMD、ES6 modules

Words count 9.4k Reading time 9 mins.

随着前端js代码复杂度的提高,JavaScript模块化这个概念便被提出来,前端社区也不断地实现前端模块化,直到es6对其进行了规范,下面就介绍JavaScript模块化。

JavaScript模块化是如何一步一步地发展起来的,并且也会主要对这些模块化方式做一个简单的比较。

JavaScript最初的作用仅仅是验证表单,后来会添加一些动画,但是这些js代码很多在一个文件中就可以完成了,所以,我们只需要在html文件中添加一个script标签。

后来,随着前端复杂度提高,为了能够提高项目代码的可读...

Read article

JS July 17, 2018

通过示例来学习ES2016, 2017, 2018的新特性

Words count 6.7k Reading time 6 mins.

本文会辅以有用的例子来讲述TC39中的18个特性,它们分别在ES2016, ES2017和ES2018中加入。
鉴于本文内容很长,我们将分为两个部分来介绍,此为第一部分。

Array.prototype.includes

includes是一个Array上很有用的函数,用于快速查找数组中是否包含某个元素。(包括NaN,所以和indexOf不一样)。

指数函数的中缀形式

加/减法我们通常都是用其中缀形式,直观易懂。在ECMAScript2016中,我们可以使用**来替代Math.pow

Object...

Read article

JS July 06, 2018

封闭了内心却包容了天下,闭包你并不孤独

Words count 6.3k Reading time 6 mins.

本文之所以会写这种老生常谈的文章,是为了接下来的设计模式做铺垫。既然已经提笔了,就打算不改了,继续写下去,相信也一定有很多人对闭包这样的概念有些模糊,那就瞧一瞧、看一看

毕竟闭包和高阶函数这两种概念,在开发中是非常有分量的。好处多多,妙处多多,那么我们就不再兜圈子了,直接开始今天的主题,闭包&高阶函数

首先变量作用域分为两类:全局作用域和局部作用域,这个没话说大家都懂。我们常说的变量作用域其实也主要是在函数中声明的作用域

  • 在函数中声明变量时没有var关键字,就代表是 全局变量
  • 在函数中...
Read article

JS July 02, 2018

你需要了解的23种javascript设计模式

Words count 11k Reading time 10 mins.

在许多访谈中,你可能会遇到很多面向对象编程中的接口,抽象类,代理和以及其他与设计模式相关的问题。 一旦了解了设计模式,它会让你轻松应对任何访谈,并可以在你的项目中应用这些特性。在应用程序中实现设计模式已经得到验证和测试。

为了使应用程序具有可扩展性,可靠性和易维护性,应该编写符合设计模式的代码。

  • 设计模式是我们每天编程遇到的可重用解决方案。
  • 设计模式主要是为了解决对象的生成和整合问题。
  • 换句话说,设计模式可以作为可应用于现实世界编程问题的模板。

设计模式的概念是由四人帮(《设计模式(可复用面...

Read article
Load more
0%