面试题总结

1.原生js实现tab切换和倒计时

2.vue-loader是什么？

vue-loader是一个webpack的loader,加载器；可以将vue文件转换为JS模块；

默认情况下，vue-loader 使用 css-loader 和 Vue 模版编译器自动处理你的样式和模版文件。在编译过程中，所有的资源路径例如 , background: url(…) 和 @import 会作为模块依赖。

例如，url(./image.png) 会被转换为 require(‘./image.png’) 
因为 .png 不是一个 JavaScript 文件，你需要配置 Webpack 使用 file-loader 或者 url-loader 去处理它们。vue-cli 脚手器工具已经为你配置好了

使用它们的好处： 
（1）file-loader 可以指定要复制和放置资源文件的位置，以及如何使用版本哈希命名以获得更好的缓存。此外，这意味着 你可以就近管理你的图片文件，可以使用相对路径而不用担心布署时URL问题。使用正确的配置，Webpack 将会在打包输出中自动重写文件路径为正确的URL。

（2）url-loader 允许你有条件将文件转换为内联的 base-64 URL（当文件小于给定的阈值），这会减少小文件的 HTTP 请求。如果文件大于该阈值，会自动的交给 file-loader 处理。

3.如何进行性能优化，比如发ajax和axios请求时，怎样避免用户多次点击造成的多次请求？

   ①定义标志位；

       点击触发请求后，标志位为false量；请求（或者包括请求后具体的业务流程处理）后，标志位为true量。通过标志位来判断用户点击是否具备应有的响应。

   ②卸载以及重载绑定事件；

       点击触发请求后，卸载点击事件，请求（或者包括请求后具体的业务流程处理）后，重新载入绑定事件。

   ③替换(移除)按钮DOM;

       点击触发请求后，将按钮DOM对象替换掉（或者将之移除），自然而然此时不在具备点击事件；请求（或者包括请求后具体的业务流程处理）后，给新的按钮DOM定义点击事件。

不妨引深来看，它不一定发生在表单的提交事件上，同样可以发生在ajax的异步请求上。有效地在web客户端采用一定机制去防止重复点击提交，将大大减轻服务器端压力。
　　那么，我们就不妨从表单提交及ajax的两种不同请求的处理过程中，来试试如何防止重复点击提交。

表单提交

<form action="login.do" method="post">
    <input type="text" name="username" />
    <input type="password" name="password" />
    <input type="submit" onclick="this.disabled=true; this.value='登录中...'; this.form.submit();" value="登录" />
</form>

单击登录按钮进行提交以后，提交按钮就会变为灰色，并且给用户一个友好提示（登录中...），用户不能再单击第二次，直到重新加载页面或者跳转。可以发现，我们不需要给这个按钮恢复到可以再次登录的状态，仅仅源于页面重新进行了加载或者跳转。

ajax请求

(function($){
    $('input').click(function(){
        let btn=this;//修改this指向
        //表单验证
        ...

        //ajax异步提交
        $.ajax({
            url:'',
            data:'',
            dataType:'',
            beforeSend:function(){
                //点击之后让提交按钮失效，以实现防止按钮重复点击
                $(btn).attr('disabled',true);
                $(btn).text('登陆中');
            },
            complete:function(){
                //让按钮重新有效
                $(btn).removeAttr('disabled')
            }
            success:function(msg){
                if(msg==='ok'){
                    alert('登录成功')
                }else{
                    alert('登录失败')   
                }
            }
        }
    })
})(jQuery)

请求频度

let timer=null;
$(input).keyup(function(){
    var value=$(this).val();
    clearTimeout(timer);
    //如果键盘敲击的速度太快，小于100ms就不会向后台发请求，但是最后还是会发送一次请求
    timer=setTimeout(function(){
        //触发请求
        $.ajax({
            url:'',
            type:'',
            data:value,
            success:function(){}
        })
    },100)
})

总结

从宏观意义上讲，我们需要对每一个按钮去做“防止重复点击提交”，，面对这种情况，我们便可以采用一定策略来对其进行封装实现（如定义通用按钮类绑定事件）。
　从具体情况上来讲，我们并不需要对每一个按钮都去做”防止重复点击提交“，仅仅需要对某些可能具有复杂后台业务逻辑、或者文件上传、或者调用其他非本工程接口导致网络延迟等等情况需要去做”防止重复点击提交“。与此同时，我们必须要给予用户友好提示(如文本提示、渲染loading条、显示文件上传进度条等等)。两者需要一起来看、一起来做。当然，我们可以单独提取状态显示这个实现逻辑。代码如下：

(function($){
    var str='';
    var dom=$(str).prependTo('body');
    $(document).ajaxStart(function(){
        dom.stop(true,false).queue(function(
            $(this).show().dequeue();
        ))
    });
    $(document).ajaxStop(function(){
        dom.queue(function(){
            $(this).hide().dequeue();
        })
    })
})(jQuery)


4.js实现阶乘
方案一：利用while循环

function  factorial(num){
                    var  result = 1;
                    while(num){
                            result *= num;
                            num--;
                    }
                    return  result;
}

     方案二：利用函数递归

function   factorial(num){
                      if(num <= 0){
                            return 1;
                      }else {
                            return  num*arguments.callee(num-1)
                      }
}

     方案三：利用for循环

function   factorial(num){
                      if(num <= 0){
                            return 1;
                      }else {
                            for(var i = num; i>1; i--){
                                num*=(i-1)
                            }
                            return num;
                      }
}
factorialize(5);

5.this指向的三种情况

一、全局作用域或者普通函数自执行中this指向全局对象window

//全局作用域
     console.log(this);//Window 
//普通函数
    function fn(){
         console.log(this); //Window
   }
    fn(); //函数加括号调用叫函数自执行，函数自执行时，内部的this指向顶层对象/window

二、事件函数内部的this指向事件源：注意在事件函数中如果包含普通函数，普通函数自执行后，内部this还是指向window

 //事件函数内部的this指向事件源
    document.body.onclick = function(){
         this.style.height = "1000px";
           console.log(this); //body对象
           function fn(){
           console.log(this); //Window
           }
           fn(); //函数加括号调用叫函数自执行，函数自执行时，内部的this指向顶层对象/window
        };

三、对象方法调用时，this指向调用的对象

let obj = {
    name : "lanlan",
     fn : function(){
         console.log(this);
     },
     lacy : {
         name : "didi",
         fn : function(){
             let num = 10;
             console.log(this);
         }
     }
 };  
   obj.fn(); //obj
   obj.dudu.fn(); //lacy

6.  .bind()和.on()的区别

（1）是否支持selector这个参数值。由于javascript的事件冒泡特性，如果在父元素上注册了一个事件处理函数，当子元素上发生这个事件的时候，父元素上的事件处理函数也会被触发。

如果使用on的时候，不设置selector，那么on与bind就没有区别了。

（2）on绑定的事件处理函数，对于未来新增的元素一样可以的，和delegate效果相同，而bind则不行。   

（3） delegate用法与on()相同，只是参数的顺序不同：

7.$('.class')与$('div.class')有什么区别？在IE8用哪个效率高

$(".class")获取的是整个页面里面所有类名为class的标签元素；
$("div.class")获取的是整个页面里面所有类名为class的div元素；
所以$("div.class")的效率比较高一点。

8.token过期怎么解决？

在浏览器中访问服务器产生cookie和session.用户的信息保存在token中.

  [一] 如何保存token的安全的问题,防止盗用

  1.1 通过https 对网站的传输的加密,一定的程度保证安全的问题.

  1.2 对token进行MD5的加密. 或base64 的处理加盐的处理.

 [二]  token到期的处理的

客户登录以后 对 token 进行反送 两次的时期,一长一短, 短的时间到期以后,在通过长的token进行发送,当两者的都用过,用后从新登录..  有一种情况时,当用户还在访问时,token到期,是如何进行处理的,;====> token的两者都到期,应该是进行的是查询的数据中,或者是readis  或者mongodb 中你的 用户的状态码,是否在线.

问题描述: 首先后端生成的token是有时限的,在一段时间后不管前端用户是否进行了访问后端的操作,后端的token都会过期,在拦截器阶段就会返回错误的请求:token过期,从而拿不到想要的请求数据.

解决思路: 每隔一段时间的后端请求中都将token传送过去获取新的token并返回前端放入cookies中并记录cookie的存储失控,达到更新cookie中token的效果;而长时间不做操作的话我们就可以让他的token失效退出系统了.

解决方式:我们的访问后端的请求都是jQuery的ajax请求.而这一类的ajax请求都可以通过$.ajaxSetup设置AJAX的全局默认设置。使用方法参考:http://www.runoob.com/jquery/ajax-ajaxsetup.html

现在说明一下我们使用了$.ajaxSetup的什么属性(先上一段伪代码):

$.ajaxSetup({
    beforeSend:function(){
       每次ajax请求前执行的操作;
}
},
    complete:function(XMLHttpRequest,textStatus){

        判断cookie中存储cookie的时间是否临近超时时刻了
        如果临近的话  发送刷新token的请求; 存储新的token并且记录当前时刻
     }

 });

 说明:

beforeSend:(在每次ajax请求之前都会执行的部分.)

这里进行了cookie中token的校验,如果没有token我们就会重载页面,然后用户会跳转到登录页面,(这里说明用户已经长时间没有操作过了,前端的cookie已经失效,所以我们需要用户去重新登录).

 complete:请求完成时运行的函数（在请求成功或失败之后均调用，即在 success 和 error 函数之后）。

在请求完成后我们直接调用vue的ajax去访问刷新token的controlle得到新的token并且在前端重置token.这里最好不要用jQuery的ajax请求,因为会形成死循环一直调用刷新token的请求.虽然$.ajax请求中有一个global属性控制是否为请求触发全局 AJAX 事件处理程序.但是个人测试将global设置为false没有成功解决循环问题.所以用了vue的ajax请求。