2-18
16day
作用：减少DOM操作，节省内存空间，提高性能。
function animate(el, target, step, dtime) {
/*
el 表示操作的元素对象
target 表示移动的目标距离 单位 px
step 表示步长，即每次移动的距离 单位 px
dtime 表示移动的间隔时间 单位 ms
*/
step = step || 10;
dtime = dtime || 30;
// 设置步长、间隔默认值
// 判断是否开启定时器，如果有就清除
if (el.timeId) {
clearInterval(el.timeId);
el.timeId = null;
};
// 开启一个定时器，并将定时器挂载到当前元素上
el.timeId = setInterval(function () {
/*
获取盒子移动前的水平方向的位置（当前位置） - 偏移的位置
可以使用 el.offsetLeft 获取，但会将外边距也获取到，不精准，不采用
这里移动实现方式是改变 left的值，保持统一，还是使用 el.style.left 获取
使用 el.style.left 有个弊端，若元素对象上最初没有 left 属性时，获取返回的是 NAN
这种情况只有在第一次会出现，故最开始的时候，还需要判断返回的值，若为 NAN，则重置为 0；如下
*/
var current = parseInt(el.style.left);
current = current ? current : 0;
// 判断目标距离是否小于当前位置，若小于将 步长 变为 负数，让元素反着移动
if (current > target) {
step = -Math.abs(step);
}
// 当目标距离与当前位置的差距小于步长时，直接当目标的水平位置设置为目标距离，并清除定时器后跳出函数
if (Math.abs(current - target) < Math.abs(step)) {
clearInterval(el.timeId);
el.style.left = target + 'px';
return;
}
// 定时器每执行一次，就让元素移动一个 步长
el.style.left = current + step + 'px';
}, dtime)
}
17day
1-jquery 中的$.each 和$(选择器).each()有什么区别？
$.each()可以遍历任何对象，而$().each()只可以遍历jquery对象
2-query 中的$.each 和 js 中的 foeEach()有什么区别？
回调函数中参数的位置不一样，forEach中为第一个参数为ele，第二个为index。each中第一个为index，第二个为ele；
回调函数中是否有返回值，forEach中没有返回值，each有返回值，返回被遍历的数组
forEach不能遍历对象，而each可以通过jq的方法来遍历
3-window.onload 和$(docuMent).ready() 有什么区别？
$(document).ready:是DOM结构绘制完毕后就执行，不必等到加载完毕。 意思就是DOM树加载完毕，就执行，不必等到页面中图片或其他外部文件都加载完毕。并且可以写多个.ready。
window.onload:是页面所有元素都加载完毕，包括图片等所有元素。只能执行一次。
4-jquery 实现链式编程的原理是什么？
节约JS代码；
所返回的都是同一个对象，可以提高代码的效率。
通过简单扩展原型方法并通过return this的形式来实现跨浏览器的链式调用。利用JS下的简单工厂方法模式，来将所有对于同一个DOM对象的操作指定同一个实例。
18day
1-如何多次给同一元素绑定多种同类型的事件？
使用jQuery中.bind()
2-说明 localStorage 和 sessionStorage 的区别
localStorage的生命周期是永久性的。假若使用localStorage存储数据，即使关闭浏览器，也不会让数据消失，除非主动的去删除数据。
sessionStorage 的生命周期是在浏览器关闭前。也就是说，在整个浏览器未关闭前，其数据一直都是存在的。
3-localStorage 和 sessionStorage 和 cookies 的区别
1、cookie数据始终在同源的http请求中携带（即使不需要），即cookie在浏览器和服务器间来回传递，而sessionStorage和localStorage不会自动把数据发送给服务器，仅在本地保存。cookie数据还有路径 （path）的概念，可以限制cookie只属于某个路径下
2、存储大小限制也不同，cookie数据不能超过4K，同时因为每次http请求都会携带cookie、所以cookie只适合保存很小的数据，如会话标识。sessionStorage和localStorage虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大
3、数据有效期不同，sessionStorage：仅在当前浏览器窗口关闭之前有效；localStorage：始终有效，窗口或浏览器关闭也一直保存，因此用作持久数据；cookie：只在设置的cookie过期时间之前有效，即使窗口关闭或浏览器关闭
4、作用域不同，sessionStorage不在不同的浏览器窗口中共享，即使是同一个页面；localstorage在所有同源窗口中都是共享的；cookie也是在所有同源窗口中都是共享的
5、web Storage支持事件通知机制，可以将数据更新的通知发送给监听者
6、web Storage的api接口使用更方便
4-使用 jquery 完成一个 ajax 请求
$.ajax({
url: 'http://127.0.0.1:3000/product',
//设置请求参数
data: {
id: 1
},
//设置响应体类型
dataType: 'text',
type: 'get',
beforeSend: function(xhr) {
console.log(xhr)
},
//只有请求成功会调用
success: function(res) {
//一旦设置dataType，不关心服务器返回的数据类型
//客户端会根据dataType确认数据类型
console.log(res)
},
//只有请求失败会调用
error: function(xhr) {
console.log(xhr)
},
//成功和失败都会执行
complete: function(xhr) {
console.log(xhr)
}
})
5-http 常见的状态码有哪些？
200 – 请求成功
301 – 资源(网页等)被永久转移到其它URL
404 – 请求的资源(网页等)不存在
500 – 内部服务器错误
19day
1-解决跨域问题的方法？
使用ajax
搭建服务器启动
2-提交请求 get 和 post 的区别？
GET把参数包含在URL中，POST通过request body传递参数
3-什么是渐进增强和优雅降级？
渐进增强：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。
优雅降级：一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。
4-针对页面性能优化，有哪些方案？
使用懒加载
公共文件分离
css和js代码压缩
浙公网安备 33010602011771号