进击的JAMStack

最近在研究JAMStack的一些相关内容,发现这的确是个好东西,所以想写一篇文章把这个概念分享给还不了解JAMStack的同学。本篇文章主要包含以下的内容:

  • 什么是JAMStack
  • JAMStack有什么优势
  • JAMStack适合什么应用
  • 我的个人思考

什么是JAMStack

概念

JAMStack中的JAM其实是三个词的缩写,它们分别是JavaScript, APIs以及Markdown。而Stack用中文的说法就是技术栈(Tech Stack),也就是我们在构建应用的时候具体使用到的技术的集合。举个例子,国外现在比较火的一个Stack叫做Mean Stack,它表示使用MongoDB + Express.js + AngularJS + Node.js这些技术来构建一个Web应用。因此用最通俗易懂的话来描述JAMStack就是:使用JavaScript,APIs和Markdown三种技术来构建Web应用。所以JAMStack是一种问题解决方案,而不是一个具体的实现。

接着我们再具体看一下JavaScript,APIs和Markdown这三种技术在JAMStack的世界中是起到什么作用的。

CSS in JS的好与坏

是什么

CSS-in-JS是一种技术(technique),而不是一个具体的库实现(library)。简单来说CSS-in-JS就是将应用的CSS样式写在JavaScript文件里面,而不是独立为一些.css.scss或者less之类的文件,这样你就可以在CSS中使用一些属于JS的诸如模块声明,变量定义,函数调用和条件判断等语言特性来提供灵活的可扩展的样式定义。值得一提的是,虽然CSS-in-JS不是一种很新的技术,可是它在国内普及度好像并不是很高,它当初的出现是因为一些component-based的Web框架(例如React,Vue和Angular)的逐渐流行,使得开发者也想将组件的CSS样式也一块封装到组件中去以解决原生CSS写法的一系列问题。还有就是CSS-in-JS在React社区的热度是最高的,这是因为React本身不会管用户怎么去为组件定义样式的问题,而Vue和Angular都有属于框架自己的一套定义样式的方案。

本文将通过分析CSS-in-JS这项技术带来的好处以及它存在的一些问题来帮助大家判断自己是不是要在项目中使用CSS-in-JS。

几个提高效率的console APIs

console.log我相信写过JavaScript人一定都有接触过,它可谓是我们debug的灵丹妙药。可是除了log方法,你知道console还有很多可以帮你快速提高代码debug效率(逼格)的方法吗?

console.log | console.info | console.debug | console.warn | console.error

使用场景

输出不同类型(level)的内容。

用法

这几个方法用起来都差不多,只不过输出结果可能会存在颜色上的区别:

注意console.debug如果没有输出可以将log level中的verbose选上(chrome):

JavaScript小技巧 - 数组篇

本文整理了一些在日常工作可以用到的JavaScript数组小技巧

去重

巧用Set特性

1
const arr = [1, 2, 2, 3, 4, 7, 7]
2
const uniqueArr = [...new Set(arr)]
3
console.log(uniqueArr)
4
// [1, 2, 3, 4, 7]

详解ECMAScript2019/ES10新属性

每年都有一些新的属性进入ECMA262标准,今年发布的ECMAScript2019/ES10同样也有很多新的特性,本文将会挑选一些普通开发者会用到的新属性进行深入的解读。

Array.prototype.flat()

The flat() method creates a new array with all sub-array elements concatenated into it recursively up to the specified depth. – MDN

简单来说flat这个函数就是按照一定的深度depth将一个深层次嵌套的数组拍扁, 例子:

1
const nestedArr = [1, 2, [3, 4, [5, 6, [7, [8], 9]]], 10]
2
console.log(nestedArr.flat())
3
// [1, 2, 3, 4, [5, 6, [7, [8], 9]], 10]
4
console.log(nestedArr.flat(2))
5
// [1, 2, 3, 4, 5, 6, [7, [8], 9], 10]
6
console.log(nestedArr.flat(3))
7
// [1, 2, 3, 4, 5, 6, 7, [8], 9, 10]
8
console.log(nestedArr.flat(4))
9
// [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
10
console.log(nestedArr.flat(Infinity))
11
// [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

由上面的例子可以看出flat会按照指定的深度depth将一个数组扁平化,如果需要将数组完全拍扁变成一维数组,则指定depth为无限大,即是Infinity,相反如果不指定深度,其默认值是1。

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×