解释 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;
- Windows[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.
在工作中你是如何优化自己的代码的?
命名规范
注释规范, 参考: jsDoc
注释覆盖率达 50% 以上
使用表驱动代替多层 if 判断: 使用表驱动法替代普通的判断分支语句 (JS 的深入探索)
使用 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 响应式原理 @郝晨光
结言
感谢您的查阅, 本文由郝晨光整理并总结, 代码冗余或者有错误的地方望不吝赐教; 菜鸟一枚, 请多关照
来源: http://www.jianshu.com/p/b4379a615c03