0%

javascript 和其他编程语言相比比较随意,所以 javascript 代码中充满各种奇葩的写法,有时雾里看花,当然,能理解各型各色的写法也是对 javascript 语言特性更进一步的深入理解。

函数基本概念

函数声明(function declaration)

1
function fnName () {…};

使用 function 关键字声明一个函数,再指定一个函数名,叫函数声明。

阅读全文 »

原文链接 https://pouchdb.com/2015/05/18/we-have-a-problem-with-promises.html

各位 JavaScript 程序员,是时候承认了,我们在使用 promise 的时候,会写出许多有问题的 promise 代码。 当然并不是 promise 本身的问题,A+ spec 规范定义的 promise 非常棒。 在过去的几年中,笔者看到了很多程序员在调用 PouchDB 或者其他 promise 化的 API 时遇到了很多困难。这让笔者认识到,在 JavaScript 程序员之中,只有少数人是真正理解了 promise 规范的。如果这个事实让你难以接受,那么思考一下我在 Twitter 上出的题:

问:下面四个使用 promise 的语句之间的不同点在哪儿?

1
2
3
4
5
6
7
8
9
10
11
doSomething().then(function () {
return doSomethingElse();
});

doSomethin().then(functiuoin () {
doSomethingElse();
});

doSomething().then(doSomethingElse());

doSomething().then(doSomethingElse);

如果你知道这个问题的答案,那么恭喜你,你已经是一个 promise 大师并且可以直接关闭这个网页了。

阅读全文 »

盒模型

CSS 盒模型描述了通过 文档树中的元素 以及相应的 视觉格式化模型(visual formatting model) 所生成的矩形盒子。

什么是 BFC

BFC(Block formatting context) 直译为”块级格式化上下文”。它是一个独立的渲染区域,只有 Block-level box 参与,它规定了内部的 Block-level Box 如何布局,并且与这个区域外部毫不相干。同理,还有 inline-level box,run-in box

BFC 布局规则

阅读全文 »

相关概念

在介绍各方案之前,先有必要了解一些必备的名词。

px

全称 pixel,像素。一个像素就是计算机屏幕所能显示一种特定颜色的最小区域。屏幕上显示数据最基本的点,不是长度单位。 如果点很小,那画面就清晰,我们称它为“分辨率高”,反之,就是“分辨率低”。

ppi

阅读全文 »

css 规范并不会强行规定浏览器必须如何实现样式系统,只会规定浏览器必须实现什么。因此,不同的样式系统引擎拥有不同的性能,开源的 Gecko 和 Webkit 算法类似,因此优缺点也类似。因此,下面的建议在大部分的 web 浏览器上应该是有意义的。

第一部分简单介绍样式系统规则分类;后面的章节主要指导如何利用样式系统的实现原理,来书写更有效率的规则。

样式系统如何建立规则

样式系统的规则分为四大类

  1. ID
  2. class
  3. tag
  4. 通用规则
阅读全文 »

是时候对 css 居中的各种方式来波总结了!下面是一提到居中就应该联想到的关键属性:

水平垂直居中

flex

1
2
3
4
5
.outer {
display: flex;
justify-content: center; /* 水平居中 */
align-items: center; /* 垂直居中 */
}

或:

阅读全文 »

布局的传统解决方案,基于盒状模型,依赖 display 属性 + position 属性 + float 属性

什么是 flex 布局

FlexFlexible Box),即为”弹性布局”。设为 Flex 布局以后,子元素的 floatclearvertical-align 属性将失效。

1
2
3
4
5
.box {
display: -webkit-flex; /* Safari */
display: flex;
display: inline-flex; /* inline元素 */
}

容器的属性

阅读全文 »

css3 的属性 transform(转换) 用途很广泛,功能也很强大,为了熟悉它的各种转换方式(平移 translate,旋转 rotate,扭曲 skew,放缩 scale),我做了一些平常常用的一些简单的图标。

这些图标很多是通过三角形来拼贴起来的,所以我们需要知道怎么样画三角形。

  1. 我们要将该 divwidthheight 都设置为 0,三角形是通过设置 border 来实现;
  2. 通过我们需要画成的三角形的目标分析,这个三角形的朝向(只针对规则的朝向:上、右、下、左、上左、上右、下右、下左,不规则的朝向可以通过旋转来实现);
  3. 如果是上、右、下、左四种中的一种,将朝向的对面的 border-color 设置为我们需要的颜色,该朝向的这一边不设置 border,其它两边的 border-color 设置为 transparent
  4. 如果是上左、上右、下右、下左中的一种,以上右为例,设置相关的两边:上和右的 border-color 设置成我们想要的颜色,其它两边的 border-width 设置成 transparent
  5. border-width 的值就是底边长和高。

三角形

三角形1

阅读全文 »

我们在使用 CSS 对网页元素定义样式时经常会遇到这种情况:要对一般元素应用一般样式,然后在更特殊的元素上覆盖它们。那么我们怎么样来保证我们所新定义的元素样式能覆盖目标元素上原有的样式呢?

CSS 中,会根据选择器的特殊性来决定所定义的样式规则的次序,具有更特殊选择器的规则优先于具有一般选择器的规则,如果两个规则的特殊性相同,那么后定义的规则优先。

那么,又怎么来计算选择器的特殊性呢?下面这张图介绍了特殊性的计算方法:

选择器权值

我们把特殊性分为 4 个等级,每个等级代表一类选择器,每个等级的值为其所代表的选择器的个数乘以这一等级的权值,最后把所有等级的值相加得出选择器的特殊值。

阅读全文 »