手机移动端
安卓和ios的兼容
标签的设置
vue的生命周期、指令、父子兄弟组件传值、vuex、router、路由传值、vue的底层原理、mixin
$nextTick的实现:Promise
MutationObserver
setTimeout
js中有多少种模式
单列模式
**************************************************
数组的操作
shift:删除原数组第一项,并返回删除元素的值;如果数组为空则返回undefined
var a = [1,2,3,4,5];
var b = a.shift(); //a:[2,3,4,5] b:1
unshift:将参数添加到原数组开头,并返回数组的长度
var a = [1,2,3,4,5];
var b = a.unshift(-2,-1); //a:[-2,-1,1,2,3,4,5] b:7
pop:删除原数组最后一项,并返回删除元素的值;如果数组为空则返回undefined
var a = [1,2,3,4,5];
var b = a.pop(); //a:[1,2,3,4] b:5
push:将参数添加到原数组末尾,并返回数组的长度
var a = [1,2,3,4,5];
var b = a.push(6,7); //a:[1,2,3,4,5,6,7] b:7
concat:返回一个新数组,是将参数添加到原数组中构成的
var a = [1,2,3,4,5];
var b = a.concat(6,7); //a:[1,2,3,4,5] b:[1,2,3,4,5,6,7]
splice(start,deleteCount,val1,val2,...):从start位置开始删除deleteCount项,并从该位置起插入val1,val2,...
var a = [1,2,3,4,5];
var b = a.splice(2,2,7,8,9); //a:[1,2,7,8,9,5] b:[3,4]
var b = a.splice(0,1); //同shift
a.splice(0,0,-2,-1); var b = a.length; //同unshift
var b = a.splice(a.length-1,1); //同pop
a.splice(a.length,0,6,7); var b = a.length; //同push
reverse:将数组反序
var a = [1,2,3,4,5];
var b = a.reverse(); //a:[5,4,3,2,1] b:[5,4,3,2,1]
sort(orderfunction):按指定的参数对数组进行排序
function compare(value1, value2) {
if (value1 < value2) {
return -1;
} else if (value1 > value2) {
return 1;
} else {
return 0;
}
}
arr2 = [13, 24, 51, 3];
console.log(arr2.sort(compare)); // [3, 13, 24, 51]
slice(start,end):返回从原数组中指定开始下标到结束下标之间的项组成的新数组
var a = [1,2,3,4,5];
var b = a.slice(2,5); //a:[1,2,3,4,5] b:[3,4,5]
join(separator):将数组的元素组起一个字符串,以separator为分隔符,省略的话则用默认用逗号为分隔符
var a = [1,2,3,4,5];
var b = a.join("|"); //a:[1,2,3,4,5] b:"1|2|3|4|5"
indexOf()和 lastIndexOf()
indexOf():从头开始(匹配值,开始位置)
lastIndexOf:从尾开始(匹配值,开始位置)
forEach():arr.forEach(function(x, index, a){
console.log(x + '|' + index + '|' + (a === arr));
});
map():返回操作之后的数组
var arr = [1, 2, 3, 4, 5];
var arr2 = arr.map(function(item){
return item*item;
});
console.log(arr2); //[1, 4, 9, 16, 25]
filter:返回过滤的数组
var arr2 = arr.filter(function(x, index) {
return index % 3 === 0 || x >= 8;
});
console.log(arr2); //[1, 4, 7, 8, 9, 10]
every():是否数组所以项都满足条件
var arr3 = arr.every(function(x) {
return x < 3;
});
some():某项满足
reduce()和 reduceRight():迭代数组,返回最终值
var sum = values.reduceRight(function(prev, cur, index, array){
return prev + cur;
},10(初始值));
var value = obj[key]; > for ( ; ; ) > for ( in )
**************************************************
ajax的状态值
if(ajax.readyState == 4 && ajax.status == 200)
在AJAX实际运行当中,对于访问XMLHttpRequest(XHR)时并不是一次完成的,而是分别经历了多种状态后取得的结果,对于这种状态在AJAX中共有5种,分别是。
0 - (未初始化)还没有调用send()方法
1 - (载入)已调用send()方法,正在发送请求
2 - (载入完成)send()方法执行完成,
3 - (交互)正在解析响应内容
4 - (完成)响应内容解析完成,可以在客户端调用了
跨域:jsonp、Access-Control-Allow-Origin document.domain(设置二级域名相同)postMessage
//前端路由
单页面应用:url变化引起UI更新(无需刷新页面)
hash(#及以后部分):通过hashchange
history:浏览器的前进后退触发popstate事件(但是pushstate/replaceState或<a>改变url不会触发,需要监听这些事件)
node 启服务 node app.js(配置端口号) 链接数据库 (const pool = mysql.createPool($util.extend({}, $conf.mysql));)
事件冒泡 (blur、focus、load、unload除外)
div -> body -> html -> document
子元素和父元素两者都有点击事件,如果点击子元素,那么父元素也会执行
阻止冒泡
child.onclick = function () {
if(event && event.stopPropagation){
// w3c标准 阻止冒泡机制
event.stopPropagation();
}else{
// IE系列 IE 678
event.cancelBubble = true;
}
alert("点击了按钮");
};
事件捕获(冒泡反过来)
<div id="A" style="width:300px; height:300px; background:red;position:relative;">
<div id="B" style="width:200px;height:200px; background:green;position:relative;top:50px;margin:auto;">
<div id="C" style="width:100px;height:100px; background:blue;position:relative;top:50px;margin:auto;"></div>
</div>
</div>
var A = document.getElementById("A");
var B = document.getElementById("B");
var C = document.getElementById("C");
// 目标(目标阶段的处理函数,先注册先执行)
C.addEventListener('click',function(){alert("Ct");},true);
C.addEventListener('click',function(){alert("Cf");},false);
// 事件冒泡
A.addEventListener('click',function(){alert("Af");},false);
B.addEventListener('click',function(){alert("Bf");},false);
// 事件捕获
A.addEventListener('click',function(){alert("At");},true);
B.addEventListener('click',function(){alert("Bt");},true);
</script>
//当点击C (子元素)时(蓝色),输出At Bt Ct Cf Bf Af
js创建对象
1.json创建
2.工厂模式(不能知道返回的类型)
function createStudent(name,sex,grade){
var o = new Object();
o.name = name;
o.sex = sex;
o.grade = grade;
o.sayName = function(){
console.log(this.name);
}
return o;
}
var s1 = createStudent('Claiyre','famale',1);
工厂模式就是将创建对象的语句放在一个函数里,通过传入参数来创建特定对象,最后返回创建的对象。
3.构造函数
function Student(name,sex,grade){
this.name = name;
this.sex = sex;
Student_1.prototype.name = 'Claiyre';(通过原型赋值避免浪费)
this.grade = grade;
this.sayName = function(){
console.log(this.name);
}
}
var s2 = new Student('孙悟空','male',2);
*************************************************
兼容性
*************************************************
JS
1.内置类型
内置类型包含6中基本类型(string、number、null、undefined、symbol(不能new,类似于string,独一的值)、boolean)和对象
*************************************************
箭头函数
1.匿名函数的简写
2.箭头函数中的this对象(根据词法作用域)指向外层的obj(以前的hack写法 var_this=this不需要)
3.箭头函数中的this已经根据词法作用域绑定,所以call()、apply()无法进行绑定(第一个参数this无效)
面向对象中的继承:子类继承父类的方法和属性
通过函数名调用方法将函数中的this指向某个对象
② 使用call/apply/binb.
1:定义父类
funtion Parent(””,””,””){}
2:定义子类
function Son(””,””,””){}
3:在子类中通过call方法/apply/binb方法去调用父类。
function Son(){
Parent.call(this,””,””,””);// Parent.apply(this,[””,””,””]);//Parent.binb(this)(””,””,””);
}
4.使用for循环赋值
4.箭头函数中的this指向定义的那个对象,而不是使用时所在的那个对象
5.不能当做构造函数使用(new一个对象进行实例化,否则会抛出错误)
6、不可以使用arguments对象,该对象在函数体内不存在,如果要用的话,可以用rest参数代替;
7、不可以使用yield命令,箭头函数不能用作Generator函数;
*************************************************
*************************************************
*************************************************
浏览器
1.事件触发阶段
document.getElementById("dddd").addEventListener("tap", function() {
},false/true);
a.事件捕获阶段:当目标元素触发事件,从顶级对象发出事件流找到目标元素
b.事件目标处理函数:函数的处理
c.事件冒泡:从目标元素往回寻找节点绑定的同名事件的过程
2.跨域
a.jsonp
function jsonp(url, jsonpCallback, success) {
let script = document.createElement('script')
script.src = url
script.async = true
script.type = 'text/javascript'
window[jsonpCallback] = function(data) {
success && success(data)
}
document.body.appendChild(script)
}
jsonp('http://xxx', 'callback', function(value) {
console.log(value)
})
b.CORS
服务端设置Access-Control-Allow-Origin
c.document.domain
适用于父域名相同
打开id.qq.com,f12打开控制台,window.open页面: www.qq.com,同样访问返回的window对象的document属性,
手动设置一下id.qq.com页面的document.domain,设置为qq.com
d.postMessage
// 发送消息端
window.parent.postMessage('message', 'http://test.com')
// 接收消息端
var mc = new MessageChannel()
mc.addEventListener('message', event => {
var origin = event.origin || event.originalEvent.origin
if (origin === 'http://test.com') {
console.log('验证通过')
}
})
3.存储
5.渲染部分
a.处理html创建DOM
b.处理CSS创建CSSOM(会阻塞渲染,保持层级扁平:少目录结构,少模块层次)
c.将DOM和CSSOM合并生成完整的渲染树
d.根据渲染树计算每个节点的位置
e.通过GPU(图形处理器)渲染页面显示在页面上
5-1:load:DOM、CSS、JS全部加载完毕
DOMContentLoaded:初始的HTML加载完毕
5-2:减少重绘(不影响布局:颜色)和回流(改变布局)
a.使用visibility代替display
b.transform: translate(50px,100px); 代替top
c.不要把DO节点的很属性值放在循环当中
d.不要使用table布局
e.不要使用动画
6.性能
*************************************************
*************************************************
*************************************************
*************************************************