脚本宝典收集整理的这篇文章主要介绍了前端进阶（建议从下往上阅读），脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

React进阶

npm

npm（Node package manager）是随Node.js发布的包管理工具，最初主要是用来管理Node.js依赖包，如今已经扩展到整个JavaScript生态。

package.json

https://docs.npmjs.COM/creating-a-package-json-file

package.json 是一个包或者工程的描述文件，里面记录了项目的名字、版本、依赖等信息，代表当前目录是一个独立的npm工程。

用npm inIT创建

安装依赖

如果我们要安装一个生产环境依赖，如 React, 可以在项目根目录（package.json所在目录）执行命令

npm i react

安装完之后，依赖关系会自动记录在 package.json 文件的 dePEndencies 中，如果我们要安装一个开发环境依赖，如 webpack，可以添加一个 --save-dev 参数，如

npm i webpack --save-dev

安装完之后，依赖关系会自动记录在 package.json 文件的 devDependencies 中，这两种方式安装的依赖，代码都会被下载到项目根目录的 node_modules 目录，除此之外还会生成一个名为 package-lock.json，这里面记录了整个已安装的依赖关系和下载地址，可以帮助我们锁定依赖版本。

全局安装

有些npm模块提供了命令行调用的支持，我们可以用 -g 来将它安装成一个全局命令，比如之前我们安装过的 typescript

npm i typescript -g

删除依赖

如果我们想要删除一个已安装的依赖，如 react，只需要在 package.json 所在的目录执行命令

npm remove react

如果要删除一个全局安装的模块，需要再加上 -g 的参数，如

npm remove typescript -g

组件的生命周期

https://react.docschina.org/docs/react-component.htML

一个React组件从初始化到被删除，会经历一个完整的生命周期，我们可以为类组件添加一些特殊方法，在组件生命周期的的一些关键节点，React会来执行这些方法。

componentDidmount()

componentDidMount() 会在组件挂载之后（插入DOM树中）立即调用，依赖于DOM节点的初始化操作应该放在这里，通常我们会在这里通过网络获取组件所需的数据、订阅一些事件通知等等

componentDidUpdate()

componentDidUpdate() 会在更新后被立即调用，首次渲染不会执行此方法，可以让我们监控组件传入数据发生的变化。

componentWillUnmount()

componentWillUnmount() 会在组件卸载及销毁之前直接调用，在此方法中执行必要的清理操作，例如：清除定时器，取消网络请求或者之前在 componentDidMount() 中创建的事件订阅等。在此方法中不应该调用 setstate()，因为该组件将永远不会重新渲染，组件实例卸载后，将永远不会再挂载它。

路由导航

我们可以使用两种方式来在页面中切换路由，react-router-dom 提供了一个 Link 组件，我们可以用它来替代传统的a标签，因为我们使用的 history 模式的 browserRouter，它其实是利用浏览器的 history.pushState 来实现的，它可以在浏览器添加历史状态，修改当前的URL而不会引起页面的刷新，Link 可以帮我们拦截用户的点击，然后完成 pushState 相关的操作，这样就可以在切换路由的同时保持页面的状态，而不是刷新页面。它的基本用法如下：

import { Link } From 'react-router-dom'

export default class Main extends React.Component {
  render() {
    return <Link to="/about">About</Link>
  }
} 

NavLink

react-router-dom 还提供了一个特殊的Link组件叫 NavLink，它可以让我们来创建一些导航元素，当前的路由如果和它的链接匹配的话，可以自动帮我们添加选中的状态

activeclassname="nav-active"

当路由和 NavLink 中的 to 匹配时，会自动添加一个 nav-active 类名

react

一个简单的 React 组件采用类似下面的代码进行定义

class HelloMessage extends React.Component {
  render() {
    return <div>Hello {this.PRops.name}</div>
  }
}

我们将每一个 React 组件定义为一个 class，它继承自 React.Component，组件可以使用一个名为 render() 的方法，接收输入的数据并返回需要展示的内容。在上面的示例中这种类似于 XML 的写法被称为 JSX，被传入的数据在组件中通过 this.props 进行访问。

有状态组件

上面的简单组件只用来展示外部传入的数据（通过 this.props 访问），有些组件逻辑比较复杂，可能会有自己内部的状态数据（通过 this.state 访问）需要管理。当组件的状态数据改变时，组件会再次调用 render() 方法重新渲染对应的标记。

class Counter extends React.Component {
  constructor() {
    super()
    this.state = {
      count: 0,
    }
  }
  increase() {
    this.setState({
      count: this.state.count + 1,
    })
  }
  render() {
    return (
      <div>
        <span>{this.state.count}</span>
        <button onClick={this.increase.bind(this)}>Increase</button>
      </div>
    )
  }
}

我们通过 this.state 定义了当前组件的内部状态，默认的状态数据为 count: 0，在 render() 函数中可以通过 this.state.count 来引用这个状态，我们给后面的 button 按钮绑定了一个 click 事件，当用户点击它之后，我们通过 this.setState 来改变 count 的值，让它每次加一，这会引起 render() 函数重新执行，React 比较前后的内容变化，进行实际的 DOM 更新。

注意，直接改变 this.state 中的值并不能直接引发组件的重新渲染，需要调用 this.setState 才可以

JSX 语法

https://react.docschina.org/docs/introducing-jsx.html

JSX 是 React 用来描述 DOM 结构的一种语法，它非常类似于原始的 html 写法，但是又有一些自己的规则。TypeScript 语言原生支持 JSX，两者配合可以让 TS 覆盖到界面部分类型检查，开发体验非常棒，JSX 让我们可以完全使用 JS 来开发界面部分（HTML）和逻辑部分（JS），可以充分利用 JS 的灵活性。

JSX 本质上是一种语法糖，它并不是合法的 JavaScript 代码，所以需要将它转换成 React 中原始的创建 DOM 结构的 API 才能执行，比如下面的 JSX 代码

render() {
  return (
    <div className="message">
      <h1>Hello</h1>
    </div>
  )
}

会被转换为实际可执行的 JS 代码，类似于原生的 document.createElement

render() {
  return React.createElement(
    'div',
    { className: 'message' },
    React.createElement('h1', null, 'Hello')
  )
}

事件处理

React 元素的事件处理和 DOM 元素很类似，但是语法上有一些不同

• React 事件的命名采用小驼峰模式（camelCase），而不是纯小写
• 使用 JSX 语法时你需要传入一个函数作为事件处理函数，而不是一个字符串

@H_126_259@传统 HTML

<button onclick="onclick()">Click</button>

React 中有所不同

onBTnClick() {
  console.LOG('button clicked!')
}

render() {
  return <button onClick={this.onBtnClick.bind(this)}></button>
}

在 React 里面我们不需要使用 addEventListener 来给元素添加事件监听

我们还可以向事件处理函数传递参数，以前面列表渲染的例子为例

constructor() {
  super()
  this.state = {
    areas: [{id: 1, name: '内地'}, {id: 2, name: '港台'}, {id: 3, name: '欧美'}]
  }
}

delItem(area) {
  let index = this.state.area.indexOf(area)
  this.state.area.splice(index, 1)
}

render() {
  return (
    <ul>
      {this.state.areas.map(item => (
        <li key={item.id}>{item.name} - <button onClick={() => this.delItem(item)}>删除</button></li>
      ))}
    </ul>
  )
}

TS

TypeScript支持与JavaScript几乎相同的数据类型，此外还提供了实用的枚举类型方便我们使用，我们可以给变量手动加上类型声明，也可以让TS根据变量的类型自动推导，类型一旦声明，不允许直接修改。

// 手动添加类型声明
let isDone: boolean = false
// 根据true的值自动推导isTrue为boolean类型
let isTrue = true
// number数字类型
let num: number = 6
// string数字类型
let str: string = 'hello'
// 数组，使用类型+[]的方式声明
let arr_1: number[] = [1, 2, 3]
// 可以根据后面的值自动推导arr_2的类型为 string[]
let arr_2 = ['a', 'b', 'c']
// arr_3无法推导类型，因为后面是一个空数组
let arr_3 = []

enum 枚举

enum 类型是对JavaScript标准数据类型的一个补充，使用枚举类型可以为一组数值赋予友好的名字，通常用于定义一组有限的状态，比如我们可以定义一个颜色的枚举类型：

enum Color { red, Green, Blue }
let c = Color.Red

any

有一些特殊情况我们无法确定变量将要存储的数据类型，这个时候我们可以使用 any，这样编译器就不会去对它进行类型检查了，例如下面的例子

let notSure: any = 4
notSure = 'abc'

注意，应该尽可能避免使用 any，会给程度带来类型黑洞

interface 接口

接口可以用来描述结构化的数据，下面我们来体验一下，我们习惯于使用大写字母I开头来命名Interface

interface IUser {
  name: string
  age?: number  // 用?来声明一个可选属性
}
function addUser(user: IUser) {
}
// 类型匹配IUser
addUser({ name: 'Frank' })
// 类型匹配IUser
addUser({ name: 'Frank', age: 21 })
// 类型不匹配IUser，可选属性age为number类型
addUser({ name: 'Frank', age: 'abc' })

函数

需要为函数的参数添加类型声明，如果有参数是可选的，可以通过 ? 来声明，但是只能放到参数列表的最后面

// lastName 是一个可选参数
function addUser(FirstName: string, lastName?: string): string {
  return `${firstName} ${lastName || ''}`
}
//返回值是可推导的，可以省略返回值的类型声明
function addUser(firstName: string, lastName?: string){
  return `${firstName} ${lastName || ''}`
}

BOM操作

BOM(browser object model--浏览器对象模型)，属于约定俗称，在各自浏览器中都有各自的实现，并没有统一的标准。但大多数的接口都是通用的。BOM提供了独立于内容而与浏览器窗口进行交互的对象，核心对象是window。常见的对象有：document、location、navigator、screen、history。

window.location

location 接口表示其链接到的对象的位置（URL）

属性

https://demo.example.com:8080/api/update?name=Tom#hash

它可以拆分成下面的部分

• href：对应整个URL
• protocol：https:
• hostname：demo.example.com
• port：8080
• host：demo.example.com:8080
• origin：https://demo.example.com:8080
• pathname：/api/update
• seArch：?name=Tom
• hash：#hash

location对象包含上面这些属性，如果我们要修改当前页面的地址，也就是重定向到一个新的页面，可以直接修改 location.href，如：

location.href = '/index.html'

这会引起页面的刷新，切换到 /index.html 地址

也可以直接修改链接的hash，hash片段仅对于浏览器起作用，不会被浏览器提交到服务端，对于hash的修改也不会引起页面的刷新，通常用于浏览器记录一些状态比如链接锚点、前端路由等等，如

location.hash = '#test'

方法

平时会用到的方法主要是 reload()，它会让我们重新加载当前页面

window.navigator

该对象表示用户代理的状态和标识，它允许脚本查询它和注册自己进行一些活动，我们可以在浏览器的控制台输入 navigator 来查看它的属性和方法，常用的有

• userAgent：客户端代理字符串

• language：当前环境的语言

window.screen

返回关于浏览器渲染窗口有关的信息

window.history

该对象允许操作浏览器的曾经在标签页或者框架里访问的会话历史记录，我们通常使用它来控制浏览记录的前进、后退

history.back() //页面后退
history.forward() // 页面前进
history.go(-1) // 后退一页

DOM操作

查询

let list = document.getElementById('list')  // 命中ul，参数为ID名，注意不带#，不是CSS选择器
console.log(list)
let first = document.querySelector('.item')  // 命中第一个 .item
console.log(first)
let second = document.querySelector('.item:nth-child(2)') // 可以使用复杂的CSS选择器，命中第二个 .item，
console.log(second)
let items = document.querySelectorAll('.item')  // 得到的是一个包含所有 .item 的 nodelist 集合
for (let el of items) {
  console.log(el)
}

创建

let list = document.createElement('ul')
list.id = 'list'
for (let i = 0; i < 3; i++) {
  let item = document.createElement('li')
  item.className = 'item'
  item.innerText = `${i + 1}`
  list.appendChild(item)  // 将创建好的元素添加到父节点
}
document.body.appendChild(list) // 将list添加到body

删除

let item = document.querySelector('.item')
item.parentNode.removeChild(item)
let list = document.getElementById('list')
list.innerHTML = '' // 可以清空list下面的所有子节点
document.body.removeChild(list)

替换

let second = document.querySelector('.item:nth-child(2)')
let list = document.getElementById('list')
let newItem = document.createElement('li')
newItem.className = 'new-item'
newItem.innerText = 'new-item'
list.replaceChild(newItem, second)

事件监听

网页中最常见的就是鼠标事件和键盘事件，我们可以通过 addEventListener 来监听

鼠标事件

<button id="btn">Click</button>

let btn = document.getElementById('btn')
// 监听鼠标点击事件
btn.addEventListener('click', event => {
  console.log('button clicked!')
})

键盘事件

<input type="text" id="input" />

let input = document.getElementById('input')
input.addEventListener('keyPress', event => {
  // event中包含每一次按键的信息
  console.log(event)
})
input.addEventListener('change', event => {
  // change事件会在输入框失去焦点之后触发
  console.log(event.target.value)
})

JSON

JSON 语法支持表示 3 种类型的值。

• 简单值：字符串、数值、布尔值和 null 可以在 JSON 中出现，就像在 JavaScript 中一样。特殊值 undefined 不可以。

• 对象：第一种复杂数据类型，对象表示有序键/值对。每个值可以是简单值，也可以是复杂类型。

• 数组：第二种复杂数据类型，数组表示可以通过数值索引访问的值的有序列表。数组的值可以是任意类型，包括简单值、对象，甚至其他数组。

parse()

let stringJson = {
  "name": "Bob"
}
let obj = JSON.parse(stringJson)

stringify

let obj = {
  name: "Bob",
}
let stringJson = JSON.stringify(obj)

JS

数学计算

PI

console.log(Math.PI)  // 3.141592653589793

圆周率常数，可以直接引用

floor

返回小于一个数的最大整数

ceil

返回大于一个数的最小整数

round

返回四舍五入后的整数，需要注意，js的round有点不同，它并不总是舍入到远离0的方向，特别是负数的小数部分恰好等于0.5的情况下。

trunc

返回一个数的整数部分，直接去除小数点之后的部分，传入的参数会被隐式转换为数字类型

random

该函数返回一个浮点数，伪随机数的范围从0到1，也就是说大于等于0，小于1，我们可以以此为种子，扩展到自己想要生成的随机数的范围，比如下面的例子，可以让我们生成指定范围的随机整数。

数组操作

遍历数组

let arr = [1, 2, 3, 4, 5]

for (let item of arr) {
  console.log(item) // item为正在处理的当前元素
}
arr.foreach((item, index) => {
  console.log(item, index)  // item为正在处理的当前元素，index为索引值
})

需要注意的是，forEach 与 for..of 不同，除了抛出异常之外，没有办法中止或者跳出 forEach 循环。

filter

该方法创建一个新数组，将所有在过滤函数中返回 true 的数组元素放进一个新数组中并返回。

map

返回一个由回调函数的返回值组成的新数组。

reduce

从左到右为每个数组元素执行一次回调函数，并把上次回调函数的返回值放在一个暂存器中传给下次的回调函数，并返回最后一次回调函数的返回值。

find

找到第一个满足测试函数的元素并返回那个元素的值，如果找不到，则返回 undefined。

findIndex

找到第一个满足测试函数的元素并返回那个元素的索引，如果找不到，则返回 -1。

includes

判断当前数组是否包含某指定的值，如果是返回 true，否则返回 false。

indexOf

返回数组中第一个与指定值相等的元素的索引，如果找不到这样的元素，则返回 -1。

join

连接所有数组元素组成一个字符串。

concat

用于合并两个或多个数组。此方法不会更改现有数组，而是返回一个新数组。

slice

抽取当前数组中的一段元素组合成一个新数组，这是一个原数组的浅拷贝，原始数组不会被改变。

splice

在任意的位置给数组添加或删除任意个元素。这个很容易和 slice 搞混，此方法会改变原数组。

第一个参数（假定为x）为数组下标，第二个参数为从x开始删除元素个数，后续参数都是在x处添加的元素

reverse

颠倒数组中元素的排列顺序，即原先的第一个变为最后一个，原先的最后一个变为第一个，该方法会改变原数组。

push

在数组的末尾增加一个或多个元素，并返回数组的新长度。

pop

删除数组的最后一个元素，并返回这个元素。

unshift

在数组的开头增加一个或多个元素，并返回数组的新长度，与 push 对应

shift

删除数组的第一个元素，并返回这个元素，与 pop 对应

sort

方法用用于对数组的元素进行排序，并返回数组。默认排序顺序是在将元素转换为字符串，然后比较它们的 UTF-16 代码单元值序列时构建的

箭头函数

参考java的Lambda 表达式，->改为=>。其他基本相同。

Set

ES6提供了新的数据结构，它类似于数组，但是成员的值都是唯一的，没有重复的值。Set 本身是一个构造函数，用来生成 Set 数据结构。

let set = new Set()
set.add(1)  // Set(1) { 1 }
set.add(5)  // Set(2) { 1, 5 }
set.add(5)  // Set(2) { 1, 5 }
set = new Set([1, 2, 2, 3])  // 可以直接从一个数组初始化，重复元素会被去除
console.log(set)  // Set(3) { 1, 2, 3 }
let arr = [...set]  // 可以将Set展开为一个数组
console.log(arr)  // [ 1, 2, 3 ]// 迭代Set
for (let item of set) {  
  console.log(item)
}
set.delete(2) // 元素存在，返回 true
set.has(1)  // 1在set中存在，返回 true

Set 特别适合用于存放唯一值的场景，例如我们需要记录当前已经登录的所有用户名，就可以直接使用 Set 来存放。

Map

ES6提供了 Map 数据结构，它类似于的对象，也是键值对的集合，但是“键”的范围不限于字符串，各种类型的值都可以当作键，也就是说，Object 提供了“字符串-值”的对应，Map 提供了“值-值”的对应，是一种更完善的Hash结构。

let obj = { a: 1 }
let map = new Map()
map.set('name', 'Frank')
map.set(111, 123)
map.set(obj, { b: 2 })
console.log(map.keys())  
console.log(map.has(obj))  // true
console.log(map.delete(obj)) // true
console.log(map.size)  // 2

Map 的遍历会复杂一些，它提供了几个迭代器可供我们使用

• keys()：返回键名的遍历器
• values()：返回键值的遍历器
• entries()：返回所有成员的遍历器
• forEach()：遍历所有成员

异步编程

略

JS

使用let声明变量，弃用VAR

const定义常量

关系操作符

运算符	描述
==	等于
===	绝对等于（值和类型）
!=	不等于
!==	绝对不等
>	大于
<	小于
<=	小于等于
>=	大于等于

特殊情况的比较结果

表达式	结果
null == undefined	true
"NaN" == NaN	false
5 == NaN	false
NaN == NaN	false
NaN != NaN	true
false == 0	true
true == 1	true
true == 2	false
undefined == 0	false
null == 0	false
"5" == 5	true

布尔操作符

运算符	描述
&&	and
||	or
!	not

模板字符串

模板字符串是增强版的字符串，用反引号 (`)来标识，它可当作普通字符串来使用，也可以用来定义多行文本，或者通过 ${} 在字符串中嵌入变量或表达式。

let a = `template string` // 普通字符串

let name = 'Frank'
let b = `Hello ${name}!`
console.log(b) // Hello Frank!

媒体查询

最简单的媒体查询语法看起来像是这样子的：

@media media-type and (media-feature-rule) {
  /* CSS rules go here */
}

它由以下部分组成：

• 一个媒体类型，告诉浏览器这段代码是用在什么类型的媒体上的（例如屏幕或者印刷品）
• 一个媒体表达式，是一个被包含的CSS生效所需的规则或测试
• 一组CSS规则，会在测试通过且媒体类型正确的时候应用

媒体类型（media-type）

常见的媒体类型有：

• all：所有类型设备
• print：打印预览模式
• screen：屏幕设备，是我们最常用的类型

媒体特征规则（media-feature-rule）

在指定了媒体类型之后，用一条规则指向一种媒体特征。为了建立响应式设计，我们一般最常探测的特征是视口宽度，而且我们可以使用 min-width、max-width 和 width 媒体特征，在视口宽度大于或者小于某个大小，或者恰好处于某个大小的时候，应用CSS。

这些特征是用来创建响应不同屏幕大小的布局的

@media screen and (max-width: 600px){
    /*最大宽度为600px*/
}
@media screen and (width: 600px){
    /*宽度刚好600px*/
}
@media screen and (min-width: 600px){
    /*最小宽度600px*/
}

媒体查询与或非

与

@media screen and (min-width: 400px) and (orientation: landscape) {
    /*媒体是屏幕最小宽度为400px，并且屏幕为横屏模式*/
  }
}

或

@media screen and (min-width: 400px), screen and (orientation: landscape) {
    /*媒体是屏幕最小宽度为400px，或者媒体是屏幕为横屏模式*/
}

非

@media not all and (orientation: landscape) {
    /*不是横屏*/
}

一般来说我们主要考虑5种类型的设备屏幕，各自对应的分辨率通常为：

• mobile portrait：竖屏移动设备，< 640px
• mobile landscape：横屏移动设备，> 640px
• tablet portrait：竖屏平板设备，> 768px
• tablet landscape：横屏平板设备，> 1024px
• laptop：PC电脑，> 1280px

Grid高级布局

minmax函数

minmax 函数为一个行/列的尺寸设置了取值范围，比如设定 minmax(100px, auto)，那么尺寸就至少为100像素，并且如果内容尺寸大于100像素则会根据内容自动调整，这里试一下把 grid-auto-rows 属性设置为 minmax 函数，然后来看一下效果。

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: minmax(100px, auto);
  grid-gap: 20px;
}

如果所有网格内的内容均小于100像素，那么看起来不会有变化，但如果其中某一项放入很长的内容或者图片，你可以看到这个格子所在的那一行的高度编程能刚好容纳内容的高度了。

自动多列填充

我们可以把 repeat 和 minmax 结合起来，实现一个非常有用的功能，某些情况下，我们需要让网格自动创建很多列来填满整个容器。通过设置 grid-template-columns 属性，我们可以实现这个效果，不过这一次我们会用到 repeat 函数中的一个关键字 auto-fill 来替代确定的重复次数。而函数的第二个参数，我们使用 minmax 函数来设定一个行/列的最小是以及最大值 1fr。

我们来尝试一下下面的代码：

.container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  grid-auto-rows: minmax(100px, auto);
  grid-gap: 20px;
}

你应该能看到形成了一个至少200像素宽的列的网格，将容器填满。随着容器宽度的改变，网格会自动根据容器宽度进行调整，每一列的宽度总是大于200像素，并且容器总会被列填满，这样就可以实现响应式布局的效果。

Flex

flex的shrink属性设置为0可以避免被挤压

flex的basis属性可以设置初始大小

背景图片拉伸

background-size:cover

背景图片定位某块位置

background-position:-y -x

grid

定义一个网格

首先，将容器的 display 属性设置为 grid 来定义一个网络。与弹性盒子一样，将父容器改为网格布局后，他的直接子项会变为网格项。把下面的css规则加到你的文件中。

.container {
  display: grid;
  grid-template-columns: 200px 200px 200px;/*定义三列，每列宽200px*/
}

使用fr单位的灵活网格

看下面的代码

.container {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;/*使得第一列的宽度是第二第三列的两倍。*/
}

fr 可以与一般的长度单位混合使用，比如 grid-template-columns: 300px 2fr 1fr，那么第一列宽度是 300px，剩下的两列会根据除去 300px 后的可用空间按比例分配。

重复构建列

你可以使用 repeat 来重复构建具有某些宽度配置的某些列。举个例子，如果要创建多个等宽轨道，可以用下面的方法。

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);/*等价于1fr 1fr 1fr*/
  grid-gap: 20px;/*间隙为20px，可用row和column指定行列间隙*/
}

图片缩小后清晰度不够

在img里加上

image-rendering: -webkit-optimize-contrast;

文本超出后省略

display: -webkit-box;

设置行数

-webkit-line-clamp: 1;

-webkit-box-orient: vertical;

overflow: hidden;

Flex布局

排列方向

弹性盒子提供了 flex-direction 这样一个属性，它可以指定主轴的方向（弹性盒子子类放置的地方）— 它默认值是 row，这使得它们在按你浏览器的默认语言方向排成一排（在英语/中文浏览器中是从左到右），如果更改为如下设置：

.box {
  flex-direction: column;
}

你会看到，这会将那些元素设置为列布局。

换行

当你在布局中使用定宽或者定高的时候，可能会出现问题即处于容器中的 弹性盒子子元素会溢出，破坏了布局，解决此问题的一种方法是将以下声明添加到 css 规则中：

.box {
  flex-wrap: wrap;
}

.item {
  flex: 200px;
}

flex 项的动态尺寸

flex 属性是一个无单位的比例值，表示每个 flex 项沿主轴的可用空间大小。本例中，我们设置 <article> 元素的 flex 值为 1，这表示每个元素占用空间都是相等的，占用的空间是在设置 padding 和 margin 之后剩余的空间。因为它是一个比例，这意味着将每个 flex 项的设置为 400000 的效果和 1 的时候是完全一样的。

article {
  flex: 1;
}

水平和垂直对齐

align-items 控制 flex 项在交叉轴上的位置。

• 默认的值是 stretch，其会使所有 flex 项沿着交叉轴的方向拉伸以填充父容器。如果父容器在交叉轴方向上没有固定宽度（即高度），则所有 flex 项将变得与最长的 flex 项一样长（即高度保持一致）。
• center 值会使这些项保持其原有的高度，但是会在交叉轴居中。
• 你也可以设置诸如 flex-start 或 flex-end 这样使 flex 项在交叉轴的开始或结束处对齐所有的值。

justify-content 控制 flex 项在主轴上的位置。

• 默认值是 flex-start，这会使所有 flex 项都位于主轴的开始处。
• 你也可以用 flex-end 来让 flex 项到结尾处。
• center 在 justify-content 里也是可用的，可以让 flex 项在主轴居中。
• space-around 是很有用的——它会使所有 flex 项沿着主轴均匀地分布，在任意一端都会留有一点空间。
• 还有一个值是 space-between，它和 space-around 非常相似，只是它不会在两端留下任何空间。

CSS

定位

相对定位：relative，相对于原来的位置偏移

绝对定位：absolute，没有父级元素的前提下基于浏览器定位，父级元素存在定位，相对父级元素定位，在父级元素范围内移动。

固定定位：fixed，基于浏览器定位，不随着网页滑动变化

动画

animation 使得可以将从一个CSS样式配置转换到另一个CSS样式配置。动画包括两个部分：描述动画的样式规则和用于指定动画开始、结束以及中间点样式的关键帧。

一旦完成动画的时间设置， 接下来就需要定义动画的表现。通过使用 @keyframes 建立两个或两个以上关键帧来实现。每一个关键帧都描述了动画元素在给定的时间点上应该如何渲染。

animation-iteration-count 用以指定动画重复的次数，仅仅使用该属性就能使动画重复播放。在该例中，设该属性为 infinite 以使动画无限重复

HTML

各种基础标签

和CSS、JavaScript的关系

浏览器

浏览器开发者模式

Elements/元素：查看修改DOM

Console/控制台：查看JS代码打印输出，直接执行JS代码

Sources/源代码：开发人员查看和调试加载资源

Application/应用程序：开发人员查看Web储存的数据

CSS

选择器

类型选择器、id选择器、类选择器、属性选择器、伪类选择器、后代选择器、子选择器。

盒子模型

由margin/外边距，padding/内边距，border/边框组成

Vscode

配置插件Prettier

Nginx

创建本地目录d:/www

配置http server(在nginx/nginx/conf/nginx.conf文件里)

server {
 listen 8200;#端口号
 location /{
  root d:/www;
  autoindex on;#指令会自动列出指定目录下的所有文件，仅适用开发环境，方便浏览测试，生产环境切勿开启
 }
}

启动：双击 nginx.exe 或者执行 ./nginx不建议

启动：start nginx建议

结束：./nginx -s stop

重启：./nginx -s reload

检查配置：./nginx -t

NodeJs

用vscode创建xx.js文件

console.log("hello world");

#命令行中执行
node xx.js

npm

随NodeJS一起安装的包管理工具

npm -v // 查看版本号 npm init // 初始化本地仓库 npm install [packageName] // 安装npm的包

使用npm下载moment包，npm install moment

Git

工作区：当前更改代码的地方

暂存区：用git add命令添加新文件，修改文件，用git rm --cached删除文件

本地仓库：用git commit把暂存区提交到本地仓库

远程仓库：用git push把本地仓库提交到远程仓库，用git clone拷贝远程仓库到本地

git init 创建本地仓库

git config user.name "your_name" 设置用户名

git config user.email "your_email" 设置邮箱

git status 查看文件状态

git add 添加新文件修改旧文件

git branch develop 创建 develop 分支

git branch 查看分支

git checkout develop 切换到 develop 分支

git branch -d develop 删除 develop 分支，删除之前需要先切换到其他分支

git commit -m "message" 提交暂存区的文件到版本库，message自己写的信息

git log 查看提交历史

git remote add origin https://git.xxx 将本地仓库和远程仓库链接起来

git push -u origin master 推动本地仓库到远端仓库，-u 参数可以让我们以后省略后面的参数git push

git checkout test 工作区的文件从暂存区恢复

git reset HEAD test 错误地添加了文件或改动到暂存区，执行命令撤销

git pull 获取最新的远端仓库代码，如果远端仓库有修改必须执行该命令后才能提交，会自动合并，产生冲突需要自己选择如何合并

git pull origin develop 获取远端仓库的指定分支

脚本宝典总结

以上是脚本宝典为你收集整理的前端进阶（建议从下往上阅读）全部内容，希望文章能够帮你解决前端进阶（建议从下往上阅读）所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。