首页  思维导图  详情

前端总结

2019-10-28 18:43:16   0  举报





AI智能生成

前端总结

前端

作者其他创作

大纲/内容

1.web前端

1.面试相关

1.html结构的语义化

1.传统的html结构都是一些div和css，理解起来非常不方便；语义化就是说尽量使用官方的有语义的标签

2.写html代码时要注意的问题

1.尽量少用无语意的div和span

2.在语义不明显时用div或p，尽量用p，p在默认情况下有上下间距

3.不要用纯样式标签，如：b、font、u等

4.表单域要用fieldset标签包起来

3.html5新增的语义化标签

1.header元素，表示网页和section的页眉

2.footer元素，表示网页或section的页脚

3.hgroup元素，表示网页和section的标题，常用于多个连续的h1-h6标签的情况

4.nav元素表示页面的导航链接区域

5.aside元素，定义所处内容之外的内容，常用语文章的侧边栏

6.article元素，定义一个独立的内容区域

7.section元素，定义的是一个相关的内容区域

2.px、em、rem的区别和联系

1.px、em、rem都是计量单位，用于表示尺寸

2.px表示绝对尺寸，用于设置字体大小和元素宽高等

3.em表示相对尺寸，字体大小相对于父元素的字体大小，宽高相对于该元素字体大小

4.rem表示相对尺寸，全部长度相对于根元素<html>的字体大小

3.flex布局

1.容器默认存在两个轴，水平的主轴和垂直的交叉轴

2.容器的属性

1.flex-direction属性决定主轴的方向

1.row表示主轴为水平方向，起点在左端

2.row-reverse表示主轴为水平方向，起点在右端

3.column表示主轴在垂直方向，起点在上沿

4.column-reverse表示主轴在垂直方向，起点在下沿

2.flex-wrap属性定义如果一条轴线排不下，如何换行

1.nowrap表示不换行

2.wrap表示换行，表示向下换行

3.wrap-reverse表示向上换行

3.flex-flow属性是flex-direction和flex-wrap的简写

1.如：.box{flex-flow:row wrap}

4.justify-content属性定义项目在主轴的对齐方式

1.flex-start表示左对齐

2.flex-end表示右对齐

3.center表示居中

4.space-between表示两端对齐，项目之间的间隔相等

5.space-around表示项目两侧间隔相等

5.align-items属性定义项目在交叉轴对齐方式

1.flex-start表示交叉轴起点对齐

2.flex-end表示交叉轴终点对齐

3.center表示交叉轴中点对齐

4.baseline表示第一行文字的基线对齐

5.stretch表示如果项目未设置高度，将沾满整个容器

6.align-content属性定义多根轴线的对齐方式

1.如果只有一根轴线，该属性不起作用

2.flex-start表示交叉轴起点对齐

3.flex-end表示交叉轴终点对齐

4.center表示交叉轴的中点对齐

5.space-between表示与交叉轴两端对齐，轴线之间平均分布

6.space-around表示轴线两侧间隔相等

7.stretch表示轴线沾满整个交叉轴

3.项目的属性

1.order定义项目的排序大小值，数值越小越靠前，默认为0

2.flex-grow属性定义项目的放大比例，默认为0

3.flex-shrink属性定义项目的缩小比例，默认为1

4.flex-basis属性定义项目占据的固定空间

5.flex属性是flex-grow、flex-shrink、flex-basis的简写

6.align-self属性允许单个项目与其他项目不一样的对齐方式

4.闭包

1.一个函数可以访问到它作用域外部的变量，这个函数和这个变量所在的环境构成闭包

2.闭包的作用

1.实现公有变量，缓存数据，封装，私有化，模块化开发

1.技术

1.实现公有变量，缓存数据，如：计数器

function add(){count=0; function demo(){count++;console.log(count)} return demo;} var counter=add(); counter()输出1，counter()输出2

2.缓存数据

5.如何理解this

1.如果一个函数中有this，但它没有被上一级对象调用，那么这个this指向window

2.如果一个函数中有this，这个函数有被上一级调用，那么这个this指向上一级对象

3.构造函数中使用this，this指向new之后的实例

4.箭头函数中使用this，它会从自己作用域链的上一层继承this，对象的多层嵌套不属于作用域链嵌套

6.伪元素和伪类的区别

1.伪类是为了弥补css选择器的不足而存在；伪元素本质是创建一个有内容的虚拟容器

2.伪元素一般用双冒号(::)，伪类一般有单冒号(:)

2.常用的伪类

1.状态伪类

1.(:link) 选择未访问的链接

2.(:visited)选择已访问的链接

3.(:hover)鼠标指针浮动在其上

4.(:active)选择活动的链接

5.(:focus)获取焦点的字段

2.结构化伪类

1.(:not)一个否定伪类，匹配不符合参数选择器的元素

1. li:not(.first-item){}

2.(:fisrt-child)匹配第一个元素

1.ul:first-child{}

3.(last-child)

4.(:nth-child)匹配an+b元素

ul:nth-child(2)匹配第二个元素

ul:nth-child(1n+0)匹配每一个元素

ul:nth-child(2n+1)匹配1,3,5等元素

3.表单相关

1. :checked匹配被选中的input元素，包括radio和checkbox

2. :default匹配表单的提交按钮，默认按钮

3. :disabled匹配禁用的表单元素

4. :enabled匹配没有设置disabled的表单元素

5. :in-range匹配指定区域的元素

6.out-of-range

7. :valid匹配验证正确的表单元素

input[type=email] :valid{}

8. invalid

3.简单的伪元素

1. ::before 在备选元素前插入内容

h1::before{content:"hell";}

2. ::after

3. ::first-letter

4. ::selection 匹配用户选中的文本

5. ::first-line匹配元素的第一行文本

2.网络

1.<html lang='en'> ，lang属性设置文档语言

2.meta标签的用法

1.meta指定文档编码

1.<meta charset="utf-8">

2.适配移动页面

1.<meta name="viewport" content="width=device-width,initial-scale=1.0">

3.添加页面描述

1.<meta name="description" content="xxxx">

3.你用过哪些h5标签

1.<header>网页头部

2.<nav>网页的导航

3.<section>标签定义文档的节

4.<article>标签的内容独立于文档的部分

5.<aside>网页侧边栏

6.<footer>网页的页脚

7.<canvas>幕布

8.<Audio>音频

9.<Video>视频

4.盒模型

1.标准盒模型，盒子的总宽度/高度=width/height + padding + border + margin

2.怪异盒模型，盒子的宽度/高度=width/height + margin

3.标准模型的缺点是盒子的宽度和高度计算复杂，怪异盒模型的优点是，当确定了width/height之后可以随意修改padding和borde而不用担心容器被撑爆

3.es6

1.变量声明

1.let、const、var

1.let声明变量只能作用于当前代码块，不能重复声明，不能被提前访问，未初始化默认为undefined

2.const声明常量只能作用于当前代码块，不能重复声明，不能被提前访问，声明时需要初始化

3.var声明变量可以作用于代码块外，可以重复声明，未初始化默认为undefined

2.解构赋值

1.对象的解构赋值

1.目标值为null

let position={x:null}; let {x = 1} = position ; 输出x的值为null

2.目标值为undefined

let position={x:undefined}; let {x}=position; 输出x的值为undefined；

3.目标值没有匹配到

let {y1}={}输出y1的值为undefined

4.设置默认值

let {m=1} = {}输出m的值为1

2.数组的解构赋值

1.普通赋值

let [x,y,z]=[1,2,3];输出x=1,y=2,z=3

2.模式匹配

let [x,...y]=[1,2,3,4];输出x=1,y=[2,3,4]

3.空值

let [x,y] = [1];输出x=1,y=undefined

5.字符串

let [a,b]='hello';输出a='h',b='e'

3.多层解构赋值

1.对象中包含对象

let {x}={x:{y:{z:12}}}输出x = {y:{z:12}};

let {x,x:{y}} = {x:{y:{z:12}}};输出x={y:{z:12}}; y={z:12}

2.对象中包含数组

let {a1:{a2}} = {a1:{a2:['xx']}} 输出a2=['xx'];a1未声明报错

3.数组中包含数组

let [x,[y,z]] = [1,[2,3]];输出x=1,y=2,z=3

3.Symbol数据类型

1.es6中新增加的一种数据类型了，为了防止字符串重复问题，一般用于对象的属性中

2.基本数据类型：Number、String、Boolean、Object、null、undefined、Symbol

4.Map

1.Object只能接受String类型和Symbol作为key，Map可以接受其他数据类型

2.基本用法

1.初始化

1.map = new Map(); map.set(1,1);map.get(1);输出1

2.map = new Map([['name','zz'],['age',12]]);

3.其他方法

map.size，map.has(key)，map.delete(key)，map.clear()

4.遍历

map.keys()，map.values()，map.entries()都可以在for ...of循环中使用

5.数据类型转换

1.数组转map，需要二维数组

map = new Map([['name','xx'],['age',12]])

2.map转对象，遍历map赋值给一个对象

3.对象转map，遍历对象的keys赋值给map

4.map转JSON，JSON.stringify([...map])

5.JSON转map，new Map(JSON.parse(jsonstr))

5.新增加的数组操作

1.扩展运算符(...)

[...[1,2],...[3,4]];输出[1,2,3,4]

2.数据过滤filter

arr=[1,2,3];arr.filter(item => item >2);输出新数组[3]

3.数据处理map

arr.map(item => item*2) 输出新数组[2,4,6]

4.forEach遍历

arr.forEach(item => console.log(item));

6.Set对象

1.Set类似于数组，成员值唯一

2.基本用法

1.set = new Set();set.add(1);for(item of set){console.log(item)}输出1

2.set = new Set([1,2,3]);

3.其他用法

1.set.size，set.delete(1)，set.has(1)

4.遍历

set.keys()，set.values()，set.entries()都可以用于for...of

7.Proxy对象

1.Proxy对象可以用于修改对象某些操作的默认行为，相当于增加了一层拦截处理

2.常用的拦截操作

1.拦截get操作

proxy= new Proxy({m:1},{get: function(obj,key){console.log('obj',obj);console.log('key',key); return obj[key]}})

2.拦截set操作

s = new Proxy({},{set:function(obj,key,value){console.log('obj',obj);obj[key]=value}})

3.拦截apply操作，当目标对象是函数时，被调用就会被apply方法拦截

function sub(a,b){return a-b} handler={apply:function(obj,ctx,args){console.log('xx');return Reflect.apply(obj,ctx,args);} proxy=new Proxy(sub,handler); proxy(3,1);输出2，Reflect.apply(obj,ctx,args)方法是一个静态方法，可以调用目标对象函数

4.拦截has操作，当使用in命令判断是否有某个属性时被调用

proxy = new Proxy({name:'xx'},{has:function(obj,prop){return prop in obj}}) 'name' in proxy 输出true

5.拦截construct操作，当使用new命令创建对象时被调用

class Exam{constructor(name){this.name=name}} let handler ={construct:function(obj,args){return Reflect.construct(obj,args);}} let proxy=new Proxy(Exam,handler); obj = new proxy('xx'); 输出obj={name:'xx'}

6.拦截deleteProperty操作

proxy=new Proxy({},{deleteProperty:function(obj,prop){return Reflect.deleteProperty(obj,prop);}}) delete proxy.name;

3.对proxy对象的操作实际上都是对目标对象上的操作

8.Reflect对象

1.Reflect对象的方法与Proxy对象的方法一一对应，Reflect的作用主要是实现的Object对象一些语言内部的方法

9.数值操作

1.Number.isFinite()检查数值是否有限，Number.isNaN(NaN)检查是否为NaN，Number.isInteger(1)检查是否为整数

2.Number.parseInt()将字符串转为给定进制的整数

1.Number.parseInt('11.11');输出11

2.Number.parseInt('0011',2);输出3

3.Number.parseFloat()将字符串转为浮点数

1.Number.parseFloat('12.21')输出12.21

10.Math对象扩展

1.Math.cbrt(1)计算立方根，Math.imul(1,2)计算两数相乘，Math.hypot(3,4)计算两数的平方和的平方根，Math.trunc(12.3)返回整数部分，Math.sign(1)判断正负号

11.ES6对象

1.对象字面量

1.const person={age:12,name:13}

2.方法名简写

1.x = {getName(){return 'xl'}}

3.属性名表达式

1.obj = {['he'+'oo'](){return 'xx'}}

4.对象扩展运算符，用于去除对象然后拷贝到当前对象

person={name:'mm'} someone={...person} 输出{name:'mm'}

5.Object.assign(target,source1,...)合并对象的属性到目标对象

6.Object.is()判断是否相等，基本类似于===

12.数组

1.Array.of()将参数作为元素形成数组

1.Array.of(1,2,3)输出[1,2,3]

2.Array.from()将类数组转为数组

1.Array.from([1,2])输出[1,2]

2.Array.from([1,2,3],(n) => n*2)输出[2,4,6]

3.find()查找符合条件的元素，返回第一个元素

1.[3,2,5].find(item => item >1) 输出3

4.findIndex()查找符合条件的元素，返回第一个元素的索引

5.fill(value,start,end)填充值

1.[1,2,3].fill(0,1,2);输出[1,0,3]

6.copyWithin(startTarget,startSource,startEnd,)范围性覆盖值

[1,2,3,4].copyWithin(0,2,4);输出[3,4,3,4]

7.includes()包含指定值

[1,2,3].includes(2);输出true

8.嵌套数组转一维数组flat(n)指定转换层数

[1,[2,[3]]].flat()输出[1,2,[3]]

2.[1,[2,[3]]].flat(Infinity)输出[1,2,3]

13.函数

1.函数参数扩展

1.默认参数

1.function fn(name,age=12){console.log(name + ',' + age)} fn('xx')输出'xx,12

2.多参数函数

1.f= function(...values){console.log(values)} f(1,2,3);输出[1,2,3]

3.箭头函数

1.let f = (item) => item*2; f(2);输出4

4.响应式开发

1.响应式布局和自适应布局

1.响应式布局等于流动网格布局，而自适应布局等于使用固定分割点来进行布局

2.响应式布局需要考虑更多的不同状态，更加复杂，自适应布局只需要考虑几种不同的状态

3.响应式布局可以实现在不同屏幕分辨率的终端上浏览网页的不同展示方式，使网页在手机和平板电脑上有更好的浏览体验

2.响应式开发步骤

1.在<head>标签里添加meta标签，使设备宽度作为视图宽度

2.通过媒介查询设置样式

@media screen and (max-width:980px){#head{...} #content{...}}

屏幕区间设定：超小屏幕（移动设备768px以下），小屏设备（768px-992px），中等屏幕（992px-1200px），大屏设备（1200px以上）

3.设置多种视图宽度

@media only screen and (min-width:768px) and (max-width:1024px){} @media only screen and (min-width:320px) and (max-width:767px){}

5.Bootstrap响应式开发

1.Bootstrap网格系统

1.Bootstrap是移动设备优先、不固定的网格系统，随着设备或视口大小的增加而适当扩展到12列

2.媒体查询

@media (max-width: @screen-xs-max) { ... }
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... }
@media (min-width: @screen-lg-min) { ... }

3.响应式列使用（一般用col-*-*指定在设备下占据的列数）

4.偏移列（一般使用col-*-offset-*，col-xs-*不支持偏移可以用空单元格代替）

5.嵌套列，在col里面继续增加row

2.Bootstrap排版

1.标题h1-h6，子标题<small>

2.添加class="lead"强调文本，更大更粗、行高更高的文本

3.地址使用<address>标签

4.<blockquote>引用

5.列表

1.有序列表<ol><li></li></ol>

2.无序列表<ul><li></li></ul>

3.未定义样式列表<ul class="list-unstyled"><li></li></ul>