0%

CSS实现三栏布局

  • float布局
  • Position定位
  • table布局
  • 弹性(flex)布局
  • inline-block布局

float布局 + margin

  • 元素脱离文档流
  • 不脱离文本流

对自身影响:

  • 形成块(BFC),可以设置宽高
  • 位置尽量靠上
  • 位置尽量靠左或靠右

对兄弟元素影响:

  • 上面贴非float元素
  • 旁边贴float元素
  • 不影响其他块级元素位置
  • 影响其块级元素文本
阅读全文 »

CSS选择器

CSS 选择器是用来指定该组 CSS 样式会对什么元素生效的,是连接 HTML 结构和 CSS 样式的桥梁。

选择器分离

  • ID 选择器 #id{}
  • 类选择器 .link{}
  • 通配选择器 *{}
  • 标签选择器 div{}
  • 属性选择器 input[class=input]{}
  • 伪类选择器 :hover{}
  • 伪元素选择器 ::before{}
  • 组合选择器 h1 + p
  • 否定选择器 :not(.link){}
阅读全文 »

HTML基础

DOCTYPE的作用

  • 告诉浏览器的解析器使用哪种HTML规范或者XHTML规范来解析页面
  • 让浏览器以标准模式渲染(盒子模型)
  • 让浏览器知道元素的合法性

HTML XHTML HTML5的关系

  • HTML是超文本标记语言,属于SGML
  • XHTML属于XML,是HTML进行XML严格化的结果
  • HTML5不属于SGML或XML,比XHTML宽松
阅读全文 »

stream实现原理

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
const fs = require('fs');
const path = require('path');

const BUFFER_SIZE = 10;
// let buffer = Buffer.alloc(BUFFER_SIZE);

/**
* fs.open(path, flags[, mode], callback): 异步打开文件, 返回文件描述符fd
* path - 文件的路径。
* flags -文件打开的行为。 具体值详见下文。
* mode - 设置文件模式(权限), 文件创建默认权限为 0666(可读, 可写)。
* callback - 回调函数, 带有两个参数如: callback(err, fd)。
*/

/**
* fs.read(fd, buffer, offset, length, position, callback): 通过文件描述符 fd 读取文件内容
* fd - 通过 fs.open() 方法返回的文件描述符,从 fd 指定的文件中读取数据。
* buffer - 数据将写入的缓冲区。
* offset - buffer 中开始写入的偏移量。
* length - 缓冲区写入的字节数。
* position - 参数指定从文件中开始读取的位置。 如果 position 为 null,则从当前文件位置读取数据,并更新文件位置。 如果 position 是整数,则文件位置将保持不变
* callback - 回调函数,有三个参数err, bytesRead, buffer,err 为错误信息, bytesRead 表示读取的字节数,buffer 为缓冲区对象。
*/

/**
* fs.write(fd, buffer, offset, length[, position], callback): 将 buffer 写入到 fd 指定的文件
* fd - 通过 fs.open() 方法返回的文件描述符。
* buffer - 将 buffer 写入到 fd 指定的文件。
* offset - 决定 buffer 中要被写入的部位。
* length - 是一个整数,指定要写入的字节数。
* position - 指定文件开头的偏移量( 数据应该被写入的位置)。
* callback - 回调函数, 有三个参数err, bytesWritten, buffer, err 为错误信息, bytesWritten 指定 buffer 中被写入的字节数, buffer 为缓冲区对象
*/

/**
* fs.write(fd, string[, position[, encoding]], callback): 将 string 写入到 fd 指定的文件。 如果 string 不是一个字符串, 则该值会被强制转换为字符串。
* position 指定文件开头的偏移量( 数据应该被写入的位置)。 如果 typeof position !== 'number',则数据会被写入当前的位置。
* encoding 是期望的字符串编码。
* callback回调会接收到参数(err, written, string), 其中 written 指定传入的字符串中被要求写入的字节数。 被写入的字节数不一定与被写入的字符串字符数相同
*/

const readPath = path.resolve(__dirname, '1.txt');
const writePath = path.resolve(__dirname, '2.txt');
fs.open(readPath, 'r', (err, rfd) => {
if (err) {
console.error(err)
} else {
console.log("打开文件fd:" + rfd)
fs.open(writePath, 'w', (err, wfd) => {
if (err) {
console.error(err);
} else {
console.log("打开文件fd:" + wfd)
let readPosition = 0;
function next() {
let buffer = Buffer.alloc(BUFFER_SIZE);
fs.read(rfd, buffer, 0, BUFFER_SIZE, readPosition, (err, bytesRead) => {
if (err) {
console.error(err);
} else {
readPosition += bytesRead;
//如果调用fs.write(fd, buffer, offset, length[, position], callback) 将buffer写入到fd指定的文件会出现乱码的情况
//此处调用fs.write(fd, string[, position[, encoding]], callback) 将string写入到fd指定的文件不会出现乱码
if (bytesRead != 0) {
//递归
fs.write(wfd, buffer, 0, bytesRead, (err, bytesWritten, buffer) => {
if (err) {
console.error(err);
} else {
next();
}
})
} else {
//关闭文件
fs.close(rfd, () => {
console.log("关闭文件fd:" + rfd)
});
fs.close(wfd, () => {
console.log("关闭文件fd:" + wfd)
});
}

}
})
}
next()
}
})
}
})
阅读全文 »

Redux中间件原理

Redux中间件

中间件主要被用于分离那些不属于你应用的核心业务逻辑的可被组合起来使用的代码。

  • 不使用middleware时,在dispatch(action)时会执行Reducer,并根据action的type更新返回相应的state。
  • 而在使用middleware时,简言之,middleware会将我们当前的action做相应的处理,随后再交付Reducer执行
  • 通过重写dispatch方法,在派发action之前或之后添加逻辑(AOP)。 你可以利用 Redux middleware 来进行日志记录、创建崩溃报告、调用异步接口或者路由等等。每一个 middleware 处理一个相对独立的业务需求,通过串联不同的 middleware,实现变化多样的的功能。
阅读全文 »