前端知识总结

前端知识总结

web标准的理解
web标准是由网页有结构，表现，行为构成！
结构的标准
XML+XHTML到目前的html5都有差异
表现的标准行为
css2标准到现在css3的新属性，兼容
dom+javascript
浏览器的内核差异
目前市场上基本有4大内核

Trident 典型代表IE浏览器，网页的标准兼容性不好

Gecko 典型代表火狐浏览器 功能强大

Webkit 典型代表谷歌浏览器，基本安卓和苹果手机上都是这个

Presto Opera浏览器，这个在市场上份额很少，但是linux系统上很完美

hack
针对所有IE：
针对IE9及以下版本：
我们可以给浏览器每个版本的写上css的类，然后通过类来在特定的浏览器版本生效
-例如 .ie7 .content{}
css布局
我们可以把结构和表现分离开，
便于我们后期维护
盒子模型
盒子模型有4个属性
外边距 margin
内边距 padding
边框 border
内容部分 content
IE盒子
内容content的width包括了内边距和边框
选择器的优先级
！important 这个最高级

color:blue !important;

style 优先级第二

style=“color:red”

id 优先级第三

#color{color:red}

:nth-child(3)选择符 优先级第四

p:nth-child(3)

类选择符 优先级第五

.color{color:red}

标签选择符 优先级第六

div{color:red}

通配符选择符 优先级第七

*{margin:0;padding:0}

html5
html5新增加的标签，很语义化

header
footer
nav
section
aside 不重要
atrical 不重要
重要的标签

video 视频
audio 音乐
canvas 画布
新增加的表单新属性

placehplder 提示

required 必填

tel 电话

date 日期

number 数字

color 颜色

css3
样式

border-radius 圆角

box-shadow 阴影

background-size 北京图片尺寸

text-shadow 文本阴影

linear-gradient 线性渐变

动画

transform 变形
单位deg

rotate(x) 旋转

参数x必须是以deg结尾的角度数或0，可为负数表示反向。
scale 缩放

单位是数字

元素x和y方向均缩放a倍

transform: scale(a);

元素x方向缩放a倍，y方向不变

transform: scaleX(a);

-x方向不变,元素y方向缩放b倍

transform: scaleY(b);
translate 平移

单位px

元素x方向位移a，y方向位移b

transform: translate(a, b);

元素x方向位移a，y方向不变

transform: translateX(a);

元素y方向位移b，x方向不变

transform: translateY(b);

skew() 倾斜

单位 deg

元素x方向倾斜角度a
transform:skew(a,b)
####transition 过渡

transition-property

作用与css样式 也可以all
transition-duration

过渡运行总时间
10s
transition-delay

过渡推迟多少秒执行
animation 动画
animation-name

动画名字

animation-duration

动画运行总时间

animation-delay

动画延迟多长时间

animation-iteration-count

动画执行次数，也可以循环执行 infinite

定义一个动画 ,最后动画完成一定要100%

@-webkit-keyframes 动画名字{0%{}50%{}100%{}}

flex布局
display: flex;

flex

1 占当前比例的1份
2 占当前比例的2份
flex-direction 项目的排列方向

row 从下往上排
row-reverse 从上往下排
column 从左往右排
column-reverse 从右往左排
flex-wrap 决定换不换行

wrap 换行
nowrap 不换行
justify-content 对齐方式

center 横向居中对齐
flex-start 左边对齐
flex-end 右边对齐
align-items 对齐方式

center 纵向对齐方式
flex-start 上边对齐
flex-end 下边对齐
js数据类型
null 不存在，连声明变量都没有
undefined 未定义，声明变量了却没有值
number 数字
string 字符串
boolean 布尔
object 对象
js运算
基本运算符
加
减
乘
/ 除
= 赋值
++ 累加
– 累减
% 求余
+= 每次赋值累加
-= 每次赋值累减
js对象
定义一个对象
let obj={}
js 原型
每一个函数上都有一个属性叫prototype
prototype
js 闭包
函数执行都会形成一个私有作用域，保护里面的私有变量不受外界干扰,这种保护叫闭包
var a=10;
function fe(){
var a=666; //私有变量
console.log(a);
}
a=10000; //全局
fe() //666 私有的变量受保护，没有被全局影响
console.log(a) //10000
继承
es5 继承就是修改原型链

es6 a继承b的一些属性和方法

class a extends b{ constructor(props){ //调用实现父类的构造函数 super(props); } }

作用域
作用就是保护变量
{}
原型链
_proto_是任何对象都有的属性
常用事件
onclick

点击事件

onmouseover

鼠标滑进

onmouseoute

鼠标划出

onload

页面加载完成

onkeydown

键盘按下

onkeyup

键盘弹起

onfocus

获取焦点

onblur

失去焦点

onchange

用户改变input输入或者select下拉框改变

oninput

文本框中输入就执行

ondblclick

双击

onscroll

滚动

onresize

浏览器的窗口重置大小就发生

onselect

文本被选中

事件对象
onclick(event)

触发事件的元素节点

event.target

阻止当前事件 e.cancelBubble=true;

event.stopPropagation()

阻止默认行为

e.preventDefault()

正则表达式
RegExp

匹配三个数字

new RegExp("/\d{3}$/")

search()

检索字符串开始的位置

-match()

value值.match(正则表达式)

test()

正则表达式.test(value值)

json
json格式

{}，{’’:[{},{}]},[{},{}]等

将字符串转为json对象

JSON.parse()

将json对象转为字符串

JSON.stringify()

DOM操作
创建一个标签

document.createElement(‘div’)

获取元素 -根据id或者class获取元素

document.querySelector("#id"或者".class")
根据id获取元素
document.getElementById()
根据class名字获取
document.getElementsByClassName(‘class’)
根据标签获取
document.getElementsByTagName(‘table’)
获取父元素

ele.parentNode

获取子元素

ele.children

兼容写法

var ele.firstElementChild||ele.children[0];

获取当前元素的第一个子元素

ele.firstChild

获取当前元素的最后一个子元素

ele.firstElementChild
头部添加子元素

appendChild()
删除子元素

removeChild()
属性操作

判断有没有这个类

ele.hasAttribute(‘class’)

移除属性

ele.removeAttribte(‘class’)

-获取属性

ele.getAttribte(‘class’)
-设置属性

ele.setAttribute(‘class’,‘值’)

设置值

innerHTML 内部html

innerText 内部文本

outerHTML 外部HTML

outerText 外部文本

BOM 浏览器对象
window.history.go(-1) 返回上一个窗口页面

setInterval 循环执行计时器

clearInterval 暂停执行

setTimeout 定时执行一次

clearTimeout 暂停执行

location.href 跳转页面

跨域
同源策略

域名

协议

端口

违法上面的一个不同，就叫跨域

jsonp

动态创建script请求，src写链接

jquery的$ajax

dataType:‘jsonp’
fetch ，跨域和不跨域都不用设置

let myHeaders = new Headers({
‘Access-Control-Allow-Origin’: ‘*’,
‘Content-Type’: ‘text/plain’
});
fetch(url, {
method: ‘GET’,
headers: myHeaders,
mode: ‘cors’
}) .then((res) => {
// TODO
})
异步加载
动态创建标签,然后插到body结束标签后

(function() {
var s = document.createElement(‘script’);
s.type = ‘text/javascript’;
s.async = true;
s.src = ‘http://yourdomain.com/script.js’;
var x = document.getElementsByTagName(‘script’)[0];
x.parentNode.insertBefore(s, x);
})();
mvvm框架
vue.js
vue-router 路由
vuex 状态管理
mac框架
react
angular
响应式
all代表所有设备
screen 电脑显示器
handled 便携设备
media all and(min-width:1200px)
自动化构建工具
webpack
以前老版的grunt,gulp没有必要细琢磨
http状态码
200:‘ok’, //成功
206:’’, //部分类容
301:’’, //永久重定向
302:’’, //临时重定向
304:’’, //缓存发现
400:’’, //客户端请求错误
401:’’, // 未授权
403:’’, // 登录之后，无权访问
404:’’, //资源没有找到
500:’’, //服务器端内部错误
503:’’ //服务暂时不可用
html5本地存储
localStorage 永久化本地存储，只要不主动删除 就会一直存在
sessionStoage 会话级存储，关闭浏览器客户端，销毁存储
设置存储
localStorage.setItem(‘存储名字’, 存储类容);
将对象转为string再存储
localStorage.setItem(‘user’,JSON.stringify({username:‘老王’，ID:1}));
获取存储
localStorage.getItem(‘user’);
根据指定的key删除一个元素清空存储 localStoage.clear();
localStorage.removeItem(‘username’);
web安全
XSS
CSRF 跨站伪造
可维护性
重复写的代码封装成一个，重复的功能模块化
结构样式必须分离开，整洁干净
重复操作构建工具去做
代码风格一致，可读性好，别人接手毫不费力
易用性
个人推崇页面简洁，操作简单，直观可见，重点突出
一种主调色彩，搭配少了的辅助相近色，合理布局，轻易突出需要表现的东西
职业生涯、快速学习能力
学习职业生涯不是每天重复你毫不费力的事情，

学会沟通，明确描述自己的问题，并大胆说出自己解决的思路， 调试现象，沟通和请教的时候态度谦虚点不是错，这是基本礼貌，学会 聆听别人的看法。

学会梳理自己技术结构，前端不止页面，后端也属于前端的一种技术，说 这句话不过分，前端越来越复杂，现在应该是全端了，后端不在局限于后端人员 学会接受市场变化，多学习对你职业发展有利的技术

学习应该是一种习惯，自主不讨厌的进行，这不应该是一种 逼迫，应该是一种习惯，不应该有任何埋怨，因为学习是提高你更多了一种认知 ，工作不是应付完成就行，多思考性能优化问题，多重方案的优缺点

css布局
左边100px,右边100px，中间自适应
flex布局
flex:0 0 100px
.content{
display: flex;
height: 20px;
border:1px solid #eeeeee;

    }
    .left{
        width: 100px;
        height: 20px;
        flex-grow: 0;
        flex-shrink: 0;
        flex-basis: 100px;
        background: red;
    }
    .center{
        flex: 1;
    }
    .right{
        width: 100px;
        height: 20px;
        flex-grow: 0;
        flex-shrink: 0;
        flex-basis: 100px;
        background: red;
    }

calc 计算
.content{
width: 100%;
height: 20px;
border:1px solid #eeeeee;

    }
    .content:after{
        display: block;
        height: 0;
        clear: both;
    }
    .left{
        width: 100px;
        height: 20px;
        float: left;
        background: red;
    }
    .center{
       width:-webkit-calc(100% - 200px);
        width:-moz-calc(100% - 200px);
        width:calc(100% - 200px);
        height: 20px;
        float: left;

    }
    .right{
        width: 100px;
        height: 20px;
        float: left;
        background: red;

    }

浮动

   <div style="width:200px; float:right; background-color:#960">这是右侧的内容 固定宽度</div>

   <div style="width:150px; float:left; background:#6FF">这是左侧的内容 固定宽度</div>

   <div style="margin-left:150px;margin-right:200px; background-color:#9F3">中间内容，自适应宽度</div>

</div>

定位
.left,.right{
position: absolute;
top:0;
width: 200px;
height: 20px;
background: red;
}
.left{
left: 0;

    }
    .center{
      margin: 0 200px;
        width: 100%;
    }
    .right{
       right: 0;

    }

左侧菜单栏占300px，右侧内容可以根据浏览器自适应
解决思路现在提供两个
flex 和calc
.content{
width: 100%;
height: 20px;
border:1px solid #eeeeee;
display: flex;
}
.left{
width:100px;
height: 20px;
flex: 0 0 100px;
background: red;

    }
    .right{
        flex:1;
    }

CSS选择器又哪些？有哪些新特性？有哪些伪类？
id选择器 (#myid)

类选择器 (.className)

标签选择器 (div)

相邻选择器 (h1+p)

子选择器 (ul>li)

后代选择器 (li a)

通配符选择器 (*)

属性选择器 (input[type=“text”])

伪类选择器 (a:hover,li:nth-child())

伪类

:active

鼠标点击，增加特效，鼠标松开，特效消失，多用在按钮上

:hover

鼠标划入标签，增加特效，鼠标松开，特效消失

:focus

我们点击元素后想一直拥有某些样式，多用于input标签有焦点时候

:first-child

对元素第一个子元素添加样式

:nth-child(index)

对元素第几个添加样式

:before和after

多用于消除元素浮动

清除浮动
clear:both

结尾处加空div标签设置clear:both

父级标签定义伪类:after给样式来消除

.clearfloat:after{
display:block;
clear:both;
content:"";
visibility:hidden;
height:0;
}
//针对IE
.clearfloat{
zoom:1
}
父级div设置overflow:hidden

父级div定义display:table

div里面图片设置垂直居中
首先设置div为table-cell
div{
width:100%;
height:100%:
position: fixed;
display:table-cell;
vertical-align:center;
}
img{
width:100px;
height:100px
}
第二种定位设置
div {
width:100%;
height:500px;
position:relative;
}
img{
width:100px;
height:100px;
position:absolute;
top:50%;
left:50%;
margin-top:-50px;
margin-left:-50%;
}
第三中transform: translate(-50%.-50%)
.div{
width:100%;
height:100%;
border:1px solid black;
position: fixed;
background-color: rgba(0,0,0,0.5);
}
img{
position:absolute;
width:50px;
height:50px;
top:50%;
left:50%;
-webkit-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
-o-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
background:#22B14C;
}
2级DOM
addEventListener():可以为元素添加多个事件处理程序，触发时会按照添加顺序依次调用。
removeEventListener() 移除事件
##DOM事件捕获和冒泡的具体流程

事件捕获阶段

事件从最上一级标签开始往下找，直到捕获到事件目标（target）
事件冒泡阶段

事件从事件目标（target）开始，往上冒泡到页面最上一级标签
阻止冒泡

IE下设置cancelBubble = true；

event.stopPropagation()

一般也就点击事件冒泡多一点

Event对象的常见应用场景
一个完整的事件系统，一般存在3个角色

事件对象 用来储存事件状态
事件源对象 当前事件在操作的对象
事件监听 当一个事件源生成一个事件对象时，它会调用相应的回调函数进行操作
event.target 当前事件目标元素

preventDefault() 不要执行与事件关联的默认动作

stopPropagation() 阻止事件冒泡

获取event对象兼容写法

event || (event = window.event);

获取target兼容写法

event.target || event.srcElement

阻止浏览器默认行为兼容写法

event.preventDefault ? event.preventDefault() : (event.returnValue = false);

阻止冒泡写法

event.stopPropagation ? event.stopPropagation() : (event.cancelBubble = true);

事件委托
事件委托就是利用事件冒泡，指定一个事件处理程序，管理 某一类型相同的所有事件
// 利用事件委托 比一个一个绑定事件 性能提高多倍
var oUl = document.getElementById(‘oUl’);
var list = oUl.getElementsByTagName(‘li’);

   // 利用事件委托 比一个一个绑定事件 性能提高多倍
   oUl.onclick = function (e) {
       e = e || window.event;
       var tar = e.target || e.srcElement;
       //tar 当前节点 <li></li>
       //tar.tagName当前标签名字li
       //toUpperCase()转为大写
       if(tar.tagName.toUpperCase() === 'LI'){
          console.log(tar.innerHTML);
       }
   }

JS中常遇到的浏览器兼容问题
网页可见区域宽和高

document.body.clientWidth||document.docuemntElement.clientWidth;

document.body.clientHeight||document.docuemntElement.clientHeight;

event事件对象

document.οnclick=function(ev){//兼容写法；
var e=ev||window.event;
var mouseX=e.clientX;//鼠标X轴的坐标
var mouseY=e.clientY;//鼠标Y轴的坐标
}
event中的target
document.οnmοuseοver=function(e){
var e=e||window.event;
var Target=e.target||e.srcElement;//获取target的兼容写法，后面的为IE
var from=e.relatedTarget||e.formElement;//鼠标来的地方，同样后面的为IE…
var to=e.relatedTarget||e.toElement;//鼠标去的地方
}
js创建对象三种方式
var obj={}
var obj=new 函数名()
var obj=new Object()
js 继承的几种方式
原型链继承 ，私有，公有都继承
将父类实例化后绑定在子类的原型上
然后实例化子类，可以调用父类的方法
function Parent(name) {
this.name = name
}
Parent.prototype.home = ‘北京’;
function Child() {
this.age = 8;
}
//将父类的实例绑定在子类的原型上
Child.prototype = new Parent(‘aa’);
//实例化子类
let child = new Child();
//这时候继承父类的公有私有属性
console.log(child.home+child.name);
// 结果 北京 + aa
构造函数继承 ，私有继承，公有不继承
在子类里面，call改变父类this
function Parent(name) {
this.name = name
}
//父类的公有属性
Parent.prototype.home = ‘北京’;

function Child(name) {
this.age = 8;
Parent.call(this,…arguments);

}
let child = new Child(‘hello’);
console.log(child.home+child.name);

//结果是 undefined +hello
组合继承 公有继承，私有不继承
function Parent(name) {
this.name = name
}
Parent.prototype.home = ‘北京’;
function Child() {
this.age = 8;
}
Child.prototype = Object.create(Parent.prototype);
let child = new Child();
//这时候继承只继承父类的公有属性 父类的私有属性没有继承
console.log(child.home+child.name);
// 结果 北京 + indefined
es6继承
class Person {
//控制器
constructor(name,age){
this.name=name;
this.age=age;
}
eat(){
console.log(“吃饭”);
}
}
//关键字 extends 公私有都会继承
class Girl extends Person{
constructor(name,age){
super(name,age); //默认调用父类，并且this就是girl实例
}
}
let g=new Girl(‘aa’,18);
console.log(g.name,g.age);
g.eat();
//结果aa 18
// 吃饭
js合并两个对象
Object.assign
var o1 = { a: 1 };
var o2 = { b: 2 };
var obj = Object.assign(o1, o2);
jquery合并两个对象
$extend
a = {‘a’: 1};
b = {‘b’: 1};
c = $.extend(a, b)
事件绑定和普通事件的区别

普通添加事件的方法不支持添加多个事件，最下面的事件会覆盖上面的，而事件绑定（addEventListener）方式添加事件可以添加多个。
高性能动态向一个div中插入1000个div标签

document.createdocumentfragment 文档碎片

一次性拼接完字符串，最后一次插入节点，减少dom操作

//先创建文档碎片

var oFragmeng = document.createDocumentFragment();


for(var i=0;i<1000;i++)

{

    var op = document.createElement("div");

    var oText = document.createTextNode(i);

    op.appendChild(oText);

    //先附加在文档碎片中

    oFragmeng.appendChild(op);

}


//最后一次性添加到document中

document.body.appendChild(oFragmeng);

jquery.extend , jquery.fn.extend的区别
jquery.extend 为jquery的扩展类
jquery.fn.extend 给jquery对象添加方法
大部分插件都用jquery.fn.extend
jquery中的bind，live，delegate，on区别
bind() 是直接绑定在元素上，如果没有设置阻止冒泡stopPropagatio 很有可能他所有父元素，祖宗元素都会受影响

unbind() 解除绑定

live() 通过冒泡方式绑定到元素上

基本淘汰了，阻止冒泡都不管用

on() 这个最好

off() 解除绑定

document.ready和document.load和$(function(){})有什么区别
ready比load先执行

ready事件在DOM结构绘制完成之后就绘执行。这样能确保就算有大量的媒体文件没加载出来，JS代码一样可以执行

load事件必须等到网页中所有内容全部加载完毕之后才被执行

如果一个网页中有大量的图片的话，则就会出现这种情况：网页文档已经呈现出来，但由于网页数据还没有完全加载完毕，导致load事件不能够即时被触发。

$(function())匿名函数，你可以当成$(document).ready(function(){})的简写

$.data()和$(’#aaa’).data()各自作用是什么？有什么区别
$(’#aaa’).data()向元素附加数据，或从元素中获取数据
//向元素中附加数据greeting
$("#btn1").click(function(){
$(“div”).data(“greeting”, “Hello World”);
});
//从元素中获取数据
KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲btn2").click(fu…(“div”).data(“greeting”));
});
es6 箭头函数
首先箭头函数没有自己的this
如果你要当前函数的this,那么箭头函数不行
async/await 解决回调函数嵌套问题
如何在项目中解析处理es6和es7代码
babel
promise方法
Promise 类
两个参数提供then()回调方法
resolve成功
reject失败
Promise.all()并发执行方法
function buypack(){
return new Promise((resolve,reject)=>{
setTimeout(()=>{
if(Math.random()>0.5){
resolve(‘买’)
}else{
reject(‘不买，被打死’);
}
},Math.random()101000)
})
};
buypack().then((data)=>{
console.log(data);
},(err)=>{
console.log(err);
})
async和await异步操作
async 和 await解决异步问题，基于primise

主要解决promise的then方法嵌套

async和await这两个关键字一起使用

await后面智能跟promise对象

Promise.all()并发读取

//es7

let fs=require(‘fs’);
function read(url) {
//new Promise 需要传入一个executor 执行器
//executor需要传入两个函数 resolve reject
return new Promise((resolve,reject)=>{
//异步读取文件
fs.readFile(url,‘utf8’,function (err,data) {
if(err){
reject(err)
}else{
resolve(data);
}
})
})
};

//async await 解决异步问题，基于promise
//async await这两个关键字一起使用
//await 后面只能跟promise对象
async function getData(){
try{
//Promise.all()并发读取
let result =await Promise.all([read(‘name.txt’),read(‘age.txt’)]);
console.log(result);
}catch (e){
console.log(e);
}
}
getData();

//Promise 解决多层嵌套，回调地狱
// 解决异步请求，同步结果的问题