前端笔记（201905-201906）

 一、vue随笔

1）vue-cli搭建项目，config/index.js

将前端服务的host设置为0.0.0.0，则可使用本机全部的ip地址访问前端页面如localhost、局域网ip地址、外网ip地址

相关：http://www.javashuo.com/article/p-xplqgwwd-ke.html

2）axios请求

// request.js
import axios from 'axios'
import { Indicator, Toast } from 'mint-ui'

// 建立axios实例
const service = axios.create({
  baseURL: process.env.BASE_API, // api的base_url
  timeout: 60000                  // 请求超时时间
})

// request拦截器
service.interceptors.request.use(config => {
  // Do something before request is sent
  Indicator.open('加载中...')
  return config
}, error => {
  // Do something with request error
  Promise.reject(error)
})

// respone拦截器
service.interceptors.response.use(
  response => {
    Indicator.close()
    const res = response.data
    if (res.status == 'error') {
      Toast(res.info || '未知错误');
      return Promise.reject(res)
    } else {
      return res
    }
  },
  error => {
    Indicator.close()
    Toast('请求失败')
    return Promise.reject(error)
  }
)

export default service

// 发起请求例子
import request from '@/js/request'
request({
  url: 'api/v1/zuhao/goodsDetail',
  params: {goods_id: '2836060'}
}).then(response => {
});
request({
  url: 'api/v1/zuhao/goodsDetail',
  method: 'post',   data: {goods_id: '2836060'}
}).then(response => {
});

get请求：

post请求：

相关：https://www.kancloud.cn/yunye/axios/234845

 

二、jquery ajax()方法

1）jsonpCallback参数

 2）jsonpCallback参数在多个并发的jsonp请求中有问题

 

调试后发现：jsonp请求会在全局也就是window对象上生成一个回调函数，而后在请求完成并执行完这个回调函数后将这个回调函数清理掉（值变为undefined）。因此在有并发jsonp请求时我去掉了jsonpCallback参数

去掉jsonpCallback参数后，看一下jquery对jsonp请求的处理

 

在项目中这6个jsonp请求中，有五个回调函数名相同，由于它们不是并发的，执行有前后顺序。

 

而这个请求和ajaxSign请求是并发的，因此回调函数名不一样

3）cache参数

jsonp请求时，若是不设置cache为true，会在请求参数里自动拼接带上_参数，值为时间戳

若设置cache为true，jsonp请求不会自动带上时间戳参数

对于json请求，cache默认值为true，若设置cache为false，会在请求参数中自动带上时间戳参数

 

三、项目前端经验

1）浏览器广告拦截

开发网页过程当中，避免使用ad这些命名（类名、图片名等等），若是浏览器安装了广告拦截插件，含有"ad"的这些页面元素可能会被浏览器误认为是广告而被拦截，致使相关模块没法正常显示。

2）jQuery off() 方法

off() 方法一般用于移除经过 on() 方法添加的事件处理程序。

$('body').off('click', '.bind-phone-modal .bind-btn');
$('body').on('click', '.bind-phone-modal .bind-btn', function () {
    // ...
});

3）静态资源cdn

利用多域名存储静态资源进行性能优化：网站的静态资源为何要使用独立域名

参考：http://www.javashuo.com/article/p-yfxajhzw-cg.html

http://www.javashuo.com/article/p-xjqpwhnt-cm.html

4）前端防重复提交

web前端数据请求或者表单提交每每经过对dom的点击事件来操做，可是每每由于点击过快或者由于响应等待使得用户重复屡次点击，形成表单数据的连续重复提交，形成用户体检的很差，甚至影响到整个系统的安全性。

而前端的防重复提交能够有效地规避这些问题。