在 Vue.js 中使用任意 JavaScript 第三方库

Lodash, Moment, Axios, Async … 等等, 这些非常有用的 JavaScript 库。你可能会在你的很多 Vue.js 应用中使用它们。

但随着项目的不断增长,您通常会将代码拆分成多个组件文件或模块文件。您也可能希望在不同的环境中能够运行你的 APP ,包括服务器渲染。

除非你已经找到一个简单而强大的方法来将这些 JavaScript 库包含到你的组件和模块文件中,否则这将是一件非常麻烦的事情! 继续阅读

JavaScript 中的 Hoisting (变量提升和函数声明提升)

如何将 函数声明 / 变量 “移动” 到作用域的顶部。

术语 Hoisting(提升) 在很多 JavaScript 博文中被用来解释标识符的解析。其实 Hoisting(提升) 这个词是用来解释 变量 和 函数声明 是如何被提升到 函数或全局 作用域顶部的。你在任何的 JavaScript 文档中找不到这个术语,我们说的 Hoisting(提升) 只是使用了其字面含义来做个比喻。

如果你已经对 JavaScript 作用域工作原理有基本的了解,那么更深入的了解 Hoisting(提升) 有助于你建立更强大的基础知识。(愚人码头注:作为 JavaScript 中的一个总要概念,变量提升和函数声明提升经常在前端开发面试时被问及,或者在前端开发笔试题中出现。可见了解 Hoisting(提升) 的重要性。)

为了更好地理解基础知识,让我们来回顾一下 “Hoisting(提升)” 到底意味着什么。另外,给你一个提醒,JavaScript 是一种解释性语言,这不同于编译性语言,这意味着JS代码是逐行执行的。 继续阅读

[JavaScript实用方法] 选取(picking)和反选(rejecting)对象的属性

有时候我们需要将一个对象的某些属性选取出来,比方说我们有一个用数组表示的数据库表,我们需要一些函数来 select(选取) 几个字段: 继续阅读

页面滚动时自动显示隐藏导航效果(jQuery)

介绍一个简单的导航效果,当用户向下滚动页面时自动隐藏导航,在用户向上滚动页面时自动显示导航。

支持IE9+,Chrome,Safari,FireFox…

自动显示隐藏导航这种交互出现已经有一段时间了,特别是在移动设备上。 这种UX模式背后的想法简单而有效:我们希望导航在我们需要的时候很方便的显示,当用户向下滚动页面时,导航会自动隐藏,为内容留出更多的空间。在用户向上滚动页面时,我们将他的行为理解为想要访问导航,所以我们把导航自动自动显示出来。 继续阅读

一步一步教你 JavaScript 函数式编程(第三部分)

这是关于使用 JavaScript 进行函数式编程的最后一篇文章,我们将从 第1部分第2部分 开始,将 JSON 输出最终输出为满足我们需求的对象 :

  • (已经完成) 过滤掉一个月前发布(比如说,30天)的文章。
  • (已经完成) 通过文章的标签(tags)对文章进行分组(这意味着如果文章有多个标签,那么该文章会出现在多个分组中)。
  • (本文讨论) 按发布日期(published)降序排序每个标签文章列表。

现在我们有一个被过滤并按标签分组的对象,我们需要为每个标签组进行一些排序。运行我们的 app.js 程序后(注,app.js代码可以在这个 gist 中查看),我们输出的对象现在是这样的: 继续阅读

一步一步教你 JavaScript 函数式编程(第二部分)

上一篇关于函数式编程的文章 中,我们通过处理典型的 JSON 响应数据 的需求介绍一些函数式编程的主题。

以下是我们的需求:

  • (已经完成) 过滤掉一个月前发布(比如说,30天)的文章。
  • (本文讨论) 通过文章的标签(tags)对文章进行分组(这意味着如果文章有多个标签,那么该文章会出现在多个分组中)。
  • (下一篇文章讨论) 按发布日期(published)降序排序每个标签文章列表。

上一篇文章 专注于我们上述第一项需求 – 过滤掉发布超过30天的文章。

我们还创建了一个有用的 函数式实用工具库 ,我们将在本文中继续添加它。您可以查看该 gist 的完整源代码。

在这篇文章中,我们将讨论第二个需求,它在新过滤出来的列表中按标签(tags)对我们的文章记录进行分组。 继续阅读

一步一步教你 JavaScript 函数式编程(第一部分)

在阅读关于 Currying(柯里化)Partial Application(偏函数应用) 和其他函数式编程技术之后,一些开发人员不知道应该什么时候使用这些方法;为什么要这样使用?

在接下来的三篇系列文章中,我们将尝试解决这个问题,我们会尝试,并向你展示如何在一个短小而现实的例子中用函数式编程的方式,解决这个问题。

什么是函数式编程(Functional Programming)

在我们深入之前,让我们花一点时间来回顾一下一些实用的函数式编程概念。 继续阅读

JavaScript 中的 Currying(柯里化) 和 Partial Application(偏函数应用)

在这篇文章中,我们将介绍 Javascript 函数式编程中几种常见技术:Currying(柯里化) vs Partial Application(偏函数应用)。您不需要使用函数式编程的背景来理解这些内容,所以不必担心。

关于函数式编程的快速回顾

我假设你对 Javascript 中的函数已经有了一个基本的了解,包括高阶函数闭包call & apply ;如果你还不了解这些,那么请你快速去了解这些主题后再回来看这篇文章。

现在回来,让我们先回顾几个要点,然后再继续阅读。

Arity(参数数量) 指的是一个函数可以接受的参数的数量。这可能是一个没有,一个(unary),两个(二进制)或更多(多值)。您还可以使用具有可变数量参数的函数(variadic(可变参数)函数)。

函数允许您通过函数的 .length 属性来访问它们的参数数量。函数的 .length 属性永远不会改变 – 该属性总是匹配函数的声明参数的数量。 继续阅读

回归基础:JavaScript 中的数据格式转换一例

常见问题

打个比方,你有一组数据,需要根据拼音首字母字母索引显示在页面上,如图:

这种索引性的展示已经随处可见。对于我们前端开发来说这种展示最喜欢的数据格式可能是这样的: 继续阅读

10分钟学会基本的 Flexbox 布局

愚人码头注:本文在英文原文的基础上加了一些便于理解的注释和示例。

什么是 Flexbox ?

Flexbox 是 flexible box 的简称(愚人码头注:意思是“灵活的盒子容器”),是 CSS3 引入的新的布局模式。它决定了元素如何在页面上排列,使它们能在不同的屏幕尺寸和设备下可预测地展现出来。

它之所以被称为 Flexbox ,是因为它能够扩展和收缩 flex 容器内的元素,以最大限度地填充可用空间。与以前布局方式(如 table 布局和浮动元素内嵌块元素)相比,Flexbox 是一个更强大的方式:

  • 在不同方向排列元素
  • 重新排列元素的显示顺序
  • 更改元素的对齐方式
  • 动态地将元素装入容器

什么情况下不建议使用 Flexbox ?

虽然 Flexbox 非常适合缩放,对齐和重新排序元素,但以下情况应该尽量避免使用 Flexbox 布局: 继续阅读