浅谈前端开发问题two

1.平台涉及

stack overflow-bug neighbour
sql
动手学深度学-AI
upwork
freelancer

2.chrom 字体

可以解决“0”和“1”不等宽的问题
@font-face{
font-family:“ROBOTO”,cansel-serifi

3.前端模块化编程

优点：减少代码复用性
（import ,export）
1.命名导出：export 变量（可以多个）
2.default export变量（只能有一个）
3.关键字 as:重命名处理{~as ~}
4.关键字：表示一个整体export*from '|user.js|'导出整个用户概念
5.解构导出：export const {key1,key2:age}=0

4.伪类作用

伪类的作用，
1.是为鼠标光标设置悬停的样式
2.链接已经点击和未点击
3.设置元素获得焦点样式
:active
:focus
:hover
:visited
:first-child
:lang (add style)

5.flex-direction

row(主轴在水平方向，起点在左端）
row-reverse:主轴在水平方向，起点在右端
column：主轴在垂直方向，起点在上沿

6.background-position

预定义关键字定位（xpos ,ypos）
水平方向可选关键字定位 left |center|right
垂直方向 top|center|bottom

7.css 中相对定位

background-position:left:XX top:xx

8.Css属性添加

background-size(可调节大小)
代码background-size:cover(使背景图片覆盖全局）
：container（适应区域，完整呈现）

9.Z-index 层叠

background/border
z-index<0
block box
float
inline box
z-index:auto/z-index=0
z-index>0

10.产生层叠上下文的情况

1.根元素
2.position为非static，且Z-index不为auto
3.若父元素设置display:flex,且当前元素Z-index不为auto
4.Z-index不为auto的flex元素，即父元素display：flex| inline-flex
5.opacity 小于1的元素
6.transform属性值不为none的元素
7.isolation 属性设置为isolate元素
8.will-change.指定任意

思考触发BFC的原因

设置了浮动隐藏，弹性布局，转化为行内块，定位为绝对定位和固定定位，将标签元素转化为表格元素。

11.box-shadow

offset-x:横轴偏移
offset-y:纵轴偏移
blur:阴影模糊半径
spread:大于0，阴影增大
小于0，阴影减小
color
positon:insert

12.opcity

小于一，子元素会拥有相同的透明度，且为重新定义Z-index元素
而其他元素为非定位元素，那么该元素会高于其它元素，若超过指定范围，截取与之最近的值。

13.设置背景为全透明

background-color:transparent

14.classlist 返回数组类名

classList.add(newclassname)
classLIst.remove(oldclassname)
classList.toggle(classname)
a.contains(“classname”)判断类型是否存在，返回false和true
classList.replace(oldclassname,newclassName)

15.toggle（）

可以一次调用N个指定函数，直到最后一个函数，重复对这些函数轮番调用，与switch同有着切换意思
switch：多个不同的状态和选项之间变换
toggle（）：只有开与关两种状态

16.``作用

反引号可以执行一些指令并将执行结果赋值给变量

17.cursor

help,wait,w-resize,s-resize,sw-resize,se-resize,n-resize,nw-resize,
e-resize,move,pointer,crosshair,auto,default

18.预解析

预先解析的function和var，预解析后，它不会成为无效代码

<script>
alert(test);
var test="Preliminary analysis"
alert(test);
</script>

它会返回undefined和Preliminary analysis

19.JSX基本语法规则

document.querySelector("#demo)
(它会获取dom 的信息）真实dom
1.object 2.对比真实dom
2.语法规则
核心：【babel:可进行降级处理（es6还原es5），dom:创建虚拟的】
规则：1.类名需要使用classname ，会自动渲染成class
2.使用Js语法，需要使用大括号进行包裹
3.style 后面必须是大括号{{}}
4.注释标签（不识别HTML，注释信息）加{}就能识别
5.jsx

测试

,自动渲染成组件
6.对象类型中，不能直接作为值放入要渲染元素中
注：jsx中大括号，只能写JS表达式

20.DOM树

它是文档控制模型，HTML css js 都在它中进行实现脚本控制web界面

21.高级函数

闭包
回调函数

22. 虚拟DOM原理

：用普js描述DOM结构，因为不是真dom
原生js去描述一个dom的节点，实际上它只对真dom的一层抽象，在js和dom之间做了一个缓存，利用patch对比新旧虚拟DOM记录到一个对象中按需更新，最后创建真dom.

23.构造函数

它没有返回值，与类同名，创建对象时候再执行，主要用于初始化## 24.解构赋值
数组解构赋值：
1.同时赋值多个变量
2.结构嵌套数组
3.相同模式的不完全结构
4.解构的默认值
对象的解构赋值
1.根据属性解构对象
函数的解构赋值
1.解构对象赋值参数
2.解构数组类型参数
3.为参数设置默认值

24.三元表达式

条件？真：假

25.react

react 是核心
redux 相当于数据库
ReactRouter是专为React设计的路由方案解决方案
axios 用于浏览器和Node.Js的http客户端：
Ant Degisn很好的React库

26.mouse style

onclick
onmouseover
onmouseout
onfocus
onblur
onmousemove
onmousedown

26.case

tab栏切换
hs-自定义属性
父节点
子节点
新浪的下拉菜单
兄弟节点
通过innerHTML创建元素
创建和添加节点
发布留言板案例
删除节点
删除留言板
克隆节点
动态生成表格案例
三种创建元素方式的区别
总结dom重点核心
事件注册两种方式
删除事件

27.case

dom事件流三个阶段
事件对象
事件对象阻止默认行为
阻止事件冒泡
事件委托
常见的鼠标事件
鼠标事件对象
跟随鼠标天使
键盘事件
键盘事件对象
模拟京东按下键获得焦点
模拟京东快递查询案例

28.case

BOM顶级对象
window常见事件
调整窗口大小事件
定时器setInterval
倒计时parseInt
短信验证
this指向

29.case

同步，异步
事件循环
location
navigator
offset系列属性
计算鼠标在盒子里坐标
仿京东放大镜案例
client系列
scroll系列
仿淘宝固定侧边栏
mouseenter和mouseover区别

30.case

swiper插件的使用-移动端案例
touch事件
触摸事件对象
本地存储sessionStorage
记住用户名