前端知识部分整理
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:100%; margin:0 auto;">
<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.onclick=function(ev){//兼容写法；
var e=ev||window.event;
var mouseX=e.clientX;//鼠标X轴的坐标
var mouseY=e.clientY;//鼠标Y轴的坐标
}
- event中的target
document.onmouseover=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");
});
//从元素中获取数据
$("#btn2").click(function(){
alert($("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()*10*1000)
})
};
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 解决多层嵌套，回调地狱
// 解决异步请求，同步结果的问题
