前端常见面试题（十七）@郝晨光

---

解释jsonp的原理

jsonp的原理就是利用script标签不受同源策略限制的特性，通过与后端协作，动态的创建script，并且传入一个回调函数，之后由后端返回一个动态生成的js文件，调用该回调函数来实现的。

简单实现

/**
 * @function jsonp - jsonp函数
 * @desc 一个带参数的函数
 * @param {Object} options 配置参数
 * @param {String} options.url 请求路径
 * @param {String} options.jsonp="callback" 指定jsonp参数名称
 * @param {String} options.jsonpCallback="jsonpCallback" 指定jsonp回调函数名称
 * @param {Function} options.success 获取数据成功执行的函数
 * */
function jsonp(options) {
    options.jsonp = options.jsonp || 'callback';
    options.jsonpCallback = options.jsonpCallback || 'jsonpCallback';

    let script = document.createElement('script');
    script.src = options.url;

    window[options.jsonpCallback] = function(data) {
        options.success && options.success(data)
    };

    document.body.appendChild(script);
}
jsonp({
    url: 'jsonp.js',
    success(data) {
        console.log(data);
    }
})

在jsonp.js中仅仅只有一行代码，这个代码也就是后端需要返回给我们的格式，只不过在我们前端写js文件直接写就可以，但是后端给我们返回的话需要使用字符串拼接。

// jsonp.js
jsonpCallback({name: 'jsonp'});

这样我们就简单的实现了一下jsonp。

在工作中你是如何优化自己的代码的？

1. 命名规范
2. 注释规范，参考：jsDoc
3. 注释覆盖率达50%以上
4. 使用表驱动代替多层 if 判断：使用表驱动法替代普通的判断分支语句(JS的深入探索)
5. 使用ESLint对代码格式进行规范。

axios是什么？如何使用？描述其实现登录的流程

axios是一个基于Promise封装的ajax类库，它可以在任何支持ajax和Promise的环境下使用。
使用方法：

axios({
    url: '', // 请求路径
    method: 'GET', // 请求方法
    params: {
        // get请求提交数据
        name: '张三'
    },
    data: {
        // post请求提交数据
    },
    headers: {
        // 设置请求头
        'Content-Type': 'application/json'
    }
})

描述实现登录流程
首先获取用户输入的值，用户名、密码等用户填写的信息，接着将用户的信息按照后台的要求组合成一个JSON对象或者FormData的形式，如果是对象的话，直接在data中发送就可以，如果是FormData的话，需要先修改请求头，将请求头修改为form(application/x-www-form-urlencoded)的请求头，然后在data中发送，接着通过后端返回的数据判定用户登录成功与否。

---

如果本文对您有帮助，可以看看本人的其他文章:
GitHub创建项目并添加协作者@郝晨光
TypeScript入门学习@郝晨光
简单实现Vue响应式原理@郝晨光

结言

感谢您的查阅，本文由郝晨光整理并总结，代码冗余或者有错误的地方望不吝赐教；菜鸟一枚，请多关照