20180208：

git push报错：HTTP 502 curl 22 The requested URL returned ，同时sourcetree每次提交都要输入密码，有待解决

报错最后排查是因为网络不稳定问题；

关于jsonp入参请求超长问题（URL不能太长而必须又是跨域）

20180211

关于element ui的el-input绑定keyup.enter失效问题

vue使用element-ui的el-input监听不了回车事件，原因应该是element-ui自身封装了一层input标签之后，把原来的事件隐藏了，解决方法：keyup.enter.native

20180308

关于node脚手架开发 已经搭建雏形已经完成，服务文件已经搞好，发现一个pc比较完善的脚手架可以参考：jdfx 之前考虑当前项目本地开发脚手架的思路暂时终止，有现成完善的框架可用，但这个框架对移动端spa的支持不行，可以以这个为突破口，考虑开发一套M端的组建或可用的脚手架出来！

20180308

关于js跨域问题 最近遇到了一个问题，safari禁止读取第三方cookie，默认配置是这样的，虽然可以打开，但总不能让用户操作，所以就遇到了登录态不能同步的问题；同时还有个问题这次才搞清楚场景如下：

a.com域名里引用了b.com里的一个js文件，而这个文件有个ajax又用了a.com域里的接口

原来我以为这种情况在这个js里也需要jsonp跨域才能请求通接口；通过查询和了解发现不是这样的，真正的跨域应该是：JS跨不跨域是以加载JS的页面算的，而不是js文件所在的位置；get到新知识，谨记，这次算吧跨域有有了更新层次的了解了！！

有个问题待查，同一个域接口相同的功能，一个是用jsonp形式，一个是json的形式，为什么jsonp的接口在safari里就不能拿到cookie里的登录态，json的接口就可以

关于jquery的on和bind绑定区别记录，不再模糊 on方法可以绑定动态dom元素并且入参是 (event,ele,fn)这三个入参，用的是事件委托的方式，并且只有ele元素才会触发，其他非ele元素不会触发 bind方法不能绑定动态dom元素，并且bind只能把事件委托给父元素，所有这个父元素种的子元素触发都会执行！

关于jquery绑定事件顺序记录 亲测如上顺序，只要不把时间绑定到$(document)上其他绑定方式都是先后顺序执行；而document上的绑定查了资料和交流，其实并不是利用了原生js的捕获原理，而是用的冒泡，肤浅的可以暂时理解为是从$(document).('click',ele,fn)中ele冒泡到document上的，所以这种绑定永远都会在最后一个执行;

20180515 关于webpack配置 HtmlWebpackPlugin插件生成html插入js 的时候按chunks 顺序插入解决方案

new HtmlWebpackPlugin({ ....... chunksSortMode: function (chunk1, chunk2) { var order = ['vendor', 'build']; var order1 = order.indexOf(chunk1.names[0]) var order2 = order.indexOf(chunk2.names[0]) return order1 - order2 }, })

webpack-dev-server 热启动必配output.filename，否则启动后会找不到一些文件！

20180612

在vue组件内使用less时写法要注意

<style lang="less"> //必须加上lang=‘less’在webpack才会能正常解析
.product_list{
  display:flex;
  img{
    width:100%;
  }
  li{
    display:block;min-height:50%;flex:1
  }

}

不加的话不能用，完全不会解析，嵌套写法等都会失效

20180621

关于vue项目中用axios的post请求不能即使配置了withCredentials，后端配置了cors也不生效问题记录：

关键是引入了MOCKjs模拟数据，最终发现卸载掉MOCK就可以了，问题资料记录：资料1

资料2

关于axios的post请求入参问题记录：后端的post请求默认接收形式是formData形式，而axios的请求默认是json形式，所以axios的post请求要修改入参格式，官网给出的方式如下： axios官方解决方案相关资料简单用了一下qs这个插件，貌似没成功，之后就直接换了个自己的方式如下：

axios.defaults.transformRequest = [function (data) {
  let newData = ''
  for (let k in data) {
    newData += encodeURIComponent(k) + '=' + encodeURIComponent(data[k]) + '&'
  }
  return newData
}]

针对axios进行了一个二次封装如下：

import axios from 'axios'
//http.js
//设置请求baseURL
// axios.defaults.baseURL = '/app'
//设置默认请求头
axios.defaults.headers = {
  "Content-Type": "application/x-www-form-urlencoded; charset=UTF-8",
  'Accept': 'application/json',
}
axios.defaults.timeout = 10000
axios.defaults.withCredentials=true
//添加请求拦截器
axios.interceptors.request.use(config => {
  //在发送请求之前做某事，比如说 设置loading动画显示
  $('#loading').show()
  return config
}, error => {
  //请求错误时做些事
  return Promise.reject(error)
})

//添加响应拦截器
axios.interceptors.response.use(response => {
  //对响应数据做些事，比如说把loading动画关掉
  $('#loading').hide()
  return response.data
}, error => {
  //请求错误时做些事
  return Promise.reject(error)
})

//如果不想要这个拦截器也简单，可以删除拦截器
//axios.interceptors.request.eject(myInterceptor)
// POST发送请求前处理入参的数据为：formData 形式
axios.defaults.transformRequest = [function (data) {
  let newData = ''
  for (let k in data) {
    newData += encodeURIComponent(k) + '=' + encodeURIComponent(data[k]) + '&'
  }
  return newData
}]
axios.jsonp=(url,params)=>{
  // 判断url是否存在以及是否为字符串
  if(!url || typeof url !== 'string') throw new Error('必须传入字符串类型的url地址');
  let param=function(data){
    let url = ''
    for (var k in data) {
      let value = data[k] !== undefined ? data[k] : ''
      url += '&' + k + '=' + encodeURIComponent(value)
    }
    return url ? url.substring(1) : ''
  };
  url += (url.indexOf('?') < 0 ? '?' : '&') + param(params)
  return new Promise((resolve,reject) => {
    // 处理返回的结果
    var oDate=new Date().getTime();
    window['jsonCallBack'+oDate]= (result) => {
      resolve(result)
    }
    // 在页面创建script标签，并将src设置为请求地址，取回数据之后移除script标签
    let JSONP = document.createElement("script");
    JSONP.type = "text/javascript";
    JSONP.src = `${url}&callback=jsonCallBack${oDate}`;
    document.getElementsByTagName("head")[0].appendChild(JSONP);
    setTimeout(() => {
      document.getElementsByTagName("head")[0].removeChild(JSONP)
    },500)
  })
}
axios.oGet=(url,params)=>{
  return axios.get(url,{"params":params})
  if(process.env.NODE_ENV=="development"){
    return axios.jsonp(url+'?format=jsonp',params)
  }else{
    return axios.get(url,{"params":params})
  }
}
//导出使用
export default axios

关于vue中click触发新标签打开方法

let newLink=window.open()
newLink.location.href=URL

webpack 图片打包，loader配置说明

{
      test: /\.(png|jpg|jpeg|gif)$/,
      loader: 'url-loader?limit=8192&name=[name].[ext]&outputPath=img/&publicPath=../'
}

参数说明: limit: 在文件小于多少个字节时，将文件编码并返回DataURL。 name: 表示输出的文件名规则，如果不添加这个参数，输出的就是默认值：文件哈希。 outputPath: 表示输出文件路径前缀(此例中意为:在输出文件夹下新建（如果没有）一个名为img的文件夹，把图片放到里面)。 publicPath: 表示打包文件中图片路径的前缀，如果你的图片存放在CDN上，那么你上线时可以加上这个参数，值为CDN地址，这样就可以让项目上线后的资源引用路径指向CDN了。

webpack+vue组件懒加载配置 如何与webpack配合实现组件懒加载

1、在webpack配置文件中的output路径配置chunkFilename属性

output: {
    path: resolve(__dirname, 'dist'),
    filename: options.dev ? '[name].js' : '[name].js?[chunkhash]',
    chunkFilename: 'chunk[id].js?[chunkhash]',
    publicPath: options.dev ? '/assets/' : publicPath
},

chunkFilename路径将会作为组件懒加载的路径

组件层级代码分割

//全局组件
Vue.component('AsyncComponent', () => import('./AsyncComponent'))

//局部注册组件
new Vue({
 // ...
 components: {
 'AsyncComponent': () => import('./AsyncComponent')
 }
})

// 如果不是default导出的模块
new Vue({
 // ...
 components: {
 'AsyncComponent': () => import('./AsyncComponent').then({ AsyncComponent }) => AsyncComponent
 }
})

详细说明：Vue代码分割懒加载的实现方法

ithack / ithack.github.io

jd问题记录，待整理存入博客 #3

20180208：

20180211

20180308

20180308