面试问题2

1.页面间传值的方法

因最近尝试实现客户端与服务端分离，服务端只提供接口，客户端用html+js实现，分成两个独立的项目部署，因项目是个人项目，客户端展示不考虑使用像Angular、Vue、Native这种前端框架实现，于是全部使用静态页面实现，请求数据用ajax，在开发的过程中，就遇到了页面之间传值的问题。

解决方法

post提交表单跳转的方式肯定不行了，因服务端并不处理这些请求参数，连到达客户端的机会都没有，此时只能考虑get方式了，因get方式参数在url上，跳转后的页面肯定能获取到。还有一种思路，就是将参数存到一个公共的地方，页面都可以获取到，按这两种思路，总结了如下的解决方法。

1、get方式，url携带参数

可以通过window.location.search获取url上的参数。如下面的示例。

 

a.html

 

跳转 

 

b.html

 

 

getUrlParam.js

UrlParam = function() { // url参数 
　　var data, index; 
　　(function init() { 
　　　　data = []; //值，如[["1","2"],["zhangsan"],["lisi"]] 
　　　　index = {}; //键:索引，如{a:0,b:1,c:2} 
　　　　var u = window.location.search.substr(1); 
　　　　if (u != '') { 
　　　　　　var params = decodeURIComponent(u).split('&'); 
　　　　　　for (var i = 0, len = params.length; i < len; i++) { 
　　　　　　　　if (params[i] != '') { 
　　　　　　　　　　var p = params[i].split("="); 
　　　　　　　　　　if (p.length == 1 || (p.length == 2 && p[1] == '')) {// p | p= | = 
　　　　　　　　　　　　data.push(['']); 
　　　　　　　　　　　　index[p[0]] = data.length - 1; 
　　　　　　　　　　} else if (typeof(p[0]) == 'undefined' || p[0] == '') { // =c 舍弃 
　　　　　　　　　　　　continue; 
　　　　　　　　　　} else if (typeof(index[p[0]]) == 'undefined') { // c=aaa 
　　　　　　　　　　　　data.push([p[1]]); 
　　　　　　　　　　　　index[p[0]] = data.length - 1; 
　　　　　　　　　　} else {// c=aaa 
　　　　　　　　　　　　data[index[p[0]]].push(p[1]); 
　　　　　　　　　　} 
　　　　　　　　} 
　　　　　　} 
　　　　} 
　　})(); 
　　return { 
　　　　// 获得参数,类似request.getParameter() 
　　　　param : function(o) { // o: 参数名或者参数次序 
　　　　　　try { 
　　　　　　　　return (typeof(o) == 'number' ? data[o][0] : data[index[o]][0]); 
　　　　　　} catch (e) { 
　　　　　　} 
　　　　}, 
　　　　//获得参数组, 类似request.getParameterValues() 
　　　　paramValues : function(o) { // o: 参数名或者参数次序 
　　　　　　try { 
　　　　　　　　return (typeof(o) == 'number' ? data[o] : data[index[o]]); 
　　　　　　} catch (e) {} 
　　　　}, 
　　　　//是否含有paramName参数 
　　　　hasParam : function(paramName) { 
　　　　　　return typeof(paramName) == 'string' ? typeof(index[paramName]) != 'undefined' : false; 
　　　　}, 
　　　　// 获得参数Map ,类似request.getParameterMap() 
　　　　paramMap : function() { 
　　　　　　var map = {}; 
　　　　　　try { 
　　　　　　　　for (var p in index) { map[p] = data[index[p]]; } 
　　　　　　} catch (e) {} 
　　　　　　return map; 
　　　　} 
  　　} 
}();

此处代码参照：

http://blog.csdn.net/caoyuan10036/article/details/7227214

2、通过cookie，传递

cookie能够存储少量数据到客户端的磁盘中，特定的网页之间是可以共享cookie中的数据。

a.html

 
 

b.html

 

 
 

此处使用了jquery.cookie.js,具体用法可参照此篇文章：

http://blog.csdn.net/csdn_ds/article/details/78022177

3、window.open和window.opener之间传值

window.open可以打开一个新的页面，在新的页面中可以通过window.opener获取父页面的窗口对象，从而可以获取父窗口中的参数。

a.html

打开新的页面 

b.html

 

4、h5技术，window.localStorage存储数据

在HTML5中，新加入了一个localStorage特性，这个特性主要是用来作为本地存储来使用的，解决了cookie存储空间不足的问题(cookie中每条cookie的存储空间为4k)，localStorage中一般浏览器支持的是5M大小，这个在不同的浏览器中localStorage会有所不同。此方法类似cookie，将数据存在一个公共的地方，实现页面之间传值。

a.html

 
 

 

 

b.html

总结

对于不同的解决方法，都有优缺点

1、url携带参数

优点：取值方便，可以跨域，利于页面分享，没有环境限制。

缺点：url携带参数值的长度有限制。

2、cookie方式

优点：可以在同源内的的任意网页中访问，存储数据的周期可以自由设置。

缺点：有长度限制。

3、设置窗口之间的父子关联关系

优点：取值方便.只要window.opener指向父窗口,就可以访问所有对象.不仅可以访问值,还可以访问父窗口的方法.值长度无限制。
缺点:两窗口要存在着关系.就是利用window.open打开的窗口。不能跨域。

4、h5技术，window.localStorage存储数据

优点：储存空间大，有5M存储空间。

缺点：不是所有浏览器都支持。

个人倾向第一种方式，主要是自己做的网页可以分享，在任何的地方都可以打开，其他的方式都有环境的要求。如果是做大型项目，架构是实现客户端与服务端的分离，建议还是引入客户端框架，框架实现了路由、参数的传递、以及安全问题，可以大大的提高开发效率。

2.sesstion的处理方案

情景：公司的一个网站有一个模块（测试模块）需要单独用另外的一个域名（www.xyz.com）去访问，即网站需要用两个不同的域名去访问，如首页（www.abc.com）和测试模块（www.xyz.com）

这时候就涉及到session跨域问题，因为域名不是父子关系，所以必须要实现完全跨域，想到了以下三个解决办法：

1.URL传参：测试模块访问的时候，地址www.xyz.com后把主域名的session通过参数的形式传递过去，如：www.xyz.com;jsessionid=7D4DED1F2DB5BC53961EFED18BCE7E30

2.SSO单点登录

3.利用jsonp的跨域特性，通过ajax进行session传递

第一种方案考虑URL传参数不美观以及URL需要分享给别人的时候就没法获取到session，所以放弃

第二种SSO单点登录方案应该在三种方案中最优的，因为系统架构问题，所以也放弃

目前采用的是第三种方案：

1.把网站主域名的头部和测试模块的头部分开，在测试模块的头部加入以下js代码：

（使用测试模块域名www.xyz.com进行网站访问的时候，利用jsonp跨域特性去主域名www.abc.com获取session信息，然后把session信息设置到测试模块域名中）

　　var user = '${sessionScope.username}';//获取session信息
　　//先跨域去取主域名登录的session信息
    $.getJSON("www.abc.com/user/getname?callback=?",function(data){
        if(data != null && data != ""){
          //把取到的session数据设置到当前域名的session信息中 
　　　　　$.getJSON("www.xyz.com/user/setname?data="+data+"&callback=?",function(data){
                if((user == null || user == "") && data != null && data != ""){
                    window.location.reload();//需要重新加载一下当前页面，不然头部不会显示session信息
                }
            });
        }else{
　　　　　　//退出登录时清除session信息
            if(user != null && user != ""){
                $.getJSON("www.xyz.com/user/setname?data=&callback=?",function(data){
　　　　　　　　　　 if(data != null && data != "" && data == 'ok'){
　　　　　　　　　　　　 window.location.reload();
　　　　 　　　　　　}
　　　　 　　　　}); 
　　　　　　}
 　　　　}
 　　});

2.后台实现代码：

　　@RequestMapping(value="getname")
    @ResponseBody
    public String getName(HttpServletRequest request,HttpServletResponse response){
        //获取回调函数名
        String callback = request.getParameter("callback");
        String callRes = ""; 
        try {
　　　　　　　String username = (String) request.getSession().getAttribute("username");
　　　　　　　if(StringUtils.isBlank(username)){
　　　　　　　　　return callback + "()";
　　　　　　　}　　　
　　　　　　callRes = callback + "(" + JsonUtils.toJsonString(username) + ")";

        } catch (Exception e) {
            callRes = callback + "()";
            logger.error(e);
        }
        return callRes;
    }
    
    
    @RequestMapping(value="setname")
    @ResponseBody
    public String setName(HttpServletRequest request,HttpServletResponse response){
        String callRes = "";
        //获取回调函数名
        String callback = request.getParameter("callback");
        String data = request.getParameter("data");
        if(StringUtils.isBlank(data)){
            request.getSession().invalidate();
            return callback + "("+JsonUtils.toJsonString("ok")+")";
        }
　　　　try {
            request.getSession().setAttribute("username", data);
            callRes = callback + "("+JsonUtils.toJsonString("ok")+")";
        } catch (Exception e) {
            callRes = callback + "()";
            request.getSession().invalidate();
            logger.error(e);
        }
        return callRes;
    }

 获取session数据时是否进行数据加密，这个根据自己的需要，最好是把数据加密

session已经实现了共享，这种方案的缺点就是访问测试模块的时候，需要和服务器交互很多次，性能上肯定不好

session过期处理办法：

保持Session的方法：有人说设session.timeout=-1，或小于0的数。这种方法肯定是不行的，session计算时间以分钟为单位，必须是大于等于1的整数。又有人说设session.timeout=99999。这种同样不行， session有最大时间限制。我经过测试发现最大值为24小时，也就是说你最大可以session.timeout=1440，1441都是不可以有，呵呵。本人测试环境：win2003+IIS6.0+ASP3.0。
所以想通过设session.timeout的过期时间让session永不过期是不可能的。写到Cookies里是比较好的方法，网上也有很多这样的教程，这里就不再说了！还有就是用在要保持session的页里设隐藏iframe每隔一段时间（这个时间小于session.timeout的时间）把涮新一次frame里的空页面！实现方法如下：

      在要保持session页里加上：

      同目录下建一下SessionKeeper.aspx的文件。


  
  

        这种方法还是比较长见的，另外还有一种和上面类似的方法，不过他不是用meta自动涮新嵌套的iframe的方法。他是用javascript: window.setTimeout("functionname()",10000);第隔一段时间时间自动调用一个函数的方法，当然函数里还是要去连接一个空的文件。具体方法如下：
     

        在要保持session面里加上：


这样同一目录下建一个空内容的sessionKeeper.aspx就文件就可以了！
    

        问题没有解决：通过以上的方法Session保持应该没有问题了，IIS默认无请求的清除session的值为20分钟，我设的每次交互服务的时间都远远小于这个值，可是我大概过个一天多的时间，session还是无缘无故的没了！郁闷。

        后来在网上多方查找终于找到答案：原来IIS为了保护服务器，有一个“回收”的概念！测试了半天终于有了点大体了解（不要笑我菜^-^）。先来看看这个“回收”在哪设置。

        启动IIS管理器->应用程序池->右键->属性->回收选项卡，有一项是默认就起作用的，就是第一项：“回收工作进程（分钟）”默认值1740分钟，大约29个小时。他是什么意思呢？我个人理解：在session.timeout之后再过1740分钟自动把所有仍在保持的session清除。这个值最大可设为4000000，大概是2700多天！我直接取消了，不用他自动回收！问题终于解决。

        另外这个属性对话框中还有其它几项：第二项应该是连接的用户超过了一定数目回收。第三项是到某一个时间就自动回收。在“性能”选项卡中“在空闲此时间段后关闭工作进程”，这里就是设置IIS默认session.timeout时间的地方了。默认值20分钟，这里同样最大值可设为4000000，和在ASP 页中设置session.timeout最大值为1440不同。在这里设置超过大于1440的值是否起作用，我没作测试，我想应该是可以的。那为什么在 ASP页中session.timeout的值最大只能是1440在IIS的属性中却能设的那么大呢？应该是属于一种保护机制：ASP页的 session.timeout的值哪个用户都可以设，IIS里却只有管理员可以设，两者的权限不同，所以设置的范围就不同了。

3.router.beforeEach里面的操作

Vue:router的beforeEach与afterEach钩子函数

在路由跳转的时候，我们需要一些权限判断或者其他操作。这个时候就需要使用路由的钩子函数。

定义：路由钩子主要是给使用者在路由发生变化时进行一些特殊的处理而定义的函数。

总体来讲vue里面提供了三大类钩子，两种函数
1、全局钩子
2、某个路由的钩子
3、组件内钩子

两种函数：

1、Vue.beforeEach(function(to,form,next){}) /*在跳转之前执行*/

2.Vue.afterEach(function(to,form))/*在跳转之后判断*/

全局钩子函数

顾名思义，它是对全局有效的一个函数

1 2 3 4 5 6

router.beforeEach((to, from, next) => {     let token = router.app.$storage.fetch("token");     let needAuth = to.matched.some(item => item.meta.login);     if(!token && needAuth) return next({path: "/login"});     next(); });

beforeEach函数有三个参数：

• to:router即将进入的路由对象
• from:当前导航即将离开的路由
• next:Function,进行管道中的一个钩子，如果执行完了，则导航的状态就是 confirmed （确认的）；否则为false，终止导航。

afterEach函数不用传next()函数

某个路由的钩子函数

顾名思义，它是写在某个路由里头的函数，本质上跟组件内函数没有区别。

const router = new VueRouter({
  routes: [
    {
      path: '/login',
      component: Login,
      beforeEnter: (to, from, next) => {
        // ...
      },
      beforeLeave: (to, from, next) => {
        // ...
      }
    }
  ]
})

路由组件的钩子

注意：这里说的是路由组件！

路由组件 属于 组件，但组件 不等同于 路由组件！所谓的路由组件：直接定义在router中component处的组件。如：

var routes = [
    {
    path:'/home',
    component:home,
    name:"home"
    }
]

在子组件中调用路由的钩子函数时无效的。

在官方文档上是这样定义的：

可以在路由组件内直接定义以下路由导航钩子

beforeRouteEnter

beforeRouteUpdate (2.2 新增)

beforeRouteLeave

这里简单说下钩子函数的用法：它是和data,methods平级的。

beforeRouteLeave(to, from, next) {
    next()
},
beforeRouteEnter(to, from, next) {
    next()
},
beforeRouteUpdate(to, from, next) {
    next()
},
data:{},
method: {}

4.微信公众号鉴权的流程

微信鉴权的两种方式

2018年03月23日 18:56:16 魔法小屋 阅读数：1073更多

个人分类： 微信

一、通过微信接口频繁获取用户信息

    1.请求https://open.weixin.qq.com/connect/oauth2/authorize?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=snsapi_base&state=1#wechat_redirect，设置回调地址替换占位符REDIRECT_URI；

    2.微信回调REDIRECT_URI时，将携带code参数，通过该参数再向微信获取用户信息，接口：https://api.weixin.qq.com/sns/oauth2/access_token?appid=APPID&secret=SECRET&code=CODE&grant_type=authorization_code；

        3.通过第2步，即可获取用户基本信息，如openid等；

 

二、所有接口请求应用接口

    1.应用接口再请求https://open.weixin.qq.com/connect/oauth2/authorize?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=snsapi_base&state=1#wechat_redirect，并设置回调地址替换占位符REDIRECT_URI；

        2.微信回调后重复一.2步

5.动态路由匹配刷新报错404的解决办法

因为我们的应用是单页客户端应用，当使用 history 模式时，URL 就像正常的 url，可以直接访问http://www.xxx.com/user/id，但是因为vue-router设置的路径不是真实存在的路径，所以刷新就会返回404错误。

想要history模式正常访问，还需要后台配置支持。要在服务端增加一个覆盖所有情况的候选资源：如果 URL 匹配不到任何静态资源，则应该返回同一个 index.html 页面，这个页面就是你 app 依赖的页面。

也就是在服务端修改404错误页面的配置路径，让其指向到index.html。

警告：

因为这么做以后，你的服务器就不再返回 404 错误页面，因为对于所有路径都会返回 index.html 文件。为了避免这种情况，你应该在 Vue 应用里面覆盖所有的路由情况，然后在给出一个 404 页面。

?

1 2 3 4 5 6

const router = new VueRouter({  mode: 'history',  routes: [  { path: '*', component: NotFoundComponent }  ] })

如此便解决了页面刷新后404问题。

问题延伸：

但是后面又发现，在IE浏览器下刷新仍然还是404，在网上找了一下原因，是因为IE自作聪明，对错误页面的处理在ie来看页面大小<1024b 会被认为十分不友好，所以ie就将改页面给替换成自己的错误提示页面了，而我的index.html刚好只有一个DIV：

?

1 2 3 4 5 6 7 8 9 10 11

"utf-8"> 　　 "app">

解决办法就是充实一下页面,让大小超过1024即可。

6.如何实现子页面数据更新立马刷新父组件
7.vuex  locastorage  coockie  什么情况用更好

1.最重要的区别：vuex存储在内存，localstorage则以文件的方式存储在本地

2.应用场景：vuex用于组件之间的传值，localstorage则主要用于不同页面之间的传值。

3.永久性：当刷新页面时vuex存储的值会丢失，localstorage不会。

注：很多同学觉得用localstorage可以代替vuex, 对于不变的数据确实可以，但是当两个组件共用一个数据源（对象或数组）时，如果其中一个组件改变了该数据源，希望另一个组件响应该变化时，localstorage无法做到，原因就是区别1。

8.call aply实现原理

9.对象的继承实现

 1、原型链继承

核心： 将父类的实例作为子类的原型

缺点：  父类新增原型方法/原型属性，子类都能访问到，父类一变其它的都变了

        function Person (name) {
            this.name = name;
        };

        Person.prototype.getName = function () {    //对原型进行扩展
            return this.name;
        };

        function Parent (age) {
            this.age = age;
        };

        Parent.prototype = new Person('老明');   //这一句是关键 //通过构造器函数创建出一个新对象，把老对象的东西都拿过来。

        Parent.prototype.getAge = function () {
            return this.age;
        };

//        Parent.prototype.getName = function () {   //可以重写从父类继承来的方法,会优先调用自己的。
//            console.log(222);
//        };

        var result = new Parent(22);
        console.log(result.getName());  //老明　　//调用了从Person原型中继承来的方法(继承到了当前对象的原型中)　　
        console.log(result.getAge());   //22 　　//调用了从Parent原型中扩展来的方法

 

2、构造继承

基本思想
借用构造函数的基本思想就是利用call或者apply把父类中通过this指定的属性和方法复制（借用）到子类创建的实例中。
因为this对象是在运行时基于函数的执行环境绑定的。也就是说，在全局中，this等于window，而当函数被作为某个对象的方法调用时，this等于那个对象。
call、apply 方法可将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定的新对象。

所以，这个借用构造函数就是，new对象的时候(new创建的时候，this指向创建的这个实例)，创建了一个新的实例对象，
并且执行Parent里面的代码，而Parent里面用call调用了Person，也就是说把this指向改成了指向新的实例，
所以就会把Person里面的this相关属性和方法赋值到新的实例上，而不是赋值到Person上面,
所以所有实例中就拥有了父类定义的这些this的属性和方法。

因为属性是绑定到this上面的，所以调用的时候才赋到相应的实例中，各个实例的值就不会互相影响了。

核心：使用父类的构造函数来增强子类实例，等于是复制父类的实例属性给子类（没用到原型）

缺点： 方法都在构造函数中定义， 只能继承父类的实例属性和方法，不能继承原型属性/方法，无法实现函数复用，每个子类都有父类实例函数的副本，影响性能

      function Person (name) {
            this.name = name;
            this.friends = ['小李','小红'];
            this.getName = function () {
                return this.name;
            }
        };

//        Person.prototype.geSex = function () {    //对原型进行扩展的方法就无法复用了
//            console.log("男");
//        };

        function Parent = (age) {
            Person.call(this,'老明');　　//这一句是核心关键
            //这样就会在新parent对象上执行Person构造函数中定义的所有对象初始化代码，
            // 结果parent的每个实例都会具有自己的friends属性的副本
            this.age = age;
        };

        var result = new Parent(23);
        console.log(result.name);　　　　//老明
        console.log(result.friends);　　//["小李", "小红"]
　　　　 console.log(result.getName());　　//老明
　　　　 console.log(result.age);　　　　//23
　　　　 console.log(result.getSex());　　//这个会报错，调用不到父原型上面扩展的方法

 

3、组合继承

组合继承（所有的实例都能拥有自己的属性，并且可以使用相同的方法，组合继承避免了原型链和借用构造函数的缺陷，结合了两个的优点，是最常用的继承方式）

核心：通过调用父类构造，继承父类的属性并保留传参的优点，然后再通过将父类实例作为子类原型，实现函数复用

缺点：调用了两次父类构造函数，生成了两份实例（子类实例将子类原型上的那份屏蔽了）

        function Person  (name) {
             this.name = name;
             this.friends = ['小李','小红'];
         };

         Person.prototype.getName = function () {
             return this.name;
         };

        function Parent (age) {
            Person.call(this,'老明');　　//这一步很关键
            this.age = age;
        };

        Parent.prototype = new Person('老明');　　//这一步也很关键
        var result = new Parent(24);
        console.log(result.name);　　　　//老明
        result.friends.push("小智");　　//
        console.log(result.friends);　　//['小李','小红','小智']
        console.log(result.getName());　　//老明
        console.log(result.age);　　　　//24

        var result1 = new Parent(25);   //通过借用构造函数都有自己的属性，通过原型享用公共的方法
        console.log(result1.name);　　//老明
        console.log(result1.friends);　　//['小李','小红']

 

4、寄生组合继承

核心：通过寄生方式，砍掉父类的实例属性，这样，在调用两次父类的构造的时候，就不会初始化两次实例方法/属性，避免的组合继承的缺点

缺点：堪称完美，但实现较为复杂

        function Person(name) {
            this.name = name;
            this.friends = ['小李','小红'];
        }

        Person.prototype.getName = function () {
            return this.name;
        };

        function Parent(age) {
            Person.call(this,"老明");
            this.age = age;
        }

        (function () {
            var Super = function () {};     // 创建一个没有实例方法的类
            Super.prototype = Person.prototype;
            Parent.prototype = new Super();     //将实例作为子类的原型
        })();

        var result = new Parent(23);
        console.log(result.name);
        console.log(result.friends);
        console.log(result.getName());
        console.log(result.age);

10.已有数据页面跳转后的回跳数据异常解决的办法

进行统一异常处理