项目开发中遇到的前端知识点

总结了下在项目中遇到的一些前端问题，和查看源码学习到的一些知识，一个是打开了自己的思路，刷新了以前对于前端的认知。只要对一个问题深入思考，总能引申出很多的问题。

比如：ajax的请求，还可以对其设置一个全局方法，对ajax请求中满足error、complete等的做处理；以前请求传输中，只遇到同域数据传输，跨域数据传输就没遇到过；对于jquery等一些第三方js，压缩版本是怎么做出来的没有去深入思考（那些压缩工具可以压缩js文件）

再比如开发调试，以前的技巧很单一，就是通过选取element元素，然后通过搜索技巧找到代码，在一段时间的web项目的实践中还知道，可以通过查看网络请求，查看触发事件等方式快速定位。

一、开发中遇到的前端知识点
1、eval
参考：https://www.cnblogs.com/objectorl/archive/2009/12/29/eval-and-JSON.html

eval函数将把最后一个表达式或者语句所包含的值或引用作为返回值
（1）对json格式返回做转换
（2）转换方式

加上圆括号的目的是迫使eval函数在评估JavaScript代码的时候强制将括号内的表达式（expression）转化为对象，而不是作为语句（statement）来执行。举一个例子，例如对象字面量{}，如若不加外层的括号，那么eval会将大括号识别为JavaScript代码块的开始和结束标记，那么{}将会被认为是执行了一句空语句。所以下面两个执行结果是不同的：

alert(eval("{}"); // return undefined
alert(eval("({})");// return object[Object]

2、弹窗插件，sweetalert.js
你可以通过下面的方法来处理对话框的用户交互：

swal({
  title: 'Are you sure?',
  text: 'You will not be able to recover this imaginary file!',
  type: 'warning',
  showCancelButton: true,
  confirmButtonText: 'Yes, delete it!',
  cancelButtonText: 'No, keep it',
}).then(function(isConfirm) {
  if (isConfirm === true) {
    swal(
      'Deleted!',
      'Your imaginary file has been deleted.',
      'success'
    );
 
  } else if (isConfirm === false) {
    swal(
      'Cancelled',
      'Your imaginary file is safe :)',
      'error'
    );
 
  } else {
    // Esc, close button or outside click
    // isConfirm is undefined
  }
});  

3、jquery国际化实现
jQuery.cookie

4、跨域请求
jsonp格式

jQuery.ajax({
    url:urlpath,
    async:false,
    type:'GET',
    dataType:'jsonp',
    success:function (res) {
        console.log(res);
    }
});

5、session过期 返回登录页
通过$.ajaxSetup，设置AJAX的全局默认设置，可以处理会话过期等问题

 $.ajaxSetup({
        type: 'POST',
        complete: function(xhr,status) {
            var sessionStatus = xhr.getResponseHeader('sessionstatus');
            if(sessionStatus == 'timeout') {
                var top = getTopWinow();
                var yes = confirm('由于您长时间没有操作, session已过期, 请重新登录.');
                if (yes) {
                    /*location.href ---如果后面没跟值 那么就是获取当前页面的url
                        至于top, 表示是顶层页面， 因为页面之中可能嵌入了 frame 等子页面，top表示最外面一层
                        top.location.href  -- 当前页面地址
                     */
                    top.location.href = '/EasyUI/login.jsp';            
                }else{
                    window.opener=null;
                    window.open('','_self');
                    window.close();
                }
            }
        }
    });
    
    function getTopWinow(){
        var p = window;
        while(p != p.parent){
            p = p.parent;
        }
        return p;
    }

6、设置session有效期
（1）session.setMaxInactiveInterval(Constants.MAX_INACTIVE_INTERVAL);
（2）web.xml文件配置

<session-config>
    <session-timeout>1</session-timeout>
</session-config>

7、X-Requested-With
X-Requested-With为空，同步请求
X-Requested-With不为空，ajax请求

if(request.getHeader("X-Requested-With") != null)
 && request.getHeader("X-Requested-With").equalsIgnoreCase("XMLHttpRequest")){
}

8、jquery获取json文件

function getSsoUrlJson(urlPath, url) {
    $.ajaxSettings.async = false;
    $.getJSON("jsons/ssoUrlInfo.json", function (data) {
        $.each(data, function (infoIndex, info) {
            if (infoIndex === "ssoUrlInfos") {
                // 认证
                urlPath = info[0].url + url;
            }
        });
    });
    $.ajaxSettings.async = true;
    return urlPath;
}

9、request.getHeader(“referer”)，退出登录

request.getHeader("referer")：获取来访者地址

注意：只有通过链接访问当前页的时候，才能获取上一页的地址，以下情况是获取不到值的：

1）window.open
2）直接输入地址
3）改变location
4）<a href="javascript:location='url'">xx</a>

二、其他开发问题
1.js压缩和压缩工具
2.浏览器兼容问题
3.浏览器缓存问题
4.session和cookie的使用优缺点
5.浏览器可以手动修改source源码，也可在控制台写入语句并执行输出

三、前端调试技术
前端主要使用浏览器开发者工具来调试，调试方式：
1.源码定位和搜索
可通过点击element（快捷键Ctrl+shift+C）找到前端代码位置，根据id、class、click事件、名称等方式搜索
2.network页签
（1）如果应用有ajax请求，可通过network页签查看请求记录，根据请求url找到代码对应映射
（2）可以查看性能
3.application页签
可以查看项目的cookie等参数
4.console页签
查看输出和异常