前端筆記（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的點擊事件來操做，可是每每由於點擊過快或者由於響應等待使得用戶重複屢次點擊，形成表單數據的連續重複提交，形成用戶體檢的很差，甚至影響到整個系統的安全性。

而前端的防重複提交能夠有效地規避這些問題。