Blog
Blog copied to clipboard
mengtuifrontend
芦叶满汀洲，寒沙带浅流。二十年重过南楼。柳下系船犹未稳，能几日，又中秋。 黄鹤断矶头，故人今在否？旧江山浑是新愁。欲买桂花同载酒，终不似，少年游。
**什么是高阶组件** 高阶组件是react中的一个概念，实质来讲，高阶组件就是一个`高阶函数` 什么是高阶函数，就是满足以下任意一个条件： - 可以传入另一个函数作为参数（比如filter、map） - 可以返回一个函数（比如bind） 日常工作中，我们在不知不觉中就已经使用了高阶函数 ``` const arr = [1,2,3,4,5,6]; const square = d => d ** 2; arr.map(square) // [1, 4, 9, 16, 25, 36]; ```...
### 1.幽灵空白节点 主要相关的两个属性：vertical-align, line-height **vertical-align主要了解两个方面** 1. 对块级元素没用 2. 默认是baseline - [ ] 英文4线格top，middle，baseline，bottom，然而baseline是倒数第二条线这就很好理解还有一条线的‘节点’间距当然单此一个条件不是充分必要的。 **line-height我们主要了一个方面** 1. 默认值normal - [ ] normal根据相关字体大小计算得出的一般为1.1-1.2，由此是高于字体本身的，综合默认的vertical-align自然就有了所谓的‘幽灵空白节点’。 由此解决幽灵空白 1. 把内元素改为块即元素，即是解决vertical-align失效。 2. 修改vertical-align为最后一跳线，vertical-align: bottom。 3. 主动设置line-height: 为一个足够小的值，那么块级高度为小于行内高度，就没有足够空间留给‘幽灵’。 4....
## 流的破坏和保护 ### 魔鬼属性 float `float` 属性设计的目的就是为了实现文字环绕效果。这种文字环绕，主要就是指文字环绕图片显示的效果。所以 `float` 并不是用来实现复杂的页面布局的，况且，使用 `float` 会带来一些意想不到的结果。例如 导致父元素的高度塌陷。 #### `float` 具有哪些特性 ##### 包裹性 这里的包裹性由两部分组成：“包裹” 和 “自适应性”。也就是说 `float` 元素的宽度就是 `border-box`（包裹）,同时这个宽度总是小于等于父容器的宽度（自适应）。但是有一种情况比较例外，就是 `float` 元素内部都是一连串的数字或英文字母，那么这个时候元素的宽度就会超过父容器的宽度 ```html xsdhdfdsfdsfdsfdsfdsfdsfdsfsdfdsfdsfdsfdsfdsfdsfg ``` ```css .demo...
### 内联元素和流 #### 字母 x 和 CSS 世界的基线 CSS 规定，小写的字母 x 的下边缘 就是基线（baseline）。字母 x 的高度就是 `x-height`。`x-height` 就是术语描述的 "基线" 和 "等分线" 之间的距离。 #### 内联元素的基石 `line-height` 对于非替换元素的纯内联元素来说，`line-height` 就是计算高度的基石，更准确一点的说就是：指定了用来计算行框盒子高度的基础。内联盒子的 `padding 、border` 不包含在行框盒子高度内（这一点很重要） ```html...
### 盒尺寸四大家族 #### 替换元素 通过修改某个属性值呈现的内容就可以被替换的元素就被称为 “替换元素”。`、、、、、` 等都是典型的替换元素 ##### 替换元素除了内容可替换以外，还有哪些特性： * 内容的外观不受页面上的 CSS 的影响 * 有自己的尺寸：在不设置尺寸的时候，这些元素会有一个默认的尺寸（300 * 150），如： `、、`。`` 图片默认展示的就是图片的原始尺寸。 * 在很多 CSS 属性上有自己的一套表现规则。比较有代表性的就是 `vertical-align` 属性。对于字符而言，`vertical-align` 的默认值就是 `baseline`，也就是字母 “x” 的下边缘。但是，对于替换元素而言就不一样了。对于图片来说 `vertical-align`...
### 流、元素于基本尺寸 在 W3C 的 HTML4 规范中，已经明确把 HTML 元素划分为 “块级元素” 和 “内联元素”。 #### 块级元素 常见的块级元素有 `、、、、` 等。需要注意的是 “块级元素” 和 `display` 为 `block` 的元素不是一个概念。例如，`` 元素默认的 `display` 为 `list-item` ， 元素的 `display`...
### 前言 - PMP（Project Management Professional--项目管理） - ACP（Agile Certified Practitioner--敏捷管理） - PMI（Project Management Institute--美国项目管理协会) #### 项目 项目是为创造独特的产品、服务或成果而进行的临时性工作。 - 独特的产品、服务或成果 - 临时性工作  ###### 项目生命周期 预测型：在生命早期阶段确定项目范围，时间和成本 增量型：在预定的时间区间内渐进增加产品功能 迭代型：是通过一系列重复活动来开发产品 敏捷型：结合迭代和增量的特点，频繁细化需求，交付产品功能子集 #### 知识体系...
## 正则 ### 引言 作为一名合格的前端开发工程师，了解并掌握正则表达式是非常有必要的。多年的项目经验告诉我，学好正则表达式可以让我们少写很多的代码。这篇文章非常适合哪些初中级和对正则表达式掌握不是很清楚的同学，废话不多少，我门开始吧。。。 ### 正则表达式的定义 js中的正则表达式用 `RegExp` 对象表示，可以使用 `RegExp()` 构造函数来创建 `RegExp` 对象，不过更多情况下我们使用一种特殊的直接量语法来创建，举个例子： ```js // 使用直接量的形式 var pattern = /\d$/; // 使用构造函数的形式 var pattern = new RegExp('\d$'); ``` 但是如果需要我们动态的生成一个正则表达式呢，那么这个时候就需要使用构造函数形式了，...
## XMLHttpRequest 浏览器在 `XMLHttpRequest` 类上定义了他们的 HTTP API。这个类的每一个实例都表示一个独立的请求/响应，并且这个对象的属性和方法允许指定请求细节和提取响应数据。W3C在 `XMLHttpRequest` 规范的基础上制定了2级 `XMLHttpRequest` （下文简称 `XHR2` ）标准草案，且大部分浏览器都已经支持了。 ### 在介绍 `XMLHttpRequest` 之前，我想先简单说一下HTTP请求组成部分和响应的组成部分 #### 一个 HTTP 请求由4部分组成： * HTTP 请求方法或‘动作’。 * 正在请求的URL。 * 一个可选的请求头集合，其中可能包括身份验证信息。 * 一个可选的请求主体。...
## Fetch 在开发过程中,我们向服务端发送请求,一般会使用三种方式, XMLHttpRequest(XHR)，Fetch ，jQuery实现的AJAX。其中, XMLHttpRequest(XHR)和Fetch是浏览器的原生API，它们都是全局的方法。jquery的ajax其实是封装了XHR。接下来我们来看看Fetch如何使用。 ### 写在前面 * `Fetch` 是基于 `Promise` 实现的，所以它的返回值是一个 `Promise` 对象。当请求返回一个代表错误的 `HTTP` 状态码时，从 `fetch()` 返回的 `Promise` 不会被标记为 `reject`， 即使该 `HTTP` 响应的状态码是 **404** 或 **500**。相反，它会将 `Promise` 状态标记为...
Metadata
Owner
Metadata
芦叶满汀洲，寒沙带浅流。二十年重过南楼。柳下系船犹未稳，能几日，又中秋。 黄鹤断矶头，故人今在否？旧江山浑是新愁。欲买桂花同载酒，终不似，少年游。